Feature: better CSS-in-JS

[sc0ttj]

See this nice little tagged template function, only ~200 bytes: https://zserge.com/posts/css-in-js/

Usage:

import {css} from './zercss.js';

const someClass = css`
  color: red;
  font-weight: bold;
`

const MyDiv = html`<div class="${someClass}">Hello!</div>`;

In the above example, defining someClass adds a <style> tag to page (if needed) and appends the given CSS, auto-prefixed with a unique class name, and then it returns that class name.

Therefore adding someClass to the HTML attaches the scoped CSS it contains.

---

Also https://github.com/substack/insert-css

Also see https://github.com/cxs-css/cxs.

0.7kb, similar to the above, but a few more features:

• High performance
• Deduplicates repeated styles
• Dead-code elimination
• Media queries
• Pseudoclasses
• Nesting
• No CSS files
• No tagged template literals

---

Also see this nice little colour tool, would be useful for setting and animating colours:

https://github.com/robinweser/small-color

---

https://github.com/wizardpisces/tiny-sass-compiler

Can compile SASS to CSS in the browser, includes as tagged template function.. Could use it to do stuff like:

// use normal css
App.css = props => 
`  .foo { width: 100%; }
    .foo .bar { width: 50%; }
`

// or use SASS
App.css = props => sass
`.foo { 
    width: 100%;
    .bar { width: 50%; }
}
`