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)

1. 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