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.