✨ Amp WP PostCSS

This project uses a modular and extensible PostCSS setup based on 10up-toolkit, enhanced with custom plugins, mixins, variables, and functions. 🛠️

📁 Location

PostCSS config is defined in:

/index.js

🚀 Usage

The exported config is a function that accepts a props object. This allows you to override or extend PostCSS behavior dynamically.

🧪 Example

const postcssConfig = require('./index');

module.exports = (props) => {
  return postcssConfig({
    customMixins: {
      rounded: {
        borderRadius: '10px',
      },
    },
    customVariables: {
      primaryColor: '#0073aa',
    },
    customFunctions: {
      double: (value) => parseFloat(value) * 2,
    },
    ...props
  });
};

🧩 Supported Custom Props

| Prop | Type | Description | |---------------------------|----------|-----------------------------------------------------------------------------| | customMixins | object | Merge additional mixins into postcss-mixins | | customVariables | object | Override or extend postcss-simple-vars variables | | customFunctions | object | Extend the postcss-functions plugin with custom JavaScript functions | | customPreloadPlugins | object | Inject plugins before the base config plugins | | customAdditionalPlugins | object | Inject plugins after the base and default plugins |

⚙️ Base Behavior

• Uses 10up-toolkit/config/postcss.config.js as the base.
• Enables postcss-preset-env with stage: 0 and custom-properties: true.
• Loads default mixins and variables from /lib/mixins.js and /lib/variables.js.
• Loads default functions from /lib/functions.js.
• Additional plugins from /lib/plugins.js are merged in.

🛠️ Development

To build or watch styles:

npm run build      # One-time build
npm run watch      # Dev server with HMR