├── .gitignore ├── endpoint ├── static │ └── .gitignore └── index.html ├── .babelrc ├── src ├── table.css ├── UsingStylesProperty │ ├── custom.css │ └── index.js ├── index.js └── UsingStyleName │ └── index.js ├── README.md ├── package.json ├── server.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /endpoint/static/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /endpoint/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/table.css: -------------------------------------------------------------------------------- 1 | .table { 2 | width: 200px; 3 | } 4 | 5 | .table, 6 | .row, 7 | .cell { 8 | margin: 10px; overflow: hidden; 9 | } 10 | 11 | .table { 12 | border: 1px solid #000; 13 | } 14 | 15 | .row { 16 | border: 1px solid #f00; 17 | } 18 | 19 | .cell { 20 | border: 1px solid #00f; padding: 10px; 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React CSS Modules Examples 2 | 3 | https://github.com/gajus/react-css-modules 4 | 5 | ## Setup 6 | 7 | ```sh 8 | git clone https://github.com/gajus/react-css-modules-examples.git 9 | cd ./react-css-modules-examples 10 | npm install 11 | ``` 12 | 13 | ## Running webpack-dev-server Using React Hot Loader 14 | 15 | ```sh 16 | npm start 17 | ``` 18 | -------------------------------------------------------------------------------- /src/UsingStylesProperty/custom.css: -------------------------------------------------------------------------------- 1 | .table { 2 | composes: table from './../table.css'; 3 | } 4 | 5 | .row { 6 | composes: row from './../table.css'; 7 | } 8 | 9 | /* .cell { 10 | composes: cell from './table.css'; 11 | } */ 12 | 13 | .table { 14 | width: 400px; 15 | } 16 | 17 | .cell { 18 | float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px; 19 | } 20 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import UsingStyleName from './UsingStyleName'; 4 | import UsingStylesProperty from './UsingStylesProperty'; 5 | import UsingStylesPropertyStyles from './UsingStylesProperty/custom.css'; 6 | 7 | ReactDOM.render(
8 | 9 | 10 |
, document.querySelector('#app')); 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "start": "webpack-dev-server" 5 | }, 6 | "devDependencies": { 7 | "babel-core": "^6.4.5", 8 | "babel-loader": "^6.2.1", 9 | "babel-preset-es2015": "^6.3.13", 10 | "babel-preset-react": "^6.3.13", 11 | "babel-preset-stage-0": "^6.3.13", 12 | "css-loader": "^0.23.1", 13 | "extract-text-webpack-plugin": "^1.0.1", 14 | "style-loader": "^0.13.0", 15 | "webpack": "^2.0.6-beta", 16 | "webpack-dev-server": "^2.0.0-beta" 17 | }, 18 | "dependencies": { 19 | "react": "^0.15.0-alpha.1", 20 | "react-css-modules": "^3.7.4", 21 | "react-dom": "^0.15.0-alpha.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/UsingStyleName/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import styles from './../table.css'; 4 | 5 | let Table; 6 | 7 | Table = class extends React.Component { 8 | constructor(props) { 9 | super(props); 10 | 11 | this.state = { 12 | count: 0 13 | }; 14 | 15 | setInterval(() => { 16 | this.setState({ 17 | count: this.state.count + 1 18 | }); 19 | }, 10); 20 | } 21 | 22 | render () { 23 | return
24 |
25 |
A0 {this.state.count}
26 |
B0
27 |
28 |
; 29 | } 30 | } 31 | 32 | export default CSSModules(Table, styles); 33 | -------------------------------------------------------------------------------- /src/UsingStylesProperty/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CSSModules from 'react-css-modules'; 3 | import styles from './../table.css'; 4 | 5 | let Table; 6 | 7 | Table = class extends React.Component { 8 | constructor (props) { 9 | super(props); 10 | 11 | this.state = { 12 | count: 0 13 | }; 14 | 15 | setInterval(() => { 16 | this.setState({ 17 | count: this.state.count + 1 18 | }); 19 | }); 20 | } 21 | 22 | render () { 23 | return
24 |
25 |
A0 {this.state.count}
26 |
B0
27 |
28 |
; 29 | } 30 | } 31 | 32 | export default CSSModules(Table, styles); 33 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader 2 | var browserSync, 3 | webpack, 4 | webpackDevMiddleware, 5 | webpackHotMiddleware, 6 | webpackConfig, 7 | bundler; 8 | 9 | browserSync = require('browser-sync'); 10 | webpack = require('webpack'); 11 | webpackDevMiddleware = require('webpack-dev-middleware'); 12 | webpackHotMiddleware = require('webpack-hot-middleware'); 13 | webpackConfig = require('./webpack.config.browsersync'); 14 | bundler = webpack(webpackConfig); 15 | 16 | browserSync({ 17 | ui: false, 18 | ghostMode: false, 19 | online: false, 20 | open: false, 21 | notify: false, 22 | host: webpackConfig.devServer.host, 23 | port: webpackConfig.devServer.port, 24 | xip: false, 25 | tunnel: true, 26 | server: { 27 | baseDir: webpackConfig.devServer.contentBase, 28 | 29 | middleware: [ 30 | webpackDevMiddleware(bundler, { 31 | publicPath: webpackConfig.output.publicPath, 32 | noInfo: true, 33 | quiet: false, 34 | stats: { 35 | colors: true 36 | } 37 | }), 38 | webpackHotMiddleware(bundler) 39 | ] 40 | }, 41 | files: [ 42 | './endpoint/static/*.css' 43 | ] 44 | }); 45 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack, 2 | path, 3 | WriteFilePlugin, 4 | devServer; 5 | 6 | webpack = require('webpack'); 7 | path = require('path'); 8 | ExtractTextPlugin = require('extract-text-webpack-plugin'); 9 | 10 | devServer = { 11 | contentBase: path.resolve(__dirname, './endpoint'), 12 | colors: true, 13 | quiet: false, 14 | noInfo: false, 15 | publicPath: '/static/', 16 | historyApiFallback: false, 17 | host: '127.0.0.1', 18 | lazy: true, 19 | port: 8000, 20 | hot: false 21 | }; 22 | 23 | module.exports = { 24 | devtool: 'eval-source-map', 25 | debug: true, 26 | devServer: devServer, 27 | context: path.resolve(__dirname, './src'), 28 | entry: { 29 | app: [ 30 | 'webpack-dev-server/client?http://' + devServer.host + ':' + devServer.port, 31 | './' 32 | ] 33 | }, 34 | output: { 35 | path: path.resolve(__dirname, './endpoint/static'), 36 | filename: '[name].js', 37 | publicPath: devServer.publicPath 38 | }, 39 | plugins: [ 40 | new ExtractTextPlugin('app.css', { 41 | allChunks: true 42 | }), 43 | new webpack.NoErrorsPlugin() 44 | ], 45 | module: { 46 | loaders: [ 47 | { 48 | test: /\.css$/, 49 | loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') 50 | }, 51 | { 52 | test: /\.js$/, 53 | include: path.resolve(__dirname, './src'), 54 | loaders: [ 55 | 'babel' 56 | ] 57 | } 58 | ] 59 | }, 60 | resolve: { 61 | extensions: [ 62 | '', 63 | '.js' 64 | ] 65 | } 66 | }; 67 | --------------------------------------------------------------------------------