HamedStack.StyleInjector

Simple functionality to inject a text or object-based style sheet into your HTML document.

Installation

Use the following command:

npm i @hamedstack/style-injector

yarn add @hamedstack/style-injector

toCss(obj)

A 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.

---

injectStyle(textOrObject, id, overridable, hostElement)

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');

---

Icons made by Vector Clans from www.flaticon.com