shama
extract style > css / css examples
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
- [x] 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
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.
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.
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.
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
Opened an issue about this on attach-css - https://github.com/shama/attach-css/issues/1