From 6468906ba162d8b2addc44c9766b1afbd1375dbf Mon Sep 17 00:00:00 2001 From: JJ Behrens Date: Thu, 19 Apr 2018 14:10:49 -0700 Subject: [PATCH 1/2] Added some notes on porting --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8516d92..2305bd1 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ In contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules) * [Limitations](#limitations) * [Have a question or want to suggest an improvement?](#have-a-question-or-want-to-suggest-an-improvement) * [FAQ](#faq) + * [How to port from react-css-modules?](#how-to-port-from-react-css-modules) * [How to reference multiple CSS modules?](#how-to-reference-multiple-css-modules) * [How to live reload the CSS?](#hot-to-live-reload-the-css) @@ -446,6 +447,19 @@ const _styleModuleImportMap = { ## FAQ +### How to port from react-css-modules? + +In theory, it should be extremely straightforward to port from react-css-modules: + + * Remove react-css-modules. + * Add babel-plugin-react-css-modules. + * Configure your .babelrc. + * Remove all uses of the cssModules decorator / HOC. + * Get your linter and tests to pass again. + * Test. + +Nonetheless, there are occasionally a few gotchas. See [Porting from react-css-modules to babel-plugin-react-css-modules (with Less)](http://www.jjinux.com/2018/04/javascript-porting-from-react-css.html) for details on how one team overcame the obstacles they encountered. + ### 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. @@ -456,7 +470,7 @@ const _styleModuleImportMap = { This behaviour is enabled by default in `babel-plugin-react-css-modules`. -## How to live reload the CSS? +### How to live reload the CSS? `babel-plugin-react-css-modules` utilises webpack [Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement.html) (HMR) to live reload the CSS. From 59d4fef608437923eff1304b22c8d4aea2adba93 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Thu, 19 Apr 2018 22:43:25 +0100 Subject: [PATCH 2/2] docs: update wording --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 2305bd1..018e3b4 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ In contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules) * [Limitations](#limitations) * [Have a question or want to suggest an improvement?](#have-a-question-or-want-to-suggest-an-improvement) * [FAQ](#faq) - * [How to port from react-css-modules?](#how-to-port-from-react-css-modules) + * [How to migrate from react-css-modules to babel-plugin-react-css-modules?](#how-to-migrate-from-react-css-modules-to-babel-plugin-react-css-modules) * [How to reference multiple CSS modules?](#how-to-reference-multiple-css-modules) * [How to live reload the CSS?](#hot-to-live-reload-the-css) @@ -447,18 +447,18 @@ const _styleModuleImportMap = { ## FAQ -### How to port from react-css-modules? +### How to migrate from react-css-modules to babel-plugin-react-css-modules? -In theory, it should be extremely straightforward to port from react-css-modules: +Follow the following steps: - * Remove react-css-modules. - * Add babel-plugin-react-css-modules. - * Configure your .babelrc. - * Remove all uses of the cssModules decorator / HOC. - * Get your linter and tests to pass again. - * Test. +* Remove `react-css-modules`. +* Add `babel-plugin-react-css-modules`. +* Configure `.babelrc` (see [Configuration](#configuration)). +* Remove all uses of the `cssModules` decorator and/or HoC. -Nonetheless, there are occasionally a few gotchas. See [Porting from react-css-modules to babel-plugin-react-css-modules (with Less)](http://www.jjinux.com/2018/04/javascript-porting-from-react-css.html) for details on how one team overcame the obstacles they encountered. +If you are still having problems, refer to one of the user submitted guides: + +* [Porting from react-css-modules to babel-plugin-react-css-modules (with Less)](http://www.jjinux.com/2018/04/javascript-porting-from-react-css.html) ### How to reference multiple CSS modules?