├── .gitignore ├── src ├── components │ ├── FooBar │ │ ├── FooBar.css │ │ └── FooBar.js │ ├── HelloWorld │ │ ├── HelloWorld.css │ │ └── HelloWorld.js │ └── App.js ├── index.js └── template.ejs ├── .editorconfig ├── README.md ├── webpack.config.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /src/components/FooBar/FooBar.css: -------------------------------------------------------------------------------- 1 | .root { 2 | border: 1px solid blue; 3 | padding: 0 14px; 4 | } 5 | 6 | .text { 7 | color: blue; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/HelloWorld/HelloWorld.css: -------------------------------------------------------------------------------- 1 | .root { 2 | border: 1px solid red; 3 | padding: 0 14px; 4 | } 5 | 6 | .text { 7 | color: red; 8 | } 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import App from './components/App'; 4 | 5 | if (typeof document !== 'undefined') { 6 | React.render(, document.getElementById('outlet')); 7 | } 8 | 9 | export default App; 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/components/FooBar/FooBar.js: -------------------------------------------------------------------------------- 1 | import styles from './FooBar.css'; 2 | 3 | import React from 'react'; 4 | 5 | export default class Demo extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

10 |

Another Local Scope!

11 |

12 | ); 13 | } 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/HelloWorld/HelloWorld.js: -------------------------------------------------------------------------------- 1 | import styles from './HelloWorld.css'; 2 | 3 | import React from 'react'; 4 | 5 | export default class Demo extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

10 |

Local Scope!

11 |

12 | ); 13 | } 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /src/template.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | PostCSS Local Scope Example 4 | 5 | 6 | 7 |

8 | <%- html %> 9 |

10 | <% for (var chunk in assets) { -%> 11 | 12 | <% } -%> 13 | 14 | 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > **This approach is now deprecated. Instead, have a look at my [CSS Modules Example].** 2 | 3 | # PostCSS Local Scope Example 4 | 5 | A small working example of [postcss-local-scope]. 6 | 7 | This project is most notably using the following tools: 8 | 9 | - [Webpack] 10 | - [css-loader] 11 | - [PostCSS] and [postcss-loader] 12 | - [postcss-local-scope] 13 | 14 | ## Run the example 15 | 16 | ```bash 17 | $ npm install 18 | $ npm start & open http://localhost:8080 19 | ``` 20 | 21 | ## License 22 | 23 | [MIT] 24 | 25 | [Webpack]: http://webpack.github.io 26 | [css-loader]: https://github.com/webpack/css-loader 27 | [PostCSS]: https://github.com/postcss/postcss 28 | [postcss-loader]: https://github.com/postcss/postcss-loader 29 | [postcss-local-scope]: https://github.com/markdalgleish/postcss-local-scope 30 | [CSS Modules Example]: https://github.com/markdalgleish/css-modules-example 31 | [MIT]: http://markdalgleish.mit-license.org 32 | -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import HelloWorld from './HelloWorld/HelloWorld'; 4 | import FooBar from './FooBar/FooBar'; 5 | 6 | export default class App extends React.Component { 7 | 8 | render() { 9 | return ( 10 |

11 |

PostCSS Local Scope Example

12 | 13 |

On this page we have two components: HelloWorld and FooBar.

14 |

Both of them use classes called '.root' and '.text'.

15 |

Typically, such generic classes would cause a naming collision since they all exist in the same global scope.

16 |

However, each class has been replaced with a local identifier scoped to the component with css-loader and postcss-local-scope.

17 | 18 | 19 |
20 | 21 | 22 |

23 | ); 24 | } 25 | 26 | }; 27 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | var ReactToHtmlPlugin = require('react-to-html-webpack-plugin'); 4 | 5 | var path = require('path'); 6 | var ejs = require('ejs'); 7 | var fs = require('fs'); 8 | 9 | module.exports = { 10 | entry: './src/index.js', 11 | 12 | output: { 13 | filename: 'index.js', 14 | path: path.resolve('./dist'), 15 | libraryTarget: 'umd' 16 | }, 17 | 18 | module: { 19 | loaders: [ 20 | { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 21 | { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') } 22 | ] 23 | }, 24 | 25 | // Provide the Local Scope plugin to postcss-loader: 26 | postcss: [ require('postcss-local-scope') ], 27 | 28 | plugins: [ 29 | new ExtractTextPlugin('style.css', { allChunks: true }), 30 | new ReactToHtmlPlugin('index.html', 'index.js', { 31 | template: ejs.compile(fs.readFileSync(__dirname + '/src/template.ejs', 'utf-8')) 32 | }) 33 | ] 34 | }; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-local-scope-example", 3 | "version": "1.0.0", 4 | "description": "Example usage of postcss-local-scope", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "webpack", 8 | "start": "webpack-dev-server" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/markdalgleish/postcss-local-scope-example" 13 | }, 14 | "author": "Mark Dalgleish", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/markdalgleish/postcss-local-scope-example/issues" 18 | }, 19 | "homepage": "https://github.com/markdalgleish/postcss-local-scope-example", 20 | "devDependencies": { 21 | "babel-core": "^5.2.17", 22 | "babel-loader": "^5.0.0", 23 | "css-loader": "^0.13.1", 24 | "ejs": "^2.3.1", 25 | "extract-text-webpack-plugin": "^0.8.0", 26 | "node-libs-browser": "^0.5.0", 27 | "postcss-loader": "^0.4.3", 28 | "postcss-local-scope": "0.0.3", 29 | "react": "^0.13.3", 30 | "react-to-html-webpack-plugin": "^2.1.0", 31 | "style-loader": "^0.12.2", 32 | "webpack": "^1.9.5", 33 | "webpack-dev-server": "^1.8.2" 34 | } 35 | } 36 | --------------------------------------------------------------------------------