patternplate-transform-cssmodules-symbols
patternplate transform creating css modules
Last updated 4 years ago by nerdlabs .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install patternplate-transform-cssmodules-symbols 
SYNC missed versions from official npm registry.

patternplate-transform-cssmodules-symbols

patternplate transform to enable usage of css modules

:warning: This transform is intended to be used in conjunction with patternplate-transform-cssmodules and depends on it being configured properly for styles files to import.

See the Configuration section for details.

Installation

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

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

Current Tags

  • 0.2.1                                ...           latest (4 years ago)

4 Versions

  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (4)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |