open-index/open-npm huggingface dataset:
npm package: @hamedstack/style-injector
Description: ![font](https://user-images.githubusercontent.com/8418700/140723127-2bf267fd-d340-4154-ba8d-7c795011d1d9.png)
Latest version: 1.0.1

![font](https://user-images.githubusercontent.com/8418700/140723127-2bf267fd-d340-4154-ba8d-7c795011d1d9.png)

# HamedStack.StyleInjector
Simple functionality to inject a text or object-based style sheet into your HTML document.


## Installation

Use the following command:

```bash
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.

```javascript
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:
 
```css
.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](https://transform.tools/css-to-js) 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 |


```javascript
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');

```

<hr/>

<div>Icons made by <a href="" title="Vector Clans">Vector Clans</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>