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 | (string | 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 and strings. 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,
  '@supports (display: flex)': {
    '@media screen and (width >= 900px)': {
      'nested-rule': {
        SomeVariable: '20px',
        display: 'flex'
      }
    }
  }
}

Will be compiled to:

.some-rule {
  background-color: red;
  --some-variable: 10px
}
.hide-rule {
  display: none !important
}
@supports (display: flex) {
  @media screen and (width >= 900px) {
    nested-rule {
      --some-variable: 20px;
      display: flex
    }
  }
}

removeStyle

Given an HTMLElement or a ShadowRoot element, it removes the style element associated to it (if it exists).

removeStyle(root: HTMLElement | ShadowRoot): void