@unionco/postcss-compositions

Valtech Compositions

A Post CSS plugin wrapper for the valtech compositions package. For full documentation please read the documentation for that package by following the link below. TODO: Add link here

Table of Contents

1. Installation
2. Config & Class Options

1. Installation & Setup

• Step 1: Install with your tool of choice

  • npm: npm install --save-dev @unionco/postcss-compositions
  • yarn: yarn add -D @unionco/postcss-compositions

• Step 2: Add the compositions plugin to your postcss config

  Example postcss config

  const {
    valtechCompositionsPostCSSPlugin
  } = require('@unionco/postcss-compositions')
  
  module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      valtechCompositionsPostCSSPlugin({
        /* ...your config settings here, example further down */
      })
    ]
  }

  List of config options can be found in the section below For more a full list of options with descriptions see the README of the base package TODO: Add link to other package.

• Step 3: Add the @valtech compositions; directive into your css where you want the classes to be written.

  @valtech compositions;

With Tailwind

This section covers integration specific to tailwind which requires postcss, so also follow the above instructions.

Place the compositions custom declaration after the base, but before the components and utilities. This is the best place since they act as objects within ITCSS methodology, and thus both components and utilities should override them.

@tailwind base;
@valtech compositions;
@tailwind components;
@tailwind utilities;

• Step 4: Run your postcss build command, making sure to use postcss over tailwind

2. Config & Class Options

Below is a list of options for the postcss package. For a comprehensive breakdown of config options, class descriptions & options please read the documentation for the base package. TODO: Add link to base package here

ICompositionOptions Options Types

interface ICompositionOptions {
  minify?: boolean
  compositionOptions: {
    classPrefix?: string
    gutter?: string
    measureDefault?: string
    coverSpacing?: string
    includeDefaultAspects?: boolean
    shadowboxColor?: string
    iconClassName?: string
    iconSize?: string
    wrapperHorPadding?: string
  }
}

Example config

/* Shown with default values */
const compositionConfigOptions = {
  minify: false,
  compositionOptions: {
    classPrefix: null /* No prefix */,
    gutter: '1rem',
    measureDefault: '70ch',
    coverSpacing: '1rem',
    includeDefaultAspects: false,
    shadowBoxColor: 'rgba(0, 0, 0, .1)',
    iconClassName: null /* Where class name is .withIcon__icon */,
    wrapperHorPadding: '1rem'
  }
}