home-assistant-styles-manager

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	Description
prefix	yes	prefix that will be used for the styles ids
namespace	yes	namespace that will be used for the 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: | 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 be 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

Changelog

[1.1.0] - 2024-11-07

• The method addStyle now also accepts an array of CSS-in-JS objects