patternplate-transform-cssmodules

    0.1.1 • Public • Published

    patternplate-transform-cssmodules

    patternplate transform to enable usage of css modules.

    ⚠️ This transform is intended to be used in conjunction with patternplate-transform-cssmodules-symbols to produce markup using the transformed css source

    See the Configuration section for details.

    Installation

    npm install --save patternplate-transform-cssmodules patternplate-transform-cssmodules-symbols

    Configuration

    // file: configuration/patternplate-server/patterns.js
    module.exports = {
      formats: {
        css: {
          name: 'Style',
          transforms: ['cssmodules']
        },
        jsx: {
          name: 'Markup',
          transforms: ['cssmodules-symbols', 'react', 'react-to-markup']
        }
      }
    };
    // file: configuration/patternplate-server/transforms.js
    module.exports = {
      'cssmodules-symbols': {
        inFormat: 'jsx',
        outFormat: 'jsx'
      },
      cssmodules: {
        inFormat: 'css',
        outFormat: 'css'
      }
    };

    Usage

    Sources

    // atoms/button/index.jsx
    import styles from 'style://Pattern';
    import cx from 'classnames';
     
    const className = cx(styles.default, {
      [styles.disabled]: this.props.disabled
    });
     
    <button className={className}>
      {this.props.children}
    </button>
    /* atoms/button/index.css */
    .default {
      padding: 5px 10px;
      background: blue;
      color: white;
    }
    .disabled {
      background: grey;
    }

    Transformed

    // <Button>Lorem Ipsum dolor si amnet</Button>
    <button class="_button_4erg9ut2">
      Lorem Ipsum dolor si amnet
    </button>
     
    // <Button>Lorem Ipsum dolor si amnet</Button>
    <button class="_button_4erg9ut2 _button_iert9832">
      Lorem Ipsum dolor si amnet
    </button>
    /* atoms/button/index.css */
    ._button_4erg9ut2 {
      padding: 5px 10px;
      background: blue;
      color: white;
    }
    ._button_iert9832 {
      background: grey;
    }

    Install

    npm i patternplate-transform-cssmodules

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • marionebl
    • nerdlabs