scoped css

[chiefjester]

Open Questions

How do you implement css in isolation with markojs? With the movement of component based authoring instead of document. People found that its better to isolate css selectors to per component as opposed to its default cascading nature.

Is this something marko js aim to solve?

Is this something you're interested in working on?

Yes

[Hesulan]

Do you mean having a separate stylesheet for each component? You can either use the new style { ... } tag, or put a style.css in the component's directory and make sure your bundler finds it.

If you mean actually restricting the CSS to specific sections of the final document, as far as I know that's not possible (except in Firefox with <style scoped>). Other frameworks just quietly add extra classes and selectors to make it look that way.

[chiefjester]

More of the latter,

It's not possible doing it in css alone. However, it is possible with the help of a build step. Basically obfuscating the classname with hashes eg. .container becomes .cn2o3j.

Prior art are css-modules, styled-components, styled-jsx.

[jordanbtucker]

This is one of the reasons I'm still using Vue.js. It has support for scoped CSS via classname injection.

The other reason is that .vue files are just HTML files, so you don't need to use prefixes like $ or -, and they don't need their own editor extensions for syntax highlighting.

[gilbert]

Scoped CSS is indeed useful, but having "just HTML" means you have to write JavaScript inside non-sytax-highlighted strings (and "just HTML" is not even technically true, since vue.js uses dots in attribute names). The HTML-JS syntax is definitely a step forward in templating languages :)

[jordanbtucker]

@mindeavor, I don't want to derail this topic, but .vue files support <script> and <style> elements, so there's no need to put your JavaScript in a string.

And according to the HTML spec, there's nothing wrong with dots in attribute names.

See Single File Components for more information.

[patrick-steele-idem]

Hey folks, support for scoped styles is something we thought about when working Marko v4 and it is something we want to offer in the near future. The problem requires some thought because the solution needs to be compatible with the module bundler (webpack, lasso, etc.) and we would need to figure out how marko scoped styles would play nice with simple CSS and the various CSS preprocessor languages.

[patrick-steele-idem]

@thisguychris Since you mentioned that you are interested in working on this, it would be great to hear some proposals. We need to find a good solution for Marko while considering existing solutions:

• BEM
• Scoped CSS in Vue
• React CSS modules
• etc.

Let's see some ideas :)

[gilbert]

@jordanbtucker I concede my incorrect point about the attribute names :) For code, I'm talking about code in HTML attribute value strings, not script tags.

[chiefjester]

@patrick-steele-idem I think I'm leaning towards Vue's implementation as a recommendation. Which is just hooking up to post-css. With post-css you can basically create any transform you want, sass, less, css-modules.

Since we'll all shoving this down to compiler step. There won't be any added bulk to the final output.

[sebastianmacias]

+1 Vue like implementation

[drewfish]

Random idea: if the style processing can actually take a list of processors then a scoped processor could perhaps be created. This would allow things such as style.scoped { ... } and style.less.scoped { ... }.

[mauricionr]

+1 Vue like implementation :+1:

[patrick-steele-idem]

I put a proposal on the table: Proposal: Scoped CSS using "__" prefix

Feedback greatly appreciated!

[mlrawlings]

We'll continue the discussion in #666