4 ms·
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`)
by andreypopp 11y ago
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 https://github.com/andreypopp/styling
- ekosz 11y agoThis is a very cool library. Thanks for the link. Have you used this in any projects yet?
- andreypopp 11y agoWe 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.
- deleted 11y ago[deleted]
- serapath 11y agoHey, that looks great :-) I'll try it. What do you think of https://github.com/css-modules/css-modules/issues/23#issuecomment-132747421 https://github.com/css-modules/css-modules/issues/23#issueco...