CSS Modules

[Archmonger]

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

• https://css-tricks.com/different-ways-to-write-css-in-react/#aa-use-css-modules
• https://css-tricks.com/css-modules-part-1-need/

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...
   • Writing a python-based CSS parser
   • tinycss2
   • cssutils
   • cssjson
2. Parsing the component's VDOM into an LXML node tree using our vdom_to_etree util function
3. Determining where to apply styles via cssslect
4. Convert the etree back into VDOM using etree_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

@component
@css_module("/path/to/stylesheet.css") # Allow for string paths or a file handle
def my_component( ... ):
   return html.div({"className": "styles.my_selector"}, ... )

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.

styles = css_module("/path/to/stylesheet.css")  # Allow for string paths or a file handle

@component
@styles  # Makes the CSS module aware of how to uniquely scope class names (see `hash` below)
def my_component( ... ):
   return html.div({"className": styles.my_selector }, ... )

The appended stylesheet will have its selectors converted to be unique {filename}_{classname}_{hash}, and all values referenced by the dot notation (eg styles.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

1. Serve the file's contents as a string within a html.style tag
   • This is the simplest solution, but would lead to duplicated style rules for each time the component is rendered on the page
2. Force the user to display a component that renders all CSS modules in one stylesheet
   • Would require creating a load/unload framework for CSS Modules
3. Force the user to display a component that renders one CSS module in a stylesheet
   • Gives the user more control over rending behavior
4. Create a Python view that is effectively a primitive static file server
   • This could prove useful for future JavaScript module capabilities
5. Compile CSS on-the-fly into an output directory and have the user serve this files themselves
   • Is less convenient than the methods above
   • Would not have compatibility with whitenoise

[Archmonger]

I currently think CSS Modules Imitation Interface and Option 3 is the best bet.

Let me know if you disagree.

[OsamaElsherif]

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.