Slide 1

Slide 1 text

CSS Modules Paul Heasley
 @pheasley

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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' }

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Bootstrap 1. Treat as global styles
Rule
Clear

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Thanks.