Allow using css-modules with SASS, LESS and Stylus

[lewisdiamond]

I used separate properties with _MODULES appended so it doesn't break for people using .css with modules and .scss without modules.

[erfanio]

You should remove the fileRegex field from modules. Not all SASS files are modules and this cause errors. (try it with react-toolbox and there will be errors)
Enabling both SASS and SASS_MODULES at the same time causes errors.

[lewisdiamond]

@erfanio Of course, only one of them should be enabled, you can't have both.

[lewisdiamond]

@kitze Can this be reviewed and merged?

[martin-magakian]

Thanks, very useful !

[igorsantos07]

@lewisdiamond I'm using trying to use this fork right now, but I think your PR won't get merged until you document those new options in the readme file :)
Take care to explain one should only enable SASS or SASS_MODULES, not both - I would even rename it to SASS_WITH_MODULES to remove any ambiguity.

Is it actually possible to use the fork right now? It seems if we simply replace the repository version with the fork's URL the entire source is downloaded, and what we need is just a subtree...

[aligajani]

@igorsantos07 what's the difference between a Sass module and SASS?

[nodegin]

When will this be merged?

[igorsantos07]

@aligajani sounds like someone is trying to navigate an ocean without even knowing how to tie a knot? :)

SASS Modules is analogous to CSS Modules, except that your SASS is converted into CSS using the modules approach instead of the standard SASS translation - think of it like SASS + CSS Modules if it makes things easier.

[lewisdiamond]

@igorsantos07 I use yarn, link the scripts then use create-react-app. You can probably link it then swap it in an existing app, I havent tried.

[lewisdiamond]

@igorsantos07 I'm not making changes until @kitze asks for it.

[martin-magakian]

@lewisdiamond @erfanio I was able to enable SASS and SASS_MODULES at the same time.

My problem is simple:
sometimes I want to use CSS_MODULE, sometimes I don't...
(read css-modules/css-modules#65)

I came up with this quick and dirty fix:
martin-magakian@1a4f7bd

It's far from perfect but it give the idea.
Maybe we can improve using '.module.css' for css-module file and '.css' for not-css-module.
Same for '.module.sass' and '.sass'...
But this kind of file extension didn't worked (I don't know why)

[lewisdiamond]

@martin-magakian

IMO mixing both is counter productive. You end up with components that only half work outside of its initial context.

The whole point of CSS modules is to have actual components, I.e. no other dependencies. If you mix, you break that. React is very good at making components easy to use and manage so your "globals" should be limited to variables.

Also I'd definitely make it "*.not_modules.css" because that's definitely not the preferred method to write CSS in react.

[martin-magakian]

The whole point of CSS modules is to have actual components, I.e. no other dependencies

@lewisdiamond I'm completely agree with you and I always keep it this way.

My problem is when I'm using a third party component.
But I'm relatively new to React, so maybe it's due to my leak of knowledge.

Lately I integrated with a toggle component https://github.com/aaronshaf/react-toggle
To render, it need a .css style https://raw.githubusercontent.com/instructure-react/react-toggle/master/style.css

import Toggle from 'react-toggle'
import './node_modules/react-toggle/style.css' // <== style get compile. The component don't match it expected global css style

export default class PlanManager extends Component {
   render(){
        <Toggle />
   }
}

That's why I came up with this (dirty) name convention.
.css don't get compile (now my toggle's css is working)
.mcss get compile (I had to rename all my files)

But maybe you have an other way to solve this (common?) problem ? (I hope !)

[sandronm]

Nobody has an idea to resolve the problem with third party components?
How can we using for example Bootstrap with CSS modules?

[martin-magakian]

With bootstrap I import the CSS globally in my index.html

<link rel="stylesheet" href="bootstrap.css">

As you probably notice, with CSS module enable you can't import from react using

@import './boostrap.css'

as it will "modularize" the css name and it will not match your class name anymore. 2017-01-23 8:31 GMT+01:00 sandronm <[email protected]>:

…

Nobody has an idea to resolve the problem with third party components? How can we using for example Bootstrap with CSS modules? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABVrpKEpzvlmbguw_850muF59MLdyuDGks5rVFdtgaJpZM4LDXNm> .

[sandronm]

Yes, that's my point :-)

Ok so I have to import the CSS globally in my index.html ^^

[lewisdiamond]

I released my repo on npm for those of you who are interested. It's ridiculous that this merge request is still sitting here without any updates. I can't say up-to-date this will be in the future (it's probably already outdated).

https://www.npmjs.com/package/custom-react-scripts-with-modules

[martin-magakian]

Thanks lewisdiamond !

[kitze]

Already working on implementing this in another, more flexible way. Sorry for closing this.

[Robdel12]

^ any movement on that? I'd like to keep using this but I'm also pretty close to just ejecting.

[lewisdiamond]

@Robdel12
I made my own fork of react-scripts published here: https://www.npmjs.com/package/customizable-react-scripts

Basically create a config directory, create webpack.custom.{dev|prod}.js and export a function that takes a config object and returns a modified config object. You'll get the default react-scripts config as a parameter, modify it to your liking and return it.

Here's a "hacky" modification for my current needs:

module.exports = (c) => {

   c.module.loaders[0].exclude.push(/\.(scss|sass)/)
   c.module.loaders.push(
      {
         test: /(\.scss|\.sass)$/,
         loader: `style!css${cssModulesDev}!postcss!sass`
      }
   )

   c.module.loaders[1].query.presets.push('babel-preset-stage-0')
   c.module.loaders[1].query.plugins = ['babel-plugin-transform-decorators-legacy']

   return c
}

Eventually I'll add helpers to the package so you can do something like

customReactScripts.addSassModules(c)

Feel free to send pull requests to my repo.