support pre-proccessors like LESS or SASS

[pho3nixf1re]

Is there currently a way to use a pre-processor with this? Like Less or SASS? It would seem that the exclusion of all extensions except for css would preclude that unless there is another way to transform the less file name to use css after it gets transformed. In webpack you would just chain the loaders to accomplish this.

[joshgillies]

You're correct. Currently we only address .css files, and while it would be possible to handle additional 'compile-to-css' languages such as Less, SASS, or Stylus -- some thought will need to be given as to how this could come together.

It might be worth looking into how parcelify handles this? https://github.com/rotundasoftware/parcelify#application-level-transforms

[joezimjs]

👍

[felixakiragreen]

👍

[romeovs]

👍 this would make the plugin worthwhile for me!

[joshwnj]

thanks everyone for showing your interest here! To move this forward I'd like to get a more tangible idea of what kind of "support" people are hoping for.

For starters could you please all reply to this thread with an answer to these questions:

1. Are you wanting to add css-modules to a legacy codebase that already uses less/sass/stylus? Or are you starting a new project and want to combine the two?
2. If you were to start a new project and css-modules was there by default, what kind of things would make you want to add less/sass/stylus to the mix?

Thanks

[pho3nixf1re]

1. Both. I have wanted to use this in a 'legacy' (built before me at least) app and also in a few new projects.
2. Because less/sass/stylus are incredible at organizing CSS frameworks. You can use variables (such as for colors and sizes) and functions to do common calculations. Plain CSS in a complex app is just a non-starter. I am mostly a fan of SASS if it matters. I use the webpack version of modular css with SASS already with great success.

[rtsao]

One idea is to use one of the following PostCSS plugin packs instead of Sass:
https://github.com/postcss/postcss#packs

There's a good chance one of them has all the features you need.

[pho3nixf1re]

I'm looking to leverage the vast amount of community frameworks and libraries built already in SASS (less/stylus etc). Rewriting various tooling and reinventing entire libraries just to use modular CSS is just not practical. I worked around the limitation by just porting the particular project that prompted this issue to use Webpack, where modular CSS works just fine with other pre-processors. It would be much better to allow users of browserify to also have access to the same functionality. 😸

[joshwnj]

@pho3nixf1re agreed. is there an example we can see of where you're using it with webpack? That will help to drive the discussion.

My personal experience so far is the same as @rtsao, in that most of the things I would normally want from less/sass/stylus is also achievable with postcss plugins. So I'm interested to learn more about other peoples' experiences and use-cases for preprocessors, and I think you've mentioned a good one in being able to easily use frameworks/libraries.

[joezimjs]

@joshwnj

1. Currently just in a new project
2. I'm using stylus because I love their lax view of syntax, so I can skip the brackets and semicolons. Also, I want variables. I can probably find or make some plugins for PostCSS for this, but I also already have Stylint set up to lint my Stylus code. If it's a ton of effort, I can definitely ditch Stylus without too much sorrow, but it'd be nice to make it simple to plug in.

[joshwnj]

thanks @joezimjs - would you be happy to create an example github repo that demonstrates the kind of usage you're after? That will really help in this discussion.

[joezimjs]

Are you looking for how I'd use Stylus or how I'd like the build CSS Module builds to work with the preprocessor?

[joshwnj]

Yeah I think it would be helpful to create a repo that shows how you would like Stylus + CSS Modules to work together. Consider it as a failing test case.

[romeovs]

I've created an example repo of how a simple project using stylus + CSS modules could look.

There are a few problems relating to how to implement the loading of the stylus files (see the README).
Feel free to commit pull requests when you feel something should be done differently.

[joshwnj]

@romeovs cool, thanks! Have you had a look at the possibility of using things like https://github.com/DamonOehlman/stylify or https://github.com/morlay/stylus-browserify ?

[joezimjs]

Will stylify work with css-modulesify? I'm not sure this plugin works exactly or how Browserify plugins work in general, so will it be able to take the CSS output of stylify and then do its thing with that? How will it know that it should do anything to a stylus file since it isn't .css?

I can't test it because currently css-modules-loader doesn't work on Windows.

[romeovs]

A bigger problem would be that css-modulesify needs the modules as separate files to be able to generate the correct "private" names. When you hand it the (single, compiled) file stylus generates, the names will be inconsistent with the names that are exported to javascript.

[joezimjs]

I'm not sure I would call that a "bigger problem" because if you can't get css-modulesify to work with the stylus files at all, that seems worse. It's certainly a large concern though. WebPack seems to really get things right with their stream of loaders, but right now I can't get it to load my CSS/Stylus files (stupid "Cannot resolve module" error). I really want to start working with CSS Modules, but nothing I try seems to work for me at all. 😞

[LoganBarnett]

Hey fellas, I managed to get this working with SASS. Perhaps it's not the best or most elegant solution but here is my gulpfile.

Usage in code looks like this:

import component1 from './.tmp/css/component1.css';
import component2 from './.tmp/css/component2.css';

...component1.someClass...

I haven't worked out the .tmp thing yet. If someone finds a fix I'd love to see it!

[joshwnj]

Interesting, thanks for sharing @LoganBarnett

[joezimjs]

@LoganBarnett I had thought of doing something like that, but using temporary directories makes me feel like we're using Grunt again... Part of the reason we use Gulp is to avoid file writes for intermediate steps.

Also, just curious, how do you use ES2015 in your Gulp files?

[LoganBarnett]

@joezimjs Agreed re: grunt vs. gulp, but when the alternative is that I can't use a css preprocessor alone, I'll take a grunt-like hack. I'm not familiar enough with gulp's innards nor browserify's to have a clear direction on fixing this. It might also mean that css-modules (or just this plugin) needs to better speak vinyl streams or something. Any insight here would be most welcome!

As for ES6 (2015?), I'm just running node with --harmony. Here's an alias I setup:

zsh:

alias gulp='node --harmony node_modules/.bin/gulp'

Reaching into node_modules was something I did to placate zsh.

bash:

alias gulp='node --harmony `which gulp`'

[faergeek]

What about letting user define which extensions should be transformed?
So we could transform sass or stylus or whatever to css, before css-modulesify comes into play.

It's similar to this in webpack:

[
  { test: /\.(sass|scss|css)$/, loader: 'style!css?modules!postcss' },
  { test: /\.sass$/, loader: 'sass?indentedSyntax' },
  { test: /\.scss$/, loader: 'scss' }
]

You just need to add option to override RegExp here
https://github.com/css-modules/css-modulesify/blob/master/index.js#L74

I think it would be cool if we could set it like this (comma-separated list of extensions):

browserify -t babelify -t envify -t <sassify|stylusify|whateverify> -p [ css-modulesify -o all.css --test 'sass,css'  ] entry.js

And also like this (RegExp):

browserify -t babelify -t envify -t <sassify|stylusify|whateverify> -p [ css-modulesify -o all.css --test '/\.(sass|css)$/'  ] entry.js

I could submit PR if it looks good.

[faergeek]

After digging a bit deeper I think it's not possible for now, because this module adds its transform earlier than others, so there's a need to make transform separate from plugin itself (just a separate file should work) to add it whenever user wants to.

[felixakiragreen]

Any updates here? Will this be a part of 1.0? Currently waiting on this feature.

[robin-barnes-triptease]

👍 on wanting this. It's kind of a big deal not to be able to use something like SASS. It works with webpack and css modules.

[awitherow]

Any update on this?

[Manouli]

We would like to start using css modules as well but at the minute we use bootstrap as the base and less as a preprocessor so we are trying to investigate which is the best way to bring css modules in as well.

[wujohns]

I do some try for less in less-modulesify

[ashnur]

I am curious if anyone knows what would be required in order for this to happen?
I would like to use bulma as a css module with browserify.