Open Archmonger opened 1 year ago
I currently think CSS Modules Imitation Interface
and Option 3
is the best bet.
Let me know if you disagree.
I've another thing not like the options you've said.
in my framework I use different mechanism could work for you guys, I make a CSS_UTILS object that knows the CSS writting rules and pre process them, so whatever goes in it get out as normal css code. and a CSS_WORKER object that handle the CSS of the elements, every element has it's own styling written with it, it's more like write a css file for each element, but in deffernt way.
so when a component made I made the programmer decide is it a server-side redered or a client-side rendered, and by the dececion that is made, I made the WORKER to handle the css styling is it need to be in a css file or not. in the case of not -- which means a client-side render -- the WORKER pass the styling to a JS_WORKER, which makes the styling been written and made with javascript, in that case any adding to the css is made in the stylesheer-inspector (in another hand in the browser it self).
you can get inspired from the mechanism and it may help you, since I see that there is some JS integrations already in your project.
cheers.
Current Situation
Currently, there is no way to tie CSS to an individual component, such as React CSS Modules
Here's some samples on how this works in React
See previous issue #671
Proposed Actions
This should be possible by 1) Parse a CSS file into selectors and style pairs such as
{'#my-selector': { ... } }
. We can do this via...vdom_to_etree
util function 3) Determining where to apply styles viacssslect
4) Convert the etree back into VDOM usingetree_to_vdom
.Note: With the interfaces below, we might want to implement a
cache_handler = ...
parameter to allow for customization on how we store stylesheet in cache.Inline Style Interface
The user interface may look something like this
However, this kind of interface does not retain the same kind of dot notation that React CSS Modules support. If going with this implementation, we would be forced to apply all styling using in-line styles.
In-line styles are not necessarily an issue, but would severely increase size DOM in situations where one selector can apply to 100+ elements.
CSS Modules Imitation Interface
To more accurately imitate React, we might want to consider this interface instead.
The appended stylesheet will have its selectors converted to be unique
{filename}_{classname}_{hash}
, and all values referenced by the dot notation (egstyles.my_selector
) will use these unique selectors. The hash value should be based on the component's dotted path.In this example, the uniquely generated selector may look something like
styles_my_selector_309571057
.What to do with the stylesheet?
Generally, React CSS modules are precompiled (webpack-esque) and stored in some output directory, then it is left up the the webserver to serve them.
Since we currently have no way of pre-compiling CSS modules, we have a few options
html.style
tag