Patternplate-transform-postcss NPM

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

patternplate-transform-postcss v1.0.2