How to Ignore Third Party Component css files while using babel-plugin-react-css-modules

[ighosh9]

I have this situation where in one of my Component JSX file (For Eg. List.jsx) is importing the styles as follows:

import styles from "./css/list.rcss"; 
import "fixed-data-table.css"; 
import "./css/fixed-data-table.css"; 

1st import, the .rcss is our local css files where we use the react-css-modules rules
2nd import belongs to the FixedDataTable Component (Third Party)
3rd import is Global css file that uses standard css rules

This works well with react-css-modules but babel-plugin-react-css-modules throws the error because we are importing two anonymous imports.

Is there a workaround or fix for this?

[toc777]

You can use the exclude option to exclude non css-modules stylesheets.

You might also need to specify a name for each import.

import list from "./css/list.rcss"; 
import fdt from "fixed-data-table.css"; 
export function () { return <div styleName="list.someStyleName" />;}

[ighosh9]

Thanks, but I did try to exclude earlier, but exclude config expects a string as a value, and I need to pass a regEx (to remove the non css-modules stylesheets with extension .css as all my css-module stylesheets are with extension .rcss)
plugins: [ ['react-css-modules', { "generateScopedName": "[name]_[local]_[hash:base64:5]", "filetypes": {".rcss": "postcss"}, "exclude": /\.css$/ }] ]

Also, I can not specify a name for all the imports as I cannot apply the css for fixed-data-table using the name, it is imported so that the Fixed-DataTable Component can use it internally.

[toc777]

The documentation says that excludes accepts a string RegEx so you should be able to write excludes: '\.css$' (I haven't tested this).

I was suggesting supplying a name just to avoid confusing the css-modules plugin, if the CSS file is excluded from css-modules processing, it should be imported as a regular CSS file and the corresponding variable will be undefined.

[ighosh9]

excludes: '\.css$' is not doing anything. Is there something else we can do to exclude the same?

[gajus]

I cannot think of a way to do this from within the code-base.

I cannot think of a clean way to implement this at the plugin either. Adding an option to ignore a pattern is an option, sure, but it is not in any way better than –

• you could remove the import from the code base
• import CSS using the webpack bundler

This will work, assuming that the sole intent is adding the style to the bundle.

[lijialiang]

can add include to the configuration ( a RegExp that will include files ) ?

[moimikey]

+1 to adding include... i've unfortunately had to use exclude: '(?!whatever|whatever|whatever)'. i have more excludes than includes.

[CoralSilver]

I shouldn't have to use babel-plugin-react-css-modules exclude option in babel.rc if I am excluding node modules in css modules loader in webpack config and running node-modules through different css loader, right? I'm confused because I am still getting this error when I also try to anonymously import a plugin css file.

Tried naming each import

import styles from './Filters.scss';
import reactStyles from 'react-select/dist/react-select.css';

but I'm still getting the error...Cannot use anonymous style name with more than one stylesheet import.

[flekschas]

Does exclude actually do anything? I've tested the example settings with v3.1.1:

{
  "plugins": [
    ["react-css-modules", {
      "exclude": "node_modules"
    }]
  ]
}

but imports in the form of:

import whatever from `../node_modules/cheers.css`

are still CSS-Modulefied. Is this expected, am I doing something wrong, or is this a bug?

[havsar]

Same issue as @flekschas.

[ghost]

Same issue, "exclude": "node_modules" does nothing even though it's referenced in the docs.

[hpeikari]

@blairvanderhoof @flekschas
have you guys tried:
exclude: /node_modules/

no double quotes! It's a regex !

[flekschas]

@hpeikari no because the README.md says the param is of type string. Does it work for you with an regex object?

[hpeikari]

@flekschas @blairvanderhoof this is how I exluded node_modules and worked for me !

const styleLoader = sourceMaps => ({
  test: /\.(scss|css)$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        query: {
          sourceMap: sourceMaps,
          minimize: true,
          modules: true,
          importLoaders: 2,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }
      }, {
        loader: 'postcss-loader',
        query: {
          sourceMap: sourceMaps,
          plugins: (loader) => [
              require('autoprefixer')
            ]
        }
      }, {
        loader: 'sass-loader',
        query: { sourceMap: sourceMaps }
      }
    ]
  })
});

[max-mykhailenko]

Exclude rule also doesn't help when we want to use removeImport for server side rendering because in this case babel get pure css import as is. How I can improve that behavior?

[stoil]

@hpeikari I believe this won't work because when you exclude the 'node_modules' folder from the loader options, than when webpack will scream that you need a loader to import .css files.
At least this is the situation in my case.
I am trying to import some css files from the node_modules folder and if I change the webpack config to exclude node_modules i get this error:

ERROR in ../node_modules/react-select/dist/react-select.css
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type.

If not excluding the node_modules from the css loader options that the imported file from node_modules gets converted by the react-css-modules plugin :)

The exclude option in the plugin configs does not work at all.