augmented-ui plugin: adds the
augmented-ui attribute to html elements automatically from CSS
assumes you're using augmented-ui already
npm install aug-attr-spliced
Allows you to specify augmentations for an element (or several; whatever matches the selector) from the CSS itself with the
--augmented-ui custom property:
On page load, the
.logo-augmented-ui element will be updated automatically:
On hover of the element, aug-attr-spliced will automatically update the augmentations from the :hover rule:
And when you stop hovering (mouseleave), it will update again, setting the html el attribute accordingly.
When the button is clicked, the "un-logo" class name is added to the logo. This change is automatically detected and the attribute is again updated to the expected rule.
Mouseenter and mouseleave from that point will keep updating it, but the last rule applied is always
un-logo so the cascaded result is no change.
Add the attribute
data-attr-spliced-ignore to parent containers of elements that you expect will change frequently to avoid heavy repeat cascading checks and application.
(unless you need css to update the augs within)
- Augmentations will not be applied if js is disabled and don't apply until the page has loaded (any augmented elements above the landing fold should be included in the html instead of the CSS if you don't want users to potentially see them unapplied)
- you cannot set these on pseudo elements, and only the
:hoverpseudo class is supported
- aug-attr-spliced does not apply weights to the rules, it only takes them in order (so #id rule before a .class rule does not override the .class rule like you may expect)
- does not currently watch for CSS added to the page or removed, this is the next TODO though
- this is a very early release and there are no tests yet; expect optimizations, a demo page, and tests soon