Skip to content

moxystudio/postcss-preset

Repository files navigation

postcss-preset

NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status

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