michalkvasnicak / babel-plugin-css-modules-transform

Extract css class names from required css module files, so we can render it on server.
MIT License
326 stars 54 forks source link

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

Open faceyspacey opened 7 years ago

faceyspacey commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

faceyspacey commented 7 years ago

@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 commented 7 years ago

...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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

faceyspacey commented 7 years ago

...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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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