Important
Introducing HamedStack! For all my latest libraries, visit: Explore HamedStack. Replacements and updates are available at the link. Thank you for your support! The new version of this library is accessible via HamedStack.StyleInjector
Simple functionality to inject a text or object-based style sheet into your HTML document.
Use the following command:
npm i styl-injector
yarn add styl-injectorA very simple object-to-css converter.
| Parameter(s) | Description | Optional | Default |
|---|---|---|---|
| obj | Object-based style | No | - |
Returns: a css text.
const cssObj = {
".main-wrapper": { flexDirection: "row", display: "flex", flex: "1" },
"#content": { flex: "1" },
ul: { padding: "20px 0", flex: "1" },
li: { fontFamily: "'Lato'", color: "whitesmoke", lineHeight: "44px" }
};
let cssText = toCss(cssObj);The value of cssText will be equal to:
.main-wrapper {
flex-direction: row;
display: flex;
flex: 1;
}
#content {
flex: 1;
}
ul {
padding: 20px 0;
flex: 1;
}
li {
font-family:'Lato';
color: whitesmoke;
line-height: 44px;
}You can use css-to-js transformer to convert a CSS text to a JS object and use the result for toCss(result) directly!
There is a conventional naming approach for defining your rules. Every uppercase character will change to a hyphen and a lowercase character (XyZ => -xy-z). For example, If you want to achieve -webkit-animation you should write WebkitAnimation or flexDirection will change to flex-direction.
A functionality to inject your text or object-based style to the html document easily!
| Parameter(s) | Description | Optional | Default |
|---|---|---|---|
| textOrObject | Text style or object-based style | No | - |
| id | To set an id for your <style>, it helps you to update an specific style tag |
Yes | - |
| overridable | If set this to false, your style is only injected once but to do this you must set an id parameter too. |
Yes | true |
| hostElement | To set your host element to inject your style into it. Useful for shadow DOM | Yes | document.head |
injectStyle(cssObj,'my-style-tag');
injectStyle(`
.main-wrapper {
flex-direction: row;
display: flex;
flex: 1;
}
#content {
flex: 1;
}
ul {
padding: 20px 0;
flex: 1;
}
li {
font-family:'Lato';
color: whitesmoke;
line-height: 44px;
}
`,'my-style-tag');