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.