patternplate transform creating css modules
npm install patternplate-transform-cssmodules-symbolspatternplate 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.
``shell`
npm install --save patternplate-transform-cssmodules-symbols patternplate-transform-cssmodules
`javascript`
// file: configuration/patternplate-server/patterns.js
module.exports = {
formats: {
css: {
name: 'Style',
transforms: ['cssmodules']
},
jsx: {
name: 'Markup',
transforms: ['cssmodules-symbols', 'react', 'react-to-markup']
}
}
};
`javascript`
// file: configuration/patternplate-server/transforms.js
module.exports = {
'cssmodules-symbols': {
inFormat: 'jsx',
outFormat: 'jsx'
},
cssmodules: {
inFormat: 'css',
outFormat: 'css'
}
};
`javascript
// atoms/button/index.jsx
import styles from 'style://Pattern';
import cx from 'classnames';
const className = cx(styles.default, {
[styles.disabled]: this.props.disabled
});
`
`css`
/ atoms/button/index.css /
.default {
padding: 5px 10px;
background: blue;
color: white;
}
.disabled {
background: grey;
}
`javascript
//
//
`
`css``
/ atoms/button/index.css /
._button_4erg9ut2 {
padding: 5px 10px;
background: blue;
color: white;
}
._button_iert9832 {
background: grey;
}