PostCSS Basics

PostCSS plugin pack for quick project bootstrapping.

Intended for use with Vite, so postcss-modules and postcss-import are not included.

Plugins:

• autoprefixer
• postcss-mixins
• postcss-nested
• postcss-simple-vars
• @samatech/postcss-colors

Usage

Step 1: Install plugin:

npm install --save-dev @samatech/postcss-basics

Step 2: Check your project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, first add it according to PostCSS docs.

Step 3: Add the plugin to plugins list (note the spread operator and the extra () after the import statement):

import postcssBasics from '@samatech/postcss-basics'
export default {
  plugins: [
    ...postcssBasics(),
  ],
};

This can be simplified if you are not using other plugins:

import postcssBasics from '@samatech/postcss-basics'
export default {
  plugins: postcssBasics(),
};

Options

TODO

• Pass through options for plugins
• Disable plugins

Call plugin function to set options:

import postcssBasics from '@samatech/postcss-basics'
postcssBasics()