@shopify/loom-plugin-postcss v1.0.1
@shopify/loom-plugin-postcss
Exposes hooks to configure PostCSS, which may then be used by other build and test plugins.
Installation
yarn add @shopify/loom-plugin-postcss --dev
Usage
postcss()
is a plugin that exposes hooks to configure postcss at the project level and sets default values for that configuration based on what the user provides.
Add the plugin to your project and specify any defaults that you wish to set using the config
option, which is either an object containing a plugins
array of PostCSS plugins that are passed to the PostCSS processor and the other options that are passed to the process command with the exception of to
and from
, or a function that accepts the existing PostCSS options and expects the new PostCSS options object to be returned. This example defines a config
that uses the autoprefixer
plugin.
import {createPackage} from '@shopify/loom';
import {postcss} from '@shopify/loom-plugin-postcss';
import {autoprefixer} from 'autoprefixer';
export default createPackage((pkg) => {
pkg.use(
postcss({
// Overrides any current config that is set
config: {plugins: [autoprefixer()]},
}),
);
});
import {createPackage} from '@shopify/loom';
import {postcss} from '@shopify/loom-plugin-postcss';
import {autoprefixer} from 'autoprefixer';
export default createPackage((pkg) => {
pkg.use(
// Override initial postcss options.
// Return a new object, instead of mutating the argument object.
postcss({
config(config) {
return {
...config,
plugins: [...(config.plugins || []), autoprefixer()],
};
},
}),
);
});
Hooks
This plugin adds the following hooks to each of the TestProjectConfigurationHooks
, BuildProjectConfigurationHooks
, and DevProjectConfigurationHooks
:
postcssConfig
: the configuration used when transpiling with PostCss.import {createProjectBuildPlugin} from '@shopify/loom'; import {myPostCssPlugin} from 'my-postcss-plugin'; const plugin = createProjectBuildPlugin(({hooks}) => { hooks.configure.hook((configure) => { // Add an additional plugins when building configure.postcssConfig?.hook((config) => ({ ...config, plugins: [...config.plugins, myPostCssPlugin()], })); }); });