Awesome

postcss-preset

PostCSS preset to be used at MOXY.

Installation

$ npm install @moxy/postcss-preset --save-dev

You might need to also install postcss-cli as a dev dependency.

Motivation

If you are developing a project that uses new CSS language features and must work on targets that do not yet support them, you have to transpile your styles. This preset provides a shareable PostCSS config as a preset that should be used across those projects at MOXY.

Uses postcss-preset-env to automatically support official CSS features in older browsers
- Stage 3
- Custom @media queries
- Nesting rules
- :dir pseudo-class (useful for i18n)
Enables postcss-import so that @import statements are inlined
Optionally enables postcss-url so that url() statements are processed
Enables postcss-mixins so that you can define mixins
Enables postcss-advanced-variables add support for iterators (@for and @each) and conditionals (@if and @else)
Enables postcss-calc so that calc() references are reduced whenever it's possible

Usage

Create postcss.config.js at the root of your project:

module.exports = require('@moxy/postcss-preset')();

...or with options

module.exports = require('@moxy/postcss-preset')({
    import: { path: './src/styles' },
    mixins: { mixinsDir: './src/styles/mixins' },
    advancedVariables: { unresolved: 'warn' },
});

Available options:

Name	Description	Type	Default
import	Options to pass to postcss-import	Object	`{}`
mixins	Options to pass to postcss-mixins	Object	`{ mixinsDir: './src/styles/mixins' }`
advancedVariables	Options to pass to postcss-advanced-variables	Object	`{}`¹
url	Options to pass to postcss-url, false disables any transpilation of `url()` declarations	Array/Object/boolean	`{ url: 'rebase' }`
browsers	Supported browsers list to pass to postcss-cssnext	Array	`['extends browserslist-config-google/modern']`, see browserslist-config-google (modern)

advancedVariables is not actually empty by default since it contains {disable: '@mixin, @include, @content, @import'} but this options can be easily changed by passing the desired disable object.

The postcss-url plugin is enabled by default. You may disable it like so:

module.exports = require('@moxy/postcss-preset')({
    url: false,
});

Tests

$ npm test
$ npm test -- --watch # during development

License

MIT License