home-assistant-styles-manager
v3.0.0
Published
Manage Home Assistant styles per DOM elements
Downloads
539
Maintainers
Readme
home-assistant-styles-manager
Manage Home Assistant styles per DOM elements
Install
npm
npm install home-assistant-styles-manager
yarn
yarn add home-assistant-styles-manager
PNPM
pnpm add home-assistant-styles-manager
API
Class instantiation
The HomeAssistantStylesManager
class can be instantiated sending an optional options object.
new HomeAssistantStylesManager([options])
Options object
| Parameter | Optional | Default | Description |
| -------------- | ------------- | ------------------------------- | --------------------------------------------------- |
| prefix | yes | ha-styles-manager
| prefix that will be used for the styles ids |
| namespace | yes | home-assistant-styles-manager
| namespace that will be used for the warnings |
| throwWarnings | yes | true | indicates if the library should throw warnings |
Public methods
getStyleElement
Given an HTMLElement
or a ShadowRoot
element, returns the style element associated with it.
getStyleElement(root: HTMLElement | ShadowRoot): HTMLStyleElement | null
addStyle
Given a CSS string or a CSS object and an HTMLElement
or a ShadowRoot
element, it adds a style element containing the CSS string or replace its content with the CSS string if it already exists.
addStyle(
css: string | CSSInJs | CSSInJs[],
root: HTMLElement | ShadowRoot
): void
The css
property can be a CSS string but also a CSS-in-JS object or an array of CSS-in-JS objects. Any rule with a false
value will get hidden.
For eaxample, the next CSS-in-JS object:
{
'.some-rule': {
backgroundColor: 'red',
SomeVariable: '10px'
},
'.hide-rule': false
}
Will be compiled to:
.some-rule {
background-color: red;
--some-variable: 10px;
}
.hide-rule {
display: none !important;
}
removeStyle
Given an HTMLElement
or a ShadowRoot
element, it removes the style element associated to it (if it exists).
removeStyle(root: HTMLElement | ShadowRoot): void