lit-css

A tool to distribute styles via ES modules.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
lit-css
4200.1.34 years ago5 years agoMinified + gzip package size for lit-css in KB

Readme

lit-css
A tool to distribute styles via ES modules.

Features

  • Tagged template literal css to define style modules.
  • Deduping of same modules by reference.
  • Coercion to a string with correct content.

What Is a Style Module?

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:
export default css`
  .my-grey-text {
    color: grey;
  }
`;

Bad:
export default css`
  color: grey;
`;

Examples

Gotchas

  • 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.

Support in Code Editors

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: