patternplate transform to enable usage of css modules.
See the Configuration section for details.
npm install --save patternplate-transform-cssmodules patternplate-transform-cssmodules-symbols// 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'
}
};// 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;
}// <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;
}