$30 off During Our Annual Pro Sale. View Details »

CSS Modules

Paul Heasley
February 21, 2018

CSS Modules

CSS Modules allows you to scope your styles to a single component by obfuscating the class name, this talk will look at using CSS Modules with React, Angular, TypeScript, Bootstrap and how to use localised class names in tests.

Paul Heasley

February 21, 2018
Tweet

More Decks by Paul Heasley

Other Decks in Programming

Transcript

  1. CSS Modules
    Paul Heasley

    @pheasley

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. 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

    View Slide

  10. 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
    });

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 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

    View Slide

  15. Bootstrap
    1. Treat as global styles


    Rule


    Clear


    View Slide

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

    Home

    View Slide

  17. Thanks.

    View Slide