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.jsmoduleexports = formats: css: name: 'Style' transforms: 'cssmodules' jsx: name: 'Markup' transforms: 'cssmodules-symbols' 'react' 'react-to-markup' ;
// file: configuration/patternplate-server/transforms.jsmoduleexports = 'cssmodules-symbols': inFormat: 'jsx' outFormat: 'jsx' cssmodules: inFormat: 'css' outFormat: 'css' ;
Usage
Sources
// atoms/button/index.jsx;; const className = ; <button className=className> thispropschildren</button>
/* atoms/button/index.css */
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 */