[andreypopp]

Also see styling[0] which is a loader for webpack which allows to generate CSS modules with JS.

Files configured to use with this loader (usually `.style.js`) are executed at build time and produce CSS modules. You can use any JS abstractions for that (functions, modules, variables, ...) and any npm package available (color manipulation, typography, ...):

  import styling from 'styling'
  import {smallText} from './typography'
  import {colors} from './theme'

  export let caption = styling({
    ...smallText,
    color: colors.text
  })

[0]: https://github.com/andreypopp/styling

[serapath]

Hey, that looks great :-) I'll try it. What do you think of https://github.com/css-modules/css-modules/issues/23#issueco...

[ekosz]

This is a very cool library. Thanks for the link. Have you used this in any projects yet?

[andreypopp]

We started to migrate away from pure CSS Modules to Styling in our apps. Code didn't hit production yet but we are close.

Writing styles in JS instead of CSS gave us a huge expressiveness boost and allowed to use existing JS tooling such as eslint. At the same time all CSS tooling still can be applied to compilation result (such as autoprefixer).

Also would be fun to write styles in TypeScript — statically typed styles sounds great.