0.3.9 • Published 3 days ago
lifecss v0.3.9
LifeCSS
A small library to add, remove or modify css rules in situ.
The module is also used in my JQL (JQueryLike) module.
Usage
Install
You can install LifeCSS as a module from NPM
npm -i lifecss
Import in EcmaScript module
Your script is of type module
;
<script type="module">
import cssEditFactory from "https://kooiinc.github.io/LifeCSS/";
// or
const cssEditFactory = (await import("https://kooiinc.github.io/LifeCSS/")).default;
// this will create an editor and a stylesheet with id #myCustomStylesheet in the document header.
const myCssEdit = cssEditFactory({createWithId: `#myCustomStylesheet`});
// this will create an editor for an existing stylesheet in the document
const myCssEdit = cssEditFactory({styleSheet: document.styles[0]}));
// or
const myCustomSheet = document.querySelector(`#myCustomStylesheet`).sheet;
const myCssEdit = cssEditFactory({styleSheet: myCustomSheet));
// ... your code
</script>
Retrieve a browser script
Your script is a regular (non module) script
<script src="https://kooiinc.github.io/LifeCSS/index.browser.js"></script>
<script>
const cssEditFactory = window.LifeStyleFactory;
// optionally remove from global namespace
delete window.LifeStyleFactory;
// ... your code
</script>
Syntax
[created cssEditor](rule: string)
∟ add/modify a complete css [rule]
[created cssEditor](selector: string, rules: Object)
∟ add/modify properties of the rule with [selector]
[created cssEditor](selector: string, {removeRule: true})
∟ remove a complete rule identified with [selector]
[created cssEditor](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.- For special characters, use a double escape, e.g.
content: '\\1F44D'
- For special characters, use a double escape, e.g.
- When an edit did not work, the error is shown in the console.
That should 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 string
myCssEdit(`.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 using
myCssEdit(`.warn`, { removeRule: 1 });
// You can remove properties from a rule using
myCssEdit(`.warn`, { removeProperties: { fontWeight: 1, "background-color": 1 } });
// That's all folks.
Example
A comprehensive example can be found @Stackblitz.
0.3.9
3 days ago
0.3.6
6 months ago
0.3.5
6 months ago
0.3.4
7 months ago
0.3.3
7 months ago
0.3.0
12 months ago
0.2.7
12 months ago
0.2.6
12 months ago
0.2.9
12 months ago
0.2.8
12 months ago
0.3.2
10 months ago
0.3.1
10 months ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.0
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago