what's the recommended way to disable this within babelrc when compiling via webpack? about babel-plugin-css-modules-transform HOT 17 OPEN

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"]
    },
  }
}

from babel-plugin-css-modules-transform.

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?

from babel-plugin-css-modules-transform.

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

from babel-plugin-css-modules-transform.

@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?

from babel-plugin-css-modules-transform.

...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.

from babel-plugin-css-modules-transform.

@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.

from babel-plugin-css-modules-transform.

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

from babel-plugin-css-modules-transform.

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.

from babel-plugin-css-modules-transform.

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.

from babel-plugin-css-modules-transform.

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} />

from babel-plugin-css-modules-transform.

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.

from babel-plugin-css-modules-transform.

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

from babel-plugin-css-modules-transform.

...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.

from babel-plugin-css-modules-transform.

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.

from babel-plugin-css-modules-transform.

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.

from babel-plugin-css-modules-transform.

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...

from babel-plugin-css-modules-transform.

@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.

from babel-plugin-css-modules-transform.