For my CSS extension experiments in 2018 I think I've figured out the easiest way to prototype and test things out: Event-driven virtual stylesheets.
How to use an event-driven virtual stylesheet
- Create a
<style>tag in DOM, or empty CSS stylesheet in CSSOM
- Populate that
<style>tag or CSSOM stylesheet with a string containing CSS
- This string can be a JS string, the output of a function, a JS template string, or a combination of these.
- Manage event listeners (and/or observers) that reprocess the styles when a specific event occurs (on a specific element, if you want)
To do step 1, 2, and 4, I can use something like: https://unpkg.com/jsincss/index.js to create and populate a
<style> tag based on events.
To do step 3 I can write a stylesheet like this, which is a function that holds a JS template string with CSS text inside:
Notice I was able to easily extend this stylesheet by importing a helper function called 'jsincss-element-query' that provides some simple tests for using element queries:
Here's a lightweight element query demo built using these methods:
import jsincss from '//unpkg.com/jsincss/index.js' import stylesheet from './element-query-test.js' import scrollStyles from './element-query-scroll-test.js' jsincss(stylesheet) jsincss(scrollStyles, ['[class*="-scroll-"]'], ['scroll'])
- import the
- import the main stylesheet function (which itself imports
- import the scroll styles function (which imports
- apply the main styles with default options (watching
- apply the scroll styles with a custom event (watching scroll on all