patternplate-transform-postcss

patternplate patternplate transform applying postcss to css sources

Installation

npm install --save patternplate-transform-postcss postcss postcss-import

Configuration

Install patternplate-transform-postcss, postcss and postcss-import in your patternplate project. Then add the following configuration to ./configuration/patternplate-server

    // ./configuration/patternplate-server/transforms.js
    export default {
        postcss: {
            inFormat: 'css',
            outFormat: 'css',
            plugins: {...}
        }
    }

    // ./configuration/patternplate-server/patterns.js
    export default {
        formats: {
            css: {
                transforms: ['postcss']
            }
        }
    }

Plugins

The transform supports arbitrary postcss plugins. To use a plugin you have to install it via npm install --save ${pluginName}.

To make the transform pick up the plugin you have to configure it - this is done by adding an object under patternplate-server.transforms.postcss[${pluginName}]. This will cause the transform to require and initialize the plugin.

    // ./configuration/patternplate-server/transforms.js
    export default {
        postcss: {
            plugins: {
                pluginName: {...}
            }
        }
    }

Everything found in patternplate-server.transforms.postcss[${pluginName}].options will be passed directly.

Via the special order key you can determine the order of plugins during postcss initialization.

    // ./configuration/patternplate-server/transforms.js
    export default {
        postcss: {
            plugins: {
                pluginName: { // e.g. postcss-import
                    order: 1 // index of the plugin in postcss configuration, lower means earlier processing,
                    options: { // plugin options
                        foo: 'bar'
                    }
                }
            }
        }
    }

See also

• patternplate - Create, show and deliver component libraries
• transform-less - Process LESS to CSS
• transform-sass - Process SASS to CSS

---

Copyright 2016 by SinnerSchrader Deutschland GmbH and contributors. Released under the MIT license.