Skip to content

Commit b78a508

Browse files
gajusgajus
committed
feat: add a demo
1 parent 9afed68 commit b78a508

10 files changed

+186
-0
lines changed

‎README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ In contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules)
2121
* [Named reference](#named-reference)
2222
* [Configuration](#configuration)
2323
* [Installation](#installation)
24+
* [Demo](#demo)
2425
* [Example transpilations](#example-transpilations)
2526
* [Anonymous `styleName` resolution](#anonymous-stylename-resolution)
2627
* [Named `styleName` resolution](#named-stylename-resolution)
@@ -183,6 +184,19 @@ When `babel-plugin-react-css-modules` cannot resolve CSS module at a compile tim
183184
npm install babel-plugin-react-css-modules --save
184185
```
185186

187+
### Demo
188+
189+
```bash
190+
git clone [email protected]:gajus/babel-plugin-react-css-modules.git
191+
cd ./babel-plugin-react-css-modules/demo
192+
npm install
193+
webpack-dev-server
194+
```
195+
196+
```bash
197+
open http://localhost:8080/
198+
```
199+
186200
## Conventions
187201

188202
### Anonymous reference

‎demo/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# `babel-plugin-react-css-modules` usage demo
2+
3+
```bash
4+
git clone [email protected]:gajus/babel-plugin-react-css-modules.git
5+
cd ./babel-plugin-react-css-modules/demo
6+
npm install
7+
webpack-dev-server
8+
```
9+
10+
```bash
11+
open http://localhost:8080/
12+
```
13+
14+
Refer to [`./src/components`](./src/components).

‎demo/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<link rel='icon' href='data:;base64,iVBORw0KGgo='>
6+
</head>
7+
<body>
8+
<div id='main'></div>
9+
<script src='main.js'></script>
10+
</body>
11+
</html>

‎demo/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"private": true,
3+
"dependencies": {
4+
"babel-plugin-react-css-modules": "^1.2.0",
5+
"react": "^15.4.1",
6+
"react-dom": "^15.4.1",
7+
"webpack": "^2.2.0-rc.3"
8+
},
9+
"devDependencies": {
10+
"babel-loader": "^6.2.10",
11+
"babel-plugin-transform-react-jsx": "^6.8.0",
12+
"css-loader": "^0.26.1",
13+
"style-loader": "^0.13.1",
14+
"webpack-dev-server": "^1.16.2"
15+
}
16+
}

‎demo/src/components/AnonymouseStyleResolution.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @file Demonstrates anonymous "styleName" resolution.
3+
* @see https://github.com/gajus/babel-plugin-react-css-modules#anonymous-stylename-resolution
4+
*/
5+
6+
import React from 'react';
7+
import './table.css';
8+
9+
export default () => {
10+
return <div styleName='table'>
11+
<div styleName='row'>
12+
<div styleName='cell'>A0</div>
13+
<div styleName='cell'>B0</div>
14+
<div styleName='cell'>C0</div>
15+
</div>
16+
</div>;
17+
};

‎demo/src/components/NamedStyleResolution.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @file Demonstrates named "styleName" resolution.
3+
* @see https://github.com/gajus/babel-plugin-react-css-modules#named-stylename-resolution
4+
*/
5+
6+
import React from 'react';
7+
import table from './table.css';
8+
9+
export default () => {
10+
return <div styleName='table.table'>
11+
<div styleName='table.row'>
12+
<div styleName='table.cell'>A1</div>
13+
<div styleName='table.cell'>B1</div>
14+
<div styleName='table.cell'>C1</div>
15+
</div>
16+
</div>;
17+
};

‎demo/src/components/RuntimeStyleResolution.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @file Demonstrates runtime "styleName" resolution.
3+
* @see https://github.com/gajus/babel-plugin-react-css-modules#runtime-stylename-resolution
4+
*/
5+
6+
import React from 'react';
7+
import './table.css';
8+
9+
export default () => {
10+
return <div styleName='table'>
11+
<div styleName='row'>
12+
<div styleName={'cell' + (Math.random() > 0.5 ? ' yellow' : '')}>A2</div>
13+
<div styleName={'cell' + (Math.random() > 0.5 ? ' yellow' : '')}>B2</div>
14+
<div styleName={'cell' + (Math.random() > 0.5 ? ' yellow' : '')}>C2</div>
15+
</div>
16+
</div>;
17+
};

‎demo/src/components/table.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.table {
2+
display: table;
3+
}
4+
5+
.row {
6+
display: table-row;
7+
}
8+
9+
.cell {
10+
display: table-cell;
11+
padding: 5px;
12+
}
13+
14+
.cell:nth-child(1) {
15+
background: #f00;
16+
}
17+
18+
.cell:nth-child(2) {
19+
background: #0f0;
20+
}
21+
22+
.cell:nth-child(3) {
23+
background: #00f;
24+
}
25+
26+
.yellow {
27+
background: #ff0!important;
28+
}

‎demo/src/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDom from 'react-dom';
3+
import AnonymouseStyleResolution from './components/AnonymouseStyleResolution';
4+
import NamedStyleResolution from './components/NamedStyleResolution';
5+
import RuntimeStyleResolution from './components/RuntimeStyleResolution';
6+
7+
ReactDom.render(<div>
8+
<AnonymouseStyleResolution />
9+
<NamedStyleResolution />
10+
<RuntimeStyleResolution />
11+
</div>, document.getElementById('main'));

‎demo/webpack.config.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* eslint-disable filenames/match-regex, import/no-commonjs */
2+
3+
const path = require('path');
4+
const context = path.resolve(__dirname, 'src');
5+
6+
module.exports = {
7+
context,
8+
entry: './index.js',
9+
module: {
10+
loaders: [
11+
{
12+
include: path.resolve(__dirname, './src'),
13+
loaders: [
14+
'style-loader',
15+
'css-loader?importLoader=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
16+
],
17+
test: /\.css$/
18+
},
19+
{
20+
include: path.resolve(__dirname, './src'),
21+
loader: 'babel-loader',
22+
query: {
23+
plugins: [
24+
'transform-react-jsx',
25+
[
26+
'react-css-modules',
27+
{
28+
context
29+
}
30+
]
31+
]
32+
},
33+
test: /\.js$/
34+
}
35+
]
36+
},
37+
output: {
38+
filename: '[name].js'
39+
},
40+
stats: 'minimal'
41+
};

0 commit comments

Comments
 (0)