New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support pre-proccessors like LESS or SASS #14

Open
pho3nixf1re opened this Issue Jun 16, 2015 · 30 comments

Comments

Projects
None yet
@pho3nixf1re
Copy link

pho3nixf1re commented Jun 16, 2015

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

This comment has been minimized.

Copy link
Member

joshgillies commented Jun 17, 2015

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

This comment has been minimized.

Copy link

joezimjs commented Aug 5, 2015

👍

@dubert

This comment has been minimized.

Copy link

dubert commented Aug 28, 2015

👍

@romeovs

This comment has been minimized.

Copy link

romeovs commented Aug 30, 2015

👍 this would make the plugin worthwhile for me!

@joshwnj

This comment has been minimized.

Copy link
Member

joshwnj commented Aug 31, 2015

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

This comment has been minimized.

Copy link

pho3nixf1re commented Aug 31, 2015

  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

This comment has been minimized.

Copy link
Contributor

rtsao commented Aug 31, 2015

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

This comment has been minimized.

Copy link

pho3nixf1re commented Aug 31, 2015

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

This comment has been minimized.

Copy link
Member

joshwnj commented Aug 31, 2015

@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

This comment has been minimized.

Copy link

joezimjs commented Aug 31, 2015

@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

This comment has been minimized.

Copy link
Member

joshwnj commented Aug 31, 2015

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

This comment has been minimized.

Copy link

joezimjs commented Aug 31, 2015

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

This comment has been minimized.

Copy link
Member

joshwnj commented Aug 31, 2015

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

This comment has been minimized.

Copy link

romeovs commented Sep 9, 2015

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

This comment has been minimized.

Copy link
Member

joshwnj commented Sep 9, 2015

@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

This comment has been minimized.

Copy link

joezimjs commented Sep 9, 2015

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

This comment has been minimized.

Copy link

romeovs commented Sep 9, 2015

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

This comment has been minimized.

Copy link

joezimjs commented Sep 9, 2015

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

This comment has been minimized.

Copy link

LoganBarnett commented Sep 16, 2015

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

This comment has been minimized.

Copy link
Member

joshwnj commented Sep 16, 2015

Interesting, thanks for sharing @LoganBarnett

@joezimjs

This comment has been minimized.

Copy link

joezimjs commented Sep 17, 2015

@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

This comment has been minimized.

Copy link

LoganBarnett commented Sep 18, 2015

@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

This comment has been minimized.

Copy link

faergeek commented Nov 3, 2015

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

This comment has been minimized.

Copy link

faergeek commented Nov 4, 2015

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.

@dubert

This comment has been minimized.

Copy link

dubert commented Nov 30, 2015

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

@robin-barnes-triptease

This comment has been minimized.

Copy link

robin-barnes-triptease commented Dec 14, 2015

👍 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

This comment has been minimized.

Copy link

awitherow commented Jan 20, 2016

Any update on this?

@Manouli

This comment has been minimized.

Copy link

Manouli commented Jun 1, 2016

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

This comment has been minimized.

Copy link

wujohns commented Feb 6, 2017

I do some try for less in less-modulesify

@ashnur

This comment has been minimized.

Copy link

ashnur commented Apr 27, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment