https://css-tricks.com/the-css-custom-property-toggle-trick/ 👋

You can read my write-up of the trick here: https://github.com/propjockey/css-sweeper#css-is-a-programming-language-thanks-to-the-space-toggle-trick

I've created a couple libraries with this trick already, check out:

css-media-vars: https://github.com/propjockey/css-media-vars A brand new way to write responsive vanilla CSS

augmented-ui: https://augmented-ui.com/ Sci-Fi and CyberPunk element shaping made super easy

Plus a couple demos built on it:

https://github.com/propjockey/bcd7sdd A seven segment display decoder

https://github.com/propjockey/css-sweeper MineSweeper programmed in 100% CSS (no JS)

Have fun!

https://twitter.com/James0x57

augmented-ui plugin: adds augmented-ui attribute to html elements automatically from CSS

assumes you're using augmented-ui already

npm install aug-attr-spliced

import "aug-attr-spliced"

or

<script type="module">
  import "https://unpkg.com/aug-attr-spliced/aug-attr-spliced.js"
</script>

Allows you to specify augmentations for an element (or several; whatever matches the selector) from the CSS itself with the --augmented-ui custom property:

.logo-augmented-ui {
  --augmented-ui: tr-clip r-notch-y br-round bl-clip exe;
  --aug-border: 20px;
  --aug-border-bg: black;
  --aug-tr: 40px;
  --aug-bl: 60px;
  --aug-br: 30px;
  --aug-r-width: 20px;
  --aug-r-height: 200px;
}
.un-logo,
.logo-augmented-ui:hover {
  --augmented-ui: bl-clip r-notch-x exe;
  --aug-r-width: 60px;
}
.logo-augmented-ui {
  box-sizing:border-box;background:#ffd700;width:400px;height:400px;padding-top:120px;padding-left:40px;font-family:sans-serif;font-size:100px;font-weight:bold;text-align:left;
}

<div class="logo-augmented-ui">
  &lt;aug&gt;
</div>
<button onclick="this.previousElementSibling.classList.add('un-logo')">update class</button>

On page load, the .logo-augmented-ui element will be updated automatically:

el.setAttribute("data-augmented-ui", " tr-clip r-notch-y br-round bl-clip exe")

On hover of the element, aug-attr-spliced will automatically update the augmentations from the :hover rule:

el.setAttribute("data-augmented-ui", " bl-clip r-notch-x exe")

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)

This is especially important to add to javascript animations because every change is observed and the cascade has to recalculate in case something changes the a rule with the --augmented-ui property.

• 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 :hover pseudo 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