extract style > css / css examples

[shama]

CSS can be attached to elements with: this.attachCSS('css src') which will localize the CSS to the element.

• How does this fair with nested elements? Im thinking top level elements should rule the CSS of all nested elements
• Extract into separate module and add a ton more tests
• A dynamic className wont work well if written out to a file.css
• Experiment more with overriding element CSS

[yoshuawuyts]

For prefixing an approach similar to https://github.com/requireio/wrap-selectors might be interesting, though you say it won't work well when writing out to a file.css. Can you elaborate?

As for the cascading: I think the top level > lower level seems like a good approach. Some level of cascade would be nice though; reset.css-ish styles could be provided by low level components on which higher level components can in turn build. Currently that doesn't work since the component expects a class to exist on the element before css can render.

[shama]

wrap-selectors looks interesting but I didn't like how you need to use custom syntax @document wrap() { }. I'd prefer if I could just write regular CSS relative to the element and the API would figure out what to do, especially with nested elements. That way existing CSS/compile-to-CSS can be brfs or attached to elements more easily.

you say it won't work well when writing out to a file.css. Can you elaborate?

If the class name is dynamically generated, it will be different upon each initialization. So if previously compiled to a file.css, the selectors localizing to the element will no longer be correct. Besides enforcing a user supplied root class on each element, I'm not sure yet of a better way to solve that.

Some level of cascade would be nice though;

I agree. It would be nice if the element author had some control over how it will cascade. It would also help optimize to avoid selectors like: .my-table .super-table .base-table for deeply nested situations.

My main goal is an elegant alternative to inline styles. Elements provide an overridable static style for a separately served asset or if the user really wants to avoid the request, an inline nonce'd style tag. Then do element.style[key] = val for all dynamic styles. That way I can disable inline style outright in my CSP.

[yoshuawuyts]

It appears webpack is also scoping css: https://github.com/markdalgleish/postcss-local-scope. Not sure I like their non-standard :global syntax though. Also doesn't deal with cascading styles. Ghmmh, gonna ponder a little on this.

[shama]

I agree. Let me know if you come up with more options for us to try. I moved the attachCSS stuff into it's own module: https://github.com/shama/attach-css

[yoshuawuyts]

Opened an issue about this on attach-css - shama/attach-css#1