Package Exports

patternplate-transform-postcss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (patternplate-transform-postcss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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