https://github.com/elchininet/home-assistant-styles-manager
Manage Home Assistant styles per DOM elements
https://github.com/elchininet/home-assistant-styles-manager
css home-assistant javascript-library library shadow-dom shadow-root styles
Last synced: 3 months ago
JSON representation
Manage Home Assistant styles per DOM elements
- Host: GitHub
- URL: https://github.com/elchininet/home-assistant-styles-manager
- Owner: elchininet
- Created: 2024-11-06T17:09:06.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2026-03-22T20:44:14.000Z (4 months ago)
- Last Synced: 2026-03-23T12:39:00.545Z (4 months ago)
- Topics: css, home-assistant, javascript-library, library, shadow-dom, shadow-root, styles
- Language: TypeScript
- Homepage:
- Size: 874 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# home-assistant-styles-manager
Manage Home Assistant styles per DOM elements
[](https://github.com/elchininet/home-assistant-styles-manager/actions/workflows/deploy.yaml)
[](https://github.com/elchininet/home-assistant-styles-manager/actions/workflows/tests.yaml)
[](https://coveralls.io/github/elchininet/home-assistant-styles-manager?branch=master)
[](https://badge.fury.io/js/home-assistant-styles-manager)
[](https://www.npmjs.com/package/home-assistant-styles-manager)
## Install
#### npm
```bash
npm install home-assistant-styles-manager
```
#### yarn
```bash
yarn add home-assistant-styles-manager
```
#### PNPM
```bash
pnpm add home-assistant-styles-manager
```
## API
### Class instantiation
The `HomeAssistantStylesManager` class can be instantiated sending an optional options object.
```typescript
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.
```typescript
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.
```typescript
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:
```javascript
{
'.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:
```css
.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).
```typescript
removeStyle(root: HTMLElement | ShadowRoot): void
```