what's the recommended way to disable this within babelrc when compiling via webpack?

[faceyspacey]

Currently, I'm duplicating my babelrc in my webpack config with babelrc: false like this:

test: /\.js$/,
        exclude: /node_modules|extract-text-webpack-plugin/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: ['es2015', 'react', 'stage-2'],
            plugins: [
              require('babel-plugin-dynamic-import-webpack').default,
              require('react-hot-loader/babel'),
            ],
          },
        },

But ultimately that's really cumbersome, especially when what I'm doing is recommending the use of babel-plugin-css-modules-transform for use in conjunction with my package. It means a lot of extra directions to provide developers, when otherwise things are very simple.

I've tried things like using the ignore option using a function to no avail. It would be nice if it could be disabled with the present of a particular environment variable, such as:

process.env.IS_WEBPACK === true

via an option like:
disableOnEnv: "IS_WEBPACK".

Perhaps there is already something like this? I think a lot of people use this webpack--so an idiomatic strategy documented for that would be very useful.

[michalkvasnicak]

Are you trying to disable whole babel-plugin-css-modules-transform when you are using webpack?

In that case you can provide ENV variable and then in babelrc describe plugins for each environment.

Or you can use .babelrc.js I think and you can write normal if,else conditional statements here with process.env..... So for example you can defined IS_WEBPACK=1 just before you bootstrap webpack compilation and in your .babelrc.js you can check for this env variable and exclude a plugin from plugins.

Did this help?

[michalkvasnicak]

Ok I don't think there is such thing as .babelrc.js. So I think that environments in .babelrc could help :)

[faceyspacey]

@michalkvasnicak unfortunately the environment variables are already used by development and production and are only taken from BABEL_ENV (or NODE_ENV if not provided):

https://babeljs.io/docs/usage/babelrc/

Most apps use development/production, so there is no opportunity there. ..Maybe there is another flag I can detect in the function I can provide to the ignore option. ...Also, for some reason the ignore function isn't working. I'm defining it like this

.babelrc:

{
  "presets": ["es2015", "react", "stage-2"],
  "plugins": [[
     "css-modules-transform", {
       "generateScopedName": "[name]__[local]--[hash:base64:5]",
       "ignore": "./node_modules/extract-css/chunk/ignoreCssModulesTransform.js"
     }
  ]]
}

and the function:
"./node_modules/extract-css/chunk/ignoreCssModulesTransform.js"

module.exports = function() {
	console.log('IGNORE!!', arguments)
	return true;
}

It's not being called. What am I doing wrong?

[faceyspacey]

...my bad, the function is working. i had a typo in the path. ...i think i tried this a while back and couldn't find any clues that the code was running inside webpack, but I'll try again.

[michalkvasnicak]

@faceyspacey yes and you didn't receive an Error because ignore can be string too, so if it isn't a valid path, then it is taking ignore as a string.

[faceyspacey]

it actually doesn't look like there are any relevant environment variables I can use. Also, it won't be a solution anyone using webpack can use, as many people use webpack on the server as well. You can set environment variables if you run webpack from the commandline, but if you use the node api, I don't know of a way, as the babel-loader only lets you set NODE_ENV via the forceEnv option:

https://github.com/babel/babel-loader

[michalkvasnicak]

If you use node api then you can define env variable just like process.env.IS_WEBPACK = true; as first thing in your root script for example.

By the way, if you are using webpack then just don't use this plugin at all. Webpack has its own css-loader.

[faceyspacey]

I'm actually working on a package that must work with both a webpack and a babel server, and I'm making a boilerplate example, so I'm trying to keep it as easy as possible.

That said, setting

{
    test: /\.css$/,
    use: 'css-loader?modules&localIdentName=[name]__[local]--[hash:base64:5]',
},

on the server doesn't export the proper classNames to use in React components. In the past I've used extract-text-webpack-plugin to complete the job, but I don't want to use that as that has the overhead of actually compiling CSS files in your server bundle.

[faceyspacey]

basically you need style-loader or extract-text-webpack-plugin after css-loader for the following to work:

import styles from 'Foo.css'

<div className={styles.bar} />

[michalkvasnicak]

You can achieve what you want using webpack too without using this plugin. I am using webpack for client side and server side bundles in separate and it works correctly. You can see configurations here in my create-js-app repository for client and server.

Class names are valid and css is exported only for client side compilation. On server side, the files are not exported at all.

[faceyspacey]

ah: loader: 'css-loader/locals', !! nice. i'll try that.

[faceyspacey]

...it worked like a charm for webpack!

{
        test: /\.css$/,
        use: 'css-loader/locals?modules&localIdentName=[name]__[local]--[hash:base64:5]',
      },

...now i just need to figure out how to add it to the babelrc without affecting the client code, and without having to rewrite the babelrc in the webpack config with babelrc: false which is the complexity I'm trying to avoid in the example.

[faceyspacey]

the problem with this:

If you use node api then you can define env variable just like process.env.IS_WEBPACK = true; as first thing in your root script for example.

is that the same environment variables will be used by the server code and the client code in development, i.e. when you generate the client code from the middleware running in the server code.

[michalkvasnicak]

I think that ignore option will not help in this case. You really need to somehow remove babel-plugin-css-modules-transfrom from .babelrc. Maybe you can do simple babel plugin, which will works as an wrapper for this plugin. Something like:

{
  "plugins": [
     [
       "use-plugin-if-env-set", 
       "IS_WEBPACK", 
       ["babel-plugin-css-modules-transform", configuration-for-css-modules-transform-plugin]
     ]
  ],
}

Basically it would check if process.env.IS_WEBPACK is set and if it is so then it would require specified plugin. But you have to read how is babel passing options to a plugin.

Or maybe just create your own babel plugin which will act as babel-plugin-css-modules-transform except that it will return empty visitors if your condition is met.

So basically this:

import cssModulesTransformPlugin from 'babel-plugin-css-modules-transform';

export default function myCssModulesTransform(...args) {
    if (process.env.IS_WEBPACK) {
       return {};
    }

    return cssModulesTransformPlugin(...args);
}

I think this approach could be simpler than the first.

[faceyspacey]

cool. I'll look into that. Thanks so much. I'm sure I'm taking up too much of your time. I'll let you know how things go...

[michalkvasnicak]

@faceyspacey you are welcome. I hope that I helped. Just I don't think that this option should be a part of the configuration for this plugin. There is a solution, we just need to find it.

[edwardfxiao]

I'm using the following method, which I think is nice and clean, just change the 'BABEL_ENV' environment variable, and setup rules in .babelrc. The official documentation is here http://babeljs.io/docs/usage/babelrc/#env-option

run with

BABEL_ENV=lib babel ./src/js/File --out-dir ./lib/src

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ],
  "env":
  {
    "development":
    {

    },
    "production":
    {

    },
    "lib":
    {
      "plugins": ["css-modules-transform"]
    },
  }
}