tiny scoped-css replacement
Site | Repository | NPM | bundlephobia.
- add docs using JSDoc
- tests
Alder uses ES6 Imports/Exports, so it can be imported using import Alder from '{link}.js'
.
Alder is also available from NPM (package).
To use in an NPM project:
npm i alder.js
"dependencies": {
"alder.js": "~0.2.1"
// ...
}
To use within your JavaScript/TypeScript file:
const { Alder } = require("alder.js");
let alder = new Alder();
// ...
The constructor accepts a Boolean
value that determines whether Alder is run automatically. It defaults to true
. If an argument is not provided, all elements that match * > style
are parsed.
let alder = new Alder(); // will parse all style elements within '* > style' elements
Accepts a single live node. The node should be the parent of the style
attribute you wish to scope. If no arguments are provided, the parse
method returns false
.
let alder = new Alder(false);
alder.parse(document.body.querySelector('style').parentElement) // will parse the style elements within the parent of the first style element
When scoping pseudo-elements and pseudo-classes, if the parent element doesn't have a unique id
, a data-alder
attribute is added so that scoping can take place.
- Media queries