search

leinelissen / laravel-mix-react-css-modules

A wrapper for babel-plugin-react-css-modules for Laravel Mix
MIT License
22 stars 9 forks source link

Not able to successfully ignore node_modules imports #15

Open pattiereaves opened 3 years ago

pattiereaves commented 3 years ago

I have a mix file that creates an entry for global styles (app.css) and also uses react css modules, like so:

mix
  .react('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .reactCssModules()

This works all well and good, however, when I import a stylesheet from an npm module into a React component, it's scoping the classNames from this stylesheet and not importing them with global classnames as I would expect.

When I do mix.dump(), I see that the babel-loader rule has the directive to ignore node modules:

               [
                  "/[project_name]/node_modules/babel-plugin-react-css-modules/dist/index.js",
                  {
                    "filetypes": {
                      ".scss": {
                        "syntax": "postcss-scss",
                        "plugins": [
                          "postcss-nested"
                        ]
                      }
                    },
                    "exclude": "node_modules",
                    "handleMissingStyleName": "warn",
                    "generateScopedName": "[name]__[local]___[hash:base64:5]"
                  }
                ]

but that is only under the "test": "/\\.jsx?$/", webpack rule, which may be why it does not ignore these css files correctly.

I tried adding a separate rule for css files to exclude node_modules, but that did not work, and it seemed to defeat the purpose of this plugin.

Putting these stylesheet imports in a .scss file and wrapping them in a :global {} scope did nothing (the classnames were still imported as scoped).

What am I doing wrong?

leinelissen commented 3 years ago

Hi Pattie! I'm incredibly sorry to not get back to you earlier. Your assumptions are right. This plugin greedily replaces all webpack rules that involve css-loader with one that enables CSS Modules. This is to be fixed with a proper check that the file does not originate from node_modules. As this change does require some release effort with a new major and all, I hope to get this fixed at the end of the week, maybe next week monday.

I trust you've found a solution in the meantime. If not, you can consider copying the package's CSS file to your application folder and putting :global{ } brackets around it yourself.

Cheers, Lei

pattiereaves commented 3 years ago

The way I ended up getting around the issue, if anyone else has this problem, is by specifying the loaders in the files, e.g.

import '!style-loader!css-loader!../../../../../node_modules/[path to file i need to import].css';
leinelissen commented 3 years ago

Good to see you've managed to make it work. It's a great solution for now. In the meanwhile, I'm considering adding a flag that will skip CSS Modules for files in node_modules. Alternatively, I see that Laravel Mix 6 has just been released, which has native support for CSS Modules now.