@helpfulhuman/postcss-preset

Helpful Human's PostCSS Presets

This library provides a default set of PostCSS plugins and configurations based on the internal standards employed at Helpful Human.

Getting Started

Install via npm:

npm install --save-dev @helpfulhuman/postcss-preset

Usage

The buildConfig() method allows you to quickly create the entire config needed for PostCSS.

Standard PostCSS Config

If you're using PostCSS directly with postcss-cli command line tool, you can create a postcss.config.js file and export the results of the buildConfig() method. This approach is likely the best solution for adding PostCSS support to codebases where modern tools like Webpack are not available or not needed.

Note: The postcss-easy-import plugin is added when using the default buildMode. This means you can use @import with relative filepaths or globs to include files in your bundled file, like you would with SASS or Stylus.

// postcss.config.js
var preset = require("@helpfulhuman/postcss-preset");

module.exports = preset.buildConfig({ /* options */ });

Now you can the postcss command line utility to build your CSS.

postcss src/index.css --map --output public/main.css

Plugins Only

Alternatively, if you're in a situation where you don't need a full configuration for PostCSS, you can get an array of just the configured plugins using the buildPlugins() method.

Note: buildConfig() invokes this function under the hood.

var preset = require("@helpfulhuman/postcss-preset");

var plugins = preset.buildPlugins({ /* options */ });

Options

Name	Type	Description
autoreset	Object	Enables the autoreset plugin when a configuration object is provided, and the plugin is disabled when set to null. Recommended for use with CSS modules. Defaults to null.
browsers	String[]	An array of strings used for automatically adding vendor prefixes. See autoprefixer's browser documentation for more information. Defaults to ["last 2 version", "ie >= 10"]
enableShortRules	Bool	Enables the use of short rule notation when set to true. Defaults to true.
legacyBrowsers	Bool	Enables broadstroke legacy browser support (like IE9) when set to true. Defaults to false.
buildMode	Enum	Must be set to a value of MODE_DEFAULT, MODE_MODULES or MODE_WEBPACK. Defaults to MODE_DEFAULT.
nextCSS	Bool	When true, enables polyfills for future CSS features including custom properties, var(), @apply, variable calc(), @custom-media, @media ranges, @custom-selector, element nesting, image-set, case-insensitive attributes, hwb(), Level-4 hsl() and rgb(), gray(), RGBA hexadecimal color notations, color(), system-ui fonts, font-variant, filter() (for SVGs), :matches, Level-4 :not, :any-link, and overflow-wrap. Defaults to true.
optimize	Bool	Optimizes the final output for production releases. Defaults to true when the NODE_ENV is set to production.
pseudoFallbacks	Bool	Provides single colon fallbacks for ::pseudo elements including before, after, first-letter, first-line, first-child, last-child, hover, focus, and active in order to support older browsers when set to true. Defaults to legacyBrowsers' value.
remFallback	Bool	Helps support older browsers by automatically adding a px fallback for rules using rem units. Defaults to legacyBrowsers' value.
rgbaFallback	Bool	Enables rgba() to rgb() fallback to be added for legacy browsers when set to true. Defaults to legacyBrowsers' value.