[elm-discuss] Seeking feedback: CSS Modules in Elm

[Kevin Yank]

Hello, fellow Elmos!

We’ve recently open sourced a solution for importing CSS Modules[1] into Elm views, and we’d love to hear from anyone who finds this useful, particularly if you have any feedback.

https://github.com/cultureamp/elm-css-modules-loader

Thanks in advance!


[1]: As implemented by Webpack’s css-loader. See https://github.com/css-modules/css-modules for details.

--
Kevin Yank
@sentience
http://kevinyank.com/

GPG key available at https://pgp.mit.edu/

[Marek Fajkus]

Interesting project!

We had this problem too but have decided we don't want to lock us to
webpack so much (even though we're currently using it). If you're
interested you can have a look at
http://package.elm-lang.org/packages/GlobalWebIndex/class-namespaces/latest.
Simply we're just generating class selectors using this lib in elm and
corresponding selectors using scss to generate everything on style's side.

Anyway I'm looking forward to play with your plugin as well if I'll find
time do so 🙌

[Kevin Yank]

Neat project, thanks for sharing Marek!

CSS Modules, of course, have additional features such as the ability to
include unique hashes in class names and IDs (so that you can have two CSS
modules with the same name, both containing identically-named classes, and
have them still not conflict with each other), as well as the ability to
compose classes within and between CSS modules. I do appreciate the
stack-independence that your solution provides, however!

Post by Marek Fajkus
Interesting project!
We had this problem too but have decided we don't want to lock us to
webpack so much (even though we're currently using it). If you're
interested you can have a look at
http://package.elm-lang.org/packages/GlobalWebIndex/class-namespaces/latest.
Simply we're just generating class selectors using this lib in elm and
corresponding selectors using scss to generate everything on style's side.
Anyway I'm looking forward to play with your plugin as well if I'll find
time do so 🙌

[Eirik Sletteberg]

It would be great to be able to distinguish between local and global CSS
classes, with the :local and :global syntax from CSS modules. That's
possible with Webpack today; any CSS class marked :local will be hashed.
(Using style-loader + css-loader + postcss-loader)

Post by Kevin Yank
Neat project, thanks for sharing Marek!
CSS Modules, of course, have additional features such as the ability to
include unique hashes in class names and IDs (so that you can have two CSS
modules with the same name, both containing identically-named classes, and
have them still not conflict with each other), as well as the ability to
compose classes within and between CSS modules. I do appreciate the
stack-independence that your solution provides, however!

Post by Marek Fajkus
Interesting project!
We had this problem too but have decided we don't want to lock us to
webpack so much (even though we're currently using it). If you're
interested you can have a look at
http://package.elm-lang.org/packages/GlobalWebIndex/class-namespaces/latest.
Simply we're just generating class selectors using this lib in elm and
corresponding selectors using scss to generate everything on style's side.
Anyway I'm looking forward to play with your plugin as well if I'll find
time do so 🙌

[Kevin Yank]

Hi Eirkik,

It would be great to be able to distinguish between local and global CSS classes, with the :local and :global syntax from CSS modules. That's possible with Webpack today; any CSS class marked :local will be hashed. (Using style-loader + css-loader + postcss-loader)

I’m not sure what you’re suggesting as a change. As you say, those features are part of CSS modules, and so you can use them with elm-css-modules-loader already.

--
Kevin Yank
@sentience
http://kevinyank.com/

GPG key available at https://pgp.mit.edu/