CSS Modules Paul Heasley
 @pheasley 

CSS: So Simple .bgred { background-color: red; } 

becomes .text-left { text-align: left; } .styles__text-left__1GS2g { text-align: left; } 

Stylesheet .row { background-color: pink; } .first-row { background-color: green; } webpack / css-loader JavaScript import { row: 'styles__row__1GS2g', firstRow: 'styles__text-left__3JSLq', 'first-row': 'styles__text-left__3JSLq' } 

Import styles in JavaScript import styles from './styles.css'; document.querySelector('#some-element').classList.add(styles.textLeft); 

Global styles :global(.btn) { background-color: blue; } 

Opt-in local styles :local(.my-local-style) { background-color: blue; } 

LESS / SASS :global(.global-parent) { .local-child: { color: pink; } } becomes .global-parent .styles__local-child__3JSLq { color: pink; } 

import React from 'react'; import PropTypes from 'prop-types'; import styles from './styles.module.css'; const HelloWorld = ({ name }) => ( ); HelloWorld.propTypes = { name: PropTypes.string }; export default HelloWorld; React 

Angular var angular = require('angular'); var styles = require('./styles.css'); var Controller = function() { this.styles = styles; }; angular .module('pageup.hello-world', []) .component('pupHelloWorld', { template: '', bindings: { name: '<' }, controller: Controller }); 

TypeScript import styles from './styles.css'; results in TS2307: Cannot find module ‘./styles.css'. 

TypeScript const styles = require('./styles.css'); npm install typings-for-css-modules-loader or 

Tests with CSS Modules this.element.find('.welcome') 

Tests with CSS Modules this.element.find('[data-test-target=welcome]') const styles = require(‘components/hello-world/styles.css'); describe('Hello World component', function () { it('should greet the world given no name supplied', function () { var greeting = _element.find('.' + styles.welcome) expect(greeting.text()).to.equal('Hello, world'); }); }); or 

Bootstrap 1. Treat as global styles 

Bootstrap 2. Shared CSS module const styles = require('components/hello-world/styles.css'); const globalStyles = require('styles/global.css'); Home 

Thanks.