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.

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