@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()],
      }));
    });
  });