CSS Injector

Features ✨

CSS Injector features:

• Inject CSS in your site globally selectively for your pages with regex
• os method available: its a function that can be called to get the current browser OS, useful for triggering external functions'. It returns a string containing "android" | "ios" | "windows" | "desktop"
• isMobile, isCanvas exposed for filtering
• Code written in Typescript and minified/bundled with Vite

How to use 📖

CSS Injector can be used importing the JS code via CDN

With CDN 🚀

<script src="https://cdn.jsdelivr.net/npm/@mobiloud/ml-css-injector@latest/dist/ml-css-injector.min.js"></script>
<script>
    (function(){
      addStyle({css: `a{color: red !important}`});
      addStyle({css: `a{color: yellow !important}`, regex: /\/\?param$/});
      addStyle({css: `a{color: green !important}`, regex: /.*/, name: "Global Styles"});
      addStyle({css: `a{color: green !important}`, regex: /.*/, name: "Global Styles", logs: true});
    })()
  </script>

Configuration options ⚙️

// accepts any styles as a string

let style = `
a{
  color: green;
  background-color: yellow
} 
.className {
  font-size: 2rem
}
`
// accepts regex enclosed within slashes
let regex = /.*/

// accepts string
let name = "Style name"

//boolean --> Prints logs in console for debugging

addStyle({css: string, regex: string, name: string, logs: boolean});
addStyle({css: `color: red !important`}) // if no regex passed, the styles applies to every page

Recipes🍳

Add multiple styles

// accepts any styles as a string

let styles = [
  {
    css: `
          a{
            color: green;
            background-color: yellow
          } 
          `,
    regex: /.*/,
    name: "Global Styles"
  },
  {
    css: `
          .cart{
            color: green;
            background-color: yellow
          } 
          `,
    regex: /.*\/cart/,
    name: "Cart page"
  },
  {
    css: "div.login{display: none}",
    regex: /.*\/login/,
    name: "Login page"
  }
]
// accepts regex enclosed within slashes

styles.forEach(e => { 
    addStyle({
      css: e.css,
      regex: e.regex,
      name: e.name,
      logs: true
    })
} )

Methods 💡

deviceData.os // returns current os "android" | "ios" | "windows" | "desktop"
deviceData.isCanvas // returns true or false
deviceData.isMobile // returns true or false

Testing Widgets 🧪

www.mobiloud.com/docs/testing-widgets