CSS Modules - Hackdot

Re:CSS Modules by andreypopp on Wednesday August 19, 2015 @05:10AM (#10084391)

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

[ Parent | on HN ]

Re:CSS Modules by serapath on Wednesday August 19, 2015 @03:37PM (#10087894)

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

[ Parent | on HN ]

Re:CSS Modules by ekosz on Wednesday August 19, 2015 @06:11AM (#10084552)

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

[ Parent | on HN ]

Re:CSS Modules by andreypopp on Wednesday August 19, 2015 @06:17AM (#10084571)

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.

[ Parent | on HN ]