Update dependencies (including compatibility with css-loader v4)

.circleci/config.yml

@@ -0,0 +1,48 @@
+defaults: &defaults
+  docker:
+    - image: circleci/node:lts
+
+version: 2
+jobs:
+  test:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: node-modules-{{ checksum "package-lock.json" }}
+      - run: npm install
+      - save_cache:
+          key: node-modules-{{ checksum "package-lock.json" }}
+          paths:
+            - node_modules
+      - run: npm run build
+      - run: npm test
+      - persist_to_workspace:
+          root: .
+          paths:
+            - dist
+  release:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
+      - run: npm publish --access public
+
+workflows:
+  version: 2
+  build:
+    jobs:
+      - test:
+          filters:
+            tags:
+              only: /.*/
+      - release:
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /v[0-9]+(\.[0-9]+)*/
+          requires:
+            - test

.eslintrc

@@ -3,5 +3,8 @@
     "canonical",
     "canonical/flowtype"
   ],
-  "root": true
+  "root": true,
+  "rules": {
+    "import/max-dependencies": 0
+  }
 }

.gitignore

@@ -2,14 +2,4 @@ coverage
 dist
 node_modules
 *.log
-.*
-!.babelrc
-!.editorconfig
-!.eslintrc
-!.eslintignore
-!.flowconfig
-!.gitignore
-!.npmignore
-!.README
-!.travis.yml
-/package-lock.json
+/dr.pogodin-babel-plugin-react-css-modules-*.tgz

.npmignore

@@ -1,5 +1,6 @@
-src
-test
-coverage
 .*
-*.log
+/benchmark
+/demo
+/dr.pogodin-babel-plugin-react-css-modules-*.tgz
+/src
+/test

.nvmrc

@@ -0,0 +1 @@
+14.16.1

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "javascript.validate.enable": false
+}

AUTHORS

@@ -0,0 +1,2 @@
+Gajus Kuizinas <gajus@gajus.com> (http://gajus.com)
+Dr. Sergey Pogodin <doc@pogodin.studio> (https://dr.pogodin.studio)

ISSUE_TEMPLATE.md

@@ -1,5 +1,5 @@
 <!--
 Have a technical question? Raise a question on http://stackoverflow.com/ using "babel-plugin-react-css-modules" tag.
 
-Use https://github.com/gajus/babel-plugin-react-css-modules/issues to report issues and suggest new features.
+Use https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues to report issues and suggest new features.
 -->

LICENSE

@@ -1,3 +1,4 @@
+Copyright (c) 2020, Dr. Sergey Pogodin (https://dr.pogodin.studio)
 Copyright (c) 2016, Gajus Kuizinas (http://gajus.com/)
 All rights reserved.
 

README.md

@@ -1,17 +1,23 @@
-# babel-plugin-react-css-modules
+# Babel Plugin: React CSS Modules
+
+![Master Build Status](https://img.shields.io/circleci/project/github/birdofpreyru/babel-plugin-react-css-modules/master.svg?label=master)
+![Dev Build Status](https://img.shields.io/circleci/project/github/birdofpreyru/babel-plugin-react-css-modules/devel.svg?label=devel)
+![Latest NPM Release](https://img.shields.io/npm/v/@dr.pogodin/babel-plugin-react-css-modules.svg)
+![NPM Downloads](https://img.shields.io/npm/dm/@dr.pogodin/babel-plugin-react-css-modules.svg)
+
+**This is an up-to-date version of [`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules):**
+- It generates class names matching `css-loader@4+`
+- All dependencies are upgraded to the latest versions.
+
+**To migrate from the original `babel-plugin-react-css-modules` just prefix its name in your Babel config by `@dr.pogodin/` scope, i.e.:**
+- `@dr.pogodin/babel-plugin-react-css-modules` or `@dr.pogodin/react-css-moudles` instead of `babel-plugin-react-css-modules` or `react-css-modules`.
 
-[![GitSpo Mentions](https://gitspo.com/badges/mentions/gajus/babel-plugin-react-css-modules?style=flat-square)](https://gitspo.com/mentions/gajus/babel-plugin-react-css-modules)
-[![Travis build status](http://img.shields.io/travis/gajus/babel-plugin-react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/babel-plugin-react-css-modules)
-[![NPM version](http://img.shields.io/npm/v/babel-plugin-react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-react-css-modules)
-[![Canonical Code Style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)
-[![Gitter](https://img.shields.io/gitter/room/babel-plugin-react-css-modules/Lobby.svg?style=flat-square)](https://gitter.im/babel-plugin-react-css-modules/Lobby)
-[![Twitter Follow](https://img.shields.io/twitter/follow/kuizinas.svg?style=social&label=Follow)](https://twitter.com/kuizinas)
 
 <img src='./.README/babel-plugin-react-css-modules.png' height='150' />
 
 Transforms `styleName` to `className` using compile time [CSS module](#css-modules) resolution.
 
-In contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules), `babel-plugin-react-css-modules` has a lot smaller performance overhead (0-10% vs +50%; see [Performance](#performance)) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).
+In contrast to [`react-css-modules`](https://github.com/birdofpreyru/react-css-modules), `babel-plugin-react-css-modules` has a lot smaller performance overhead (0-10% vs +50%; see [Performance](#performance)) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).
 
 * [CSS Modules](#css-modules)
 * [Difference from `react-css-modules`](#difference-from-react-css-modules)
@@ -119,7 +125,7 @@ Using `babel-plugin-react-css-modules`:
 
 ## Difference from `react-css-modules`
 
-[`react-css-modules`](https://github.com/gajus/react-css-modules) introduced a convention of using `styleName` attribute to reference [CSS module](https://github.com/css-modules/css-modules). `react-css-modules` is a higher-order [React](https://facebook.github.io/react/) component. It is using the `styleName` value to construct the `className` value at the run-time. This abstraction frees a developer from needing to reference the imported styles object when using CSS modules ([What's the problem?](https://github.com/gajus/react-css-modules#whats-the-problem)). However, this approach has a measurable performance penalty (see [Performance](#performance)).
+[`react-css-modules`](https://github.com/birdofpreyru/react-css-modules) introduced a convention of using `styleName` attribute to reference [CSS module](https://github.com/css-modules/css-modules). `react-css-modules` is a higher-order [React](https://facebook.github.io/react/) component. It is using the `styleName` value to construct the `className` value at the run-time. This abstraction frees a developer from needing to reference the imported styles object when using CSS modules ([What's the problem?](https://github.com/birdofpreyru/react-css-modules#whats-the-problem)). However, this approach has a measurable performance penalty (see [Performance](#performance)).
 
 `babel-plugin-react-css-modules` solves the developer experience problem without impacting the performance.
 
@@ -151,7 +157,7 @@ View the [./benchmark](./benchmark).
 Run the benchmark:
 
 ```bash
-git clone git@github.com:gajus/babel-plugin-react-css-modules.git
+git clone git@github.com:birdofpreyru/babel-plugin-react-css-modules.git
 cd ./babel-plugin-react-css-modules
 npm install
 npm run build
@@ -179,7 +185,7 @@ Configure the options for the plugin within your `.babelrc` as follows:
 ```json
 {
   "plugins": [
-    ["react-css-modules", {
+    ["@dr.pogodin/react-css-modules", {
       "option": "value"
     }]
   ]
@@ -194,15 +200,15 @@ Configure the options for the plugin within your `.babelrc` as follows:
 |`context`|`string`|Must match webpack [`context`](https://webpack.js.org/configuration/entry-context/#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`|
 |`exclude`|`string`|A RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules `exclude: 'node_modules'`|
 |`filetypes`|`?FiletypesConfigurationType`|Configure [postcss syntax loaders](https://github.com/postcss/postcss#syntaxes) like sugarss, LESS and SCSS and extra plugins for them. ||
-|`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names). If you use this option, make sure it matches the value of `localIdentName` in webpack config. See this [issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/108#issuecomment-334351241) |`[path]___[name]__[local]___[hash:base64:5]`|
+|`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names). If you use this option, make sure it matches the value of `localIdentName` in webpack config. See this [issue](https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues/108#issuecomment-334351241) |`[path]___[name]__[local]___[hash:base64:5]`|
 |`removeImport`|`boolean`|Remove the matching style import. This option is used to enable server-side rendering.|`false`|
 |`webpackHotModuleReloading`|`boolean`|Enables hot reloading of CSS in webpack|`false`|
-|`handleMissingStyleName`|`"throw"`, `"warn"`, `"ignore"`|Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined).  Setting this option to `"ignore"` is equivalent to setting `errorWhenNotFound: false` in [react-css-modules](https://github.com/gajus/react-css-modules#errorwhennotfound). |`"throw"`|
+|`handleMissingStyleName`|`"throw"`, `"warn"`, `"ignore"`|Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined).  Setting this option to `"ignore"` is equivalent to setting `errorWhenNotFound: false` in [react-css-modules](https://github.com/birdofpreyru/react-css-modules#errorwhennotfound). |`"throw"`|
 |`attributeNames`|`?AttributeNameMapType`|Refer to [Custom Attribute Mapping](#custom-attribute-mapping)|`{"styleName": "className"}`|
 |`skip`|`boolean`|Whether to apply plugin if no matching `attributeNames` found in the file|`false`|
 |`autoResolveMultipleImports`|`boolean`|Allow multiple anonymous imports if `styleName` is only in one of them.|`false`|
 
-Missing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=New%20configuration:).
+Missing a configuration? [Raise an issue](https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues/new?title=New%20configuration:).
 
 > Note:
 > The default configuration should work out of the box with the [css-loader](https://github.com/webpack/css-loader).
@@ -291,7 +297,7 @@ The default `styleName` -> `className` transformation **will not** be affected b
 When `babel-plugin-react-css-modules` cannot resolve CSS module at a compile time, it imports a helper function (read [Runtime `styleName` resolution](#runtime-stylename-resolution)). Therefore, you must install `babel-plugin-react-css-modules` as a direct dependency of the project.
 
 ```bash
-npm install babel-plugin-react-css-modules --save
+npm install @dr.pogodin/babel-plugin-react-css-modules --save
 ```
 
 
@@ -312,7 +318,7 @@ Remember, also, that the bundler caches things like plugins and presets. If you
 ### Demo
 
 ```bash
-git clone git@github.com:gajus/babel-plugin-react-css-modules.git
+git clone git@github.com:birdofpreyru/babel-plugin-react-css-modules.git
 cd ./babel-plugin-react-css-modules/demo
 npm install
 npm start
@@ -387,7 +393,7 @@ import './bar.css';
 When a file imports multiple stylesheets, you must use a [named reference](#named-reference).
 
 > Have suggestions for an alternative behaviour?
-> [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=Suggestion%20for%20alternative%20handling%20of%20multiple%20stylesheet%20imports) with your suggestion.
+> [Raise an issue](https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues/new?title=Suggestion%20for%20alternative%20handling%20of%20multiple%20stylesheet%20imports) with your suggestion.
 
 Input:
 
@@ -412,7 +418,7 @@ import bar from './bar1.css';
 
 ### Runtime `styleName` resolution
 
-When the value of `styleName` cannot be determined at the compile time, `babel-plugin-react-css-modules` inlines all possible styles into the file. It then uses [`getClassName`](https://github.com/gajus/babel-plugin-react-css-modules/blob/master/src/getClassName.js) helper function to resolve the `styleName` value at the runtime.
+When the value of `styleName` cannot be determined at the compile time, `babel-plugin-react-css-modules` inlines all possible styles into the file. It then uses [`getClassName`](https://github.com/birdofpreyru/babel-plugin-react-css-modules/blob/master/src/getClassName.js) helper function to resolve the `styleName` value at the runtime.
 
 Input:
 
@@ -442,12 +448,12 @@ const _styleModuleImportMap = {
 
 ## Limitations
 
-* [Establish a convention for extending the styles object at the runtime](https://github.com/gajus/babel-plugin-react-css-modules/issues/1)
+* [Establish a convention for extending the styles object at the runtime](https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues/1)
 
 ## Have a question or want to suggest an improvement?
 
 * Have a technical questions? [Ask on Stack Overflow.](http://stackoverflow.com/questions/ask?tags=babel-plugin-react-css-modules)
-* Have a feature suggestion or want to report an issue? [Raise an issues.](https://github.com/gajus/babel-plugin-react-css-modules/issues)
+* Have a feature suggestion or want to report an issue? [Raise an issues.](https://github.com/birdofpreyru/babel-plugin-react-css-modules/issues)
 * Want to say hello to other `babel-plugin-react-css-modules` users? [Chat on Gitter.](https://gitter.im/babel-plugin-react-css-modules)
 
 ## FAQ
@@ -467,7 +473,7 @@ If you are still having problems, refer to one of the user submitted guides:
 
 ### How to reference multiple CSS modules?
 
-`react-css-modules` had an option [`allowMultiple`](https://github.com/gajus/react-css-modules#allowmultiple). `allowMultiple` allows multiple CSS module names in a `styleName` declaration, e.g.
+`react-css-modules` had an option [`allowMultiple`](https://github.com/birdofpreyru/react-css-modules#allowmultiple). `allowMultiple` allows multiple CSS module names in a `styleName` declaration, e.g.
 
 ```js
 <div styleName='foo bar' />