A tool to distribute styles via ES modules.
npm install lit-cssA tool to distribute styles via ES modules.
- Tagged template literal css to define style modules.
- Deduping of same modules by reference.
- Coercion to a string with correct content.
Style module in this context is a piece of syntactically correct CSS.
Subparts of styles like declaration blocks within rulesets are not style modules.
Good:
``js
export default css
.my-grey-text {
color: grey;
};`
Bad:
`js
export default css
color: grey;;`
- Deduping only works when all your modules are using the css literal.
Make sure you don't forget to include it.
- Due to deduping only the first occurence in the graph of modules counts.
So you should never rely on a different order by placing your dependencies in the middle or in the bottom of a new module.
In other words, dependencies of your style module must be always injected on top.
If you follow the rule of thumb for scalable CSS - the specificity of selectors grows with each new layer of styles - then you will likely never want to do the opposite.
At the moment you can use the fact that awesome styled-components have css` literal feature. This is not the same feature as in lit-css, but close enough for syntax highlighting and autocomplete. It is widely supported in many code editors, for example:
- VSCode
- WebStorm (and other JetBrains IDEs)
- read about others on the official docs