Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 14, 2025. It is now read-only.

Commit 40f50b9

Browse files
author
vinogradov
committed
(css modules) Add babel-plugin-react-css-modules
1 parent 21af568 commit 40f50b9

File tree

7 files changed

+143
-18
lines changed

7 files changed

+143
-18
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Includes only the latest and greatest web technologies (dependencies updated at
55
# Principles
66
1. Using plain [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)/[16](https://babeljs.io/docs/plugins/preset-es2016/)/[17](https://babeljs.io/docs/plugins/preset-es2017/). Minimizing use of [experimental Stage-X](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-) javascript features. Only [stage-3](https://babeljs.io/docs/plugins/preset-stage-3/)/4 features are supported, because they're relatively stable
77
1. Using [redux-actions](https://github.com/acdlite/redux-actions) methodology for Redux
8+
1. Using [CSS Modules](https://github.com/css-modules/css-modules) methodology for CSS (with [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules) for React)
89
1. Using tests (by [jest](https://github.com/facebook/jest), [example](https://github.com/vinogradov/react-starter-kit/blob/master/src/examples/react/__tests__/hello.test.js))
910
1. Using linting (by [airbnb eslint config](https://github.com/airbnb/javascript))
1011
1. Using git [pre-push hook](https://git-scm.com/book/gr/v2/Customizing-Git-Git-Hooks) to force run tests and linting before push
@@ -34,7 +35,6 @@ Name | Library Type | Original Description | Example Config | Notes
3435
[webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) | Build/Bundler | Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap | |
3536
[babel](https://babeljs.io/) | Transpiler | ES2015/2016/2017 support | [.babelrc](https://github.com/vinogradov/react-starter-kit/blob/master/.babelrc) | Plugins: [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) (spreads are currently [at STAGE 3](https://github.com/sebmarkbage/ecmascript-rest-spread))
3637
[eslint](http://eslint.org/) | Linter | The pluggable linting utility for JavaScript and JSX | [.eslintrc.js](https://github.com/vinogradov/react-starter-kit/blob/master/.eslintrc.js)
37-
[css modules](https://github.com/css-modules/css-modules) | CSS methodology
3838
[isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) | Polyfill | Isomorphic WHATWG Fetch API, for Node & Browserify | | [whatwg-fetch](https://github.com/github/fetch) from GitHub on client, [node-fetch](https://github.com/bitinn/node-fetch) on server
3939
[yarn](https://yarnpkg.com/) | Package management | Fast, reliable, and secure dependency management
4040

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"babel-core": "6.25.0",
1717
"babel-jest": "20.0.3",
1818
"babel-loader": "7.1.1",
19+
"babel-plugin-react-css-modules": "3.1.0",
1920
"babel-plugin-transform-object-rest-spread": "6.23.0",
2021
"babel-preset-es2015": "6.24.1",
2122
"babel-preset-es2016": "6.24.1",

‎src/examples/react/__tests__/__snapshots__/hello.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ exports[`renders correctly 1`] = `
55
<div>
66
Hello
77
<span
8-
className={undefined}
8+
styleName="name"
99
>
1010
John
1111
</span>
1212
</div>
1313
<button
14-
className={undefined}
1514
onClick={[Function]}
15+
styleName="submit-button"
1616
>
1717
toggle:
1818
ON

‎src/examples/react/hello.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
padding: 0 5px;
88
}
99

10-
.submitButton {
10+
.submit-button {
11+
border: 1px solid black;
1112
margin-top: 10px;
1213
}

‎src/examples/react/hello.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
3-
import stylefrom'./hello.css';
3+
import './hello.css';
44

55
export default class Hello extends React.Component {
66
constructor(props) {
@@ -22,8 +22,8 @@ export default class Hello extends React.Component {
2222
render() {
2323
return (
2424
<div>
25-
<div>Hello <span className={style.name}>{this.props.name}</span></div>
26-
<button className={style.submitButton} onClick={this.onClickHandler}>
25+
<div>Hello <span styleName="name">{this.props.name}</span></div>
26+
<button styleName="submit-button" onClick={this.onClickHandler}>
2727
toggle: {this.state.toggle ? 'ON' : 'OFF'}
2828
</button>
2929
</div>

‎webpack.config.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,8 @@ module.exports = (env) => {
116116
})
117117
];
118118

119-
const CSS_MODULES_CONFIG = 'modules&importLoaders=1&localIdentName=[local]-[hash:base64:5]';
119+
const CSS_MODULES_CLASS_NAME_TEMPLATE = '[local]-[hash:base64:5]';
120+
const CSS_MODULES_CONFIG = `modules&importLoaders=1&localIdentName=${CSS_MODULES_CLASS_NAME_TEMPLATE}`;
120121
const plugins = getPlugins(DEFAULT_PLUGINS, IS_PRODUCTION, IS_ANALYZE);
121122

122123
return {
@@ -133,7 +134,17 @@ module.exports = (env) => {
133134
test: /\.js$/,
134135
include: SRC_ABSOLUTE_PATH, // other paths are ignored
135136
use: [{
136-
loader: 'babel-loader'
137+
loader: 'babel-loader',
138+
query: {
139+
plugins: [[
140+
// this plugin is to be able to write styles in React components like styleName='button'
141+
// instead of className={styles.button}. The first variant is more convenient for markupers.
142+
'react-css-modules', {
143+
context: SRC_ABSOLUTE_PATH,
144+
generateScopedName: CSS_MODULES_CLASS_NAME_TEMPLATE
145+
}
146+
]]
147+
}
137148
}, {
138149
// ESLint should be before any transpiling tools.
139150
// Or use preLoaders section to check source files, not modified by other loaders (like babel-loader)

‎yarn.lock‎

Lines changed: 121 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ ajv-keywords@^1.0.0:
5151
version "1.5.1"
5252
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
5353

54-
ajv-keywords@^2.0.0:
54+
ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
5555
version "2.1.0"
5656
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
5757

58-
ajv@^4.7.0, ajv@^4.9.1:
58+
ajv@^4.11.4, ajv@^4.7.0, ajv@^4.9.1:
5959
version "4.11.8"
6060
resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
6161
dependencies:
@@ -475,6 +475,23 @@ babel-plugin-jest-hoist@^20.0.3:
475475
version "20.0.3"
476476
resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-20.0.3.tgz#afedc853bd3f8dc3548ea671fbe69d03cc2c1767"
477477

478+
babel-plugin-react-css-modules@3.1.0:
479+
version "3.1.0"
480+
resolved "https://registry.yarnpkg.com/babel-plugin-react-css-modules/-/babel-plugin-react-css-modules-3.1.0.tgz#d5a024b89defe384ccd6f0832e342d0fb0764802"
481+
dependencies:
482+
ajv "^4.11.4"
483+
ajv-keywords "^2.1.0"
484+
babel-plugin-syntax-jsx "^6.18.0"
485+
babel-types "^6.19.0"
486+
generic-names "^1.0.2"
487+
postcss "^5.2.6"
488+
postcss-modules "^0.6.2"
489+
postcss-modules-extract-imports "^1.0.1"
490+
postcss-modules-local-by-default "^1.1.1"
491+
postcss-modules-parser "^1.1.0"
492+
postcss-modules-scope "^1.0.2"
493+
postcss-modules-values "^1.2.2"
494+
478495
babel-plugin-syntax-async-functions@^6.8.0:
479496
version "6.13.0"
480497
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -487,7 +504,7 @@ babel-plugin-syntax-flow@^6.18.0:
487504
version "6.18.0"
488505
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
489506

490-
babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
507+
babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
491508
version "6.18.0"
492509
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
493510

@@ -1463,6 +1480,17 @@ css-loader@0.28.4:
14631480
postcss-value-parser "^3.3.0"
14641481
source-list-map "^0.1.7"
14651482

1483+
css-modules-loader-core@^1.0.1:
1484+
version "1.1.0"
1485+
resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
1486+
dependencies:
1487+
icss-replace-symbols "1.1.0"
1488+
postcss "6.0.1"
1489+
postcss-modules-extract-imports "1.1.0"
1490+
postcss-modules-local-by-default "1.2.0"
1491+
postcss-modules-scope "1.1.0"
1492+
postcss-modules-values "1.3.0"
1493+
14661494
css-select@^1.1.0:
14671495
version "1.2.0"
14681496
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -2451,6 +2479,12 @@ generate-object-property@^1.1.0:
24512479
dependencies:
24522480
is-property "^1.0.0"
24532481

2482+
generic-names@^1.0.2:
2483+
version "1.0.2"
2484+
resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.2.tgz#e25b7feceb5b5a8f28f5f972a7ccfe57e562adcd"
2485+
dependencies:
2486+
loader-utils "^0.2.16"
2487+
24542488
get-caller-file@^1.0.1:
24552489
version "1.0.2"
24562490
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -2765,7 +2799,7 @@ iconv-lite@~0.4.13:
27652799
version "0.4.18"
27662800
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
27672801

2768-
icss-replace-symbols@^1.1.0:
2802+
icss-replace-symbols@1.1.0, icss-replace-symbols@^1.0.2, icss-replace-symbols@^1.1.0:
27692803
version "1.1.0"
27702804
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
27712805

@@ -3548,6 +3582,24 @@ lodash-es@^4.17.4, lodash-es@^4.2.0, lodash-es@^4.2.1:
35483582
version "4.17.4"
35493583
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
35503584

3585+
lodash._arrayeach@^3.0.0:
3586+
version "3.0.0"
3587+
resolved "https://registry.yarnpkg.com/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz#bab156b2a90d3f1bbd5c653403349e5e5933ef9e"
3588+
3589+
lodash._baseeach@^3.0.0:
3590+
version "3.0.4"
3591+
resolved "https://registry.yarnpkg.com/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz#cf8706572ca144e8d9d75227c990da982f932af3"
3592+
dependencies:
3593+
lodash.keys "^3.0.0"
3594+
3595+
lodash._bindcallback@^3.0.0:
3596+
version "3.0.1"
3597+
resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
3598+
3599+
lodash._getnative@^3.0.0:
3600+
version "3.9.1"
3601+
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
3602+
35513603
lodash.assign@^4.2.0:
35523604
version "4.2.0"
35533605
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -3564,6 +3616,31 @@ lodash.cond@^4.3.0:
35643616
version "4.5.2"
35653617
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
35663618

3619+
lodash.foreach@^3.0.3:
3620+
version "3.0.3"
3621+
resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-3.0.3.tgz#6fd7efb79691aecd67fdeac2761c98e701d6c39a"
3622+
dependencies:
3623+
lodash._arrayeach "^3.0.0"
3624+
lodash._baseeach "^3.0.0"
3625+
lodash._bindcallback "^3.0.0"
3626+
lodash.isarray "^3.0.0"
3627+
3628+
lodash.isarguments@^3.0.0:
3629+
version "3.1.0"
3630+
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
3631+
3632+
lodash.isarray@^3.0.0:
3633+
version "3.0.4"
3634+
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
3635+
3636+
lodash.keys@^3.0.0:
3637+
version "3.1.2"
3638+
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
3639+
dependencies:
3640+
lodash._getnative "^3.0.0"
3641+
lodash.isarguments "^3.0.0"
3642+
lodash.isarray "^3.0.0"
3643+
35673644
lodash.memoize@^4.1.2:
35683645
version "4.1.2"
35693646
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -4391,33 +4468,56 @@ postcss-minify-selectors@^2.0.4:
43914468
postcss "^5.0.14"
43924469
postcss-selector-parser "^2.0.0"
43934470

4394-
postcss-modules-extract-imports@^1.0.0:
4471+
postcss-modules-extract-imports@1.1.0:
4472+
version "1.1.0"
4473+
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
4474+
dependencies:
4475+
postcss "^6.0.1"
4476+
4477+
postcss-modules-extract-imports@^1.0.0, postcss-modules-extract-imports@^1.0.1:
43954478
version "1.2.0"
43964479
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
43974480
dependencies:
43984481
postcss "^6.0.1"
43994482

4400-
postcss-modules-local-by-default@^1.0.1:
4483+
postcss-modules-local-by-default@1.2.0, postcss-modules-local-by-default@^1.0.1, postcss-modules-local-by-default@^1.1.1:
44014484
version "1.2.0"
44024485
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
44034486
dependencies:
44044487
css-selector-tokenizer "^0.7.0"
44054488
postcss "^6.0.1"
44064489

4407-
postcss-modules-scope@^1.0.0:
4490+
postcss-modules-parser@^1.1.0:
4491+
version "1.1.1"
4492+
resolved "https://registry.yarnpkg.com/postcss-modules-parser/-/postcss-modules-parser-1.1.1.tgz#95f71ad7916f0f39207bb81c401336c8d245738c"
4493+
dependencies:
4494+
icss-replace-symbols "^1.0.2"
4495+
lodash.foreach "^3.0.3"
4496+
postcss "^5.0.10"
4497+
4498+
postcss-modules-scope@1.1.0, postcss-modules-scope@^1.0.0, postcss-modules-scope@^1.0.2:
44084499
version "1.1.0"
44094500
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
44104501
dependencies:
44114502
css-selector-tokenizer "^0.7.0"
44124503
postcss "^6.0.1"
44134504

4414-
postcss-modules-values@^1.1.0:
4505+
postcss-modules-values@1.3.0, postcss-modules-values@^1.1.0, postcss-modules-values@^1.2.2:
44154506
version "1.3.0"
44164507
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
44174508
dependencies:
44184509
icss-replace-symbols "^1.1.0"
44194510
postcss "^6.0.1"
44204511

4512+
postcss-modules@^0.6.2:
4513+
version "0.6.4"
4514+
resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-0.6.4.tgz#77a58bb77ba1b4392b270c0b59852fd75e89a8b4"
4515+
dependencies:
4516+
css-modules-loader-core "^1.0.1"
4517+
generic-names "^1.0.2"
4518+
postcss "^5.2.8"
4519+
string-hash "^1.1.1"
4520+
44214521
postcss-normalize-charset@^1.1.0:
44224522
version "1.1.1"
44234523
resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -4498,7 +4598,15 @@ postcss-zindex@^2.0.1:
44984598
postcss "^5.0.4"
44994599
uniqs "^2.0.0"
45004600

4501-
postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
4601+
postcss@6.0.1:
4602+
version "6.0.1"
4603+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
4604+
dependencies:
4605+
chalk "^1.1.3"
4606+
source-map "^0.5.6"
4607+
supports-color "^3.2.3"
4608+
4609+
postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16, postcss@^5.2.6, postcss@^5.2.8:
45024610
version "5.2.17"
45034611
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
45044612
dependencies:
@@ -5344,6 +5452,10 @@ strict-uri-encode@^1.0.0:
53445452
version "1.1.0"
53455453
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
53465454

5455+
string-hash@^1.1.1:
5456+
version "1.1.3"
5457+
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
5458+
53475459
string-length@^1.0.1:
53485460
version "1.0.1"
53495461
resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /