LifeCSS

A small library to add, remove or modify css rules in situ.

Important

As of july 2025 this module is mirrored from CodeBerg.org to Github. The Codeberg code is authorative.

The module is also used in the JQx module.

Usage

Import in EcmaScript module

Your script is of type module;

<scripttype="module">// use the bundle from https://unpkg.com/importcssEditFactoryfrom"https://unpkg.com/lifecss@latest/Bundle/index.min.js";// orconstcssEditFactory=(awaitimport("https://unpkg.com/lifecss@latest/Bundle/index.min.js")).default;// this will create an editor and a stylesheet with id #myCustomStylesheet in the document header. constmyCssEdit=cssEditFactory({createWithId: `#myCustomStylesheet`});// this will create an editor for an existing stylesheet in the documentconstmyCssEdit=cssEditFactory({styleSheet: document.styleSheets[0]}));// ... your code</script>

Retrieve a browser script

Your script is a regular (non module) script

<!-- use the bundle from unpkg.com  note: ./index.browser.js can be used too. It is kept for legacy. but consider it deprecated. It may disappear later. --><scriptsrc="https://unpkg.com/lifecss@latest/Bundle/index.browser.min.js"></script><script>constcssEditFactory=LifeStyleFactory.default;// ... your code</script>

Syntax

[cssEditor instance](rule: string)
∟ add/modify a complete css [rule]
[cssEditor instance](selector: string, rules: Object)
∟ add/modify properties of the rule with [selector] [cssEditor instance](selector: string, {removeRule: true})
∟ remove a complete rule identified with [selector]
[cssEditor instance](selector: string, {removeProperties: { Object }})
∟ remove properties [removeProperties] from the rule with [selector]

Notes:

• !important will be honored
• Most pseudo selectors (e.g. :after, :not(...)) will work as expected.
• Nested css (e.g. &:hover {...}) will work as expected.
• For special characters without a unicode character escape prefix (\u...) within the content, escape the backslash e.g. content: '\\1F44D'. Or indeed use a unicode escape, e.g. \u{1F4C3} or '\u1F44D'.
• When an edit did not work, an error is printed in the console. Errors do not break further script execution.

Examples:

// You created or retrieved a stylesheet editor named myCssEdit// now there are two ways to add a css rule to that sheet// 1. A complete rule stringmyCssEdit(` .warn { color: red;  font-weight: bold; background-color: #ffffc0;  }`);// 2. A selector with a rule properties object (note the camelcasing for keys) myCssEdit(`.warn`,{color: `red`,fontWeight: `bold`,backgroundColor: `#ffffc0`});// When the rule already exists, it is modified, otherwise it is created// You can remove a complete rule usingmyCssEdit(`.warn`,{removeRule: 1});// You can remove properties from a rule usingmyCssEdit(`.warn`,{removeProperties: {fontWeight: 1,"background-color": 1}});// That's all folks.

Example

A comprehensive example can be found @Stackblitz.