postcss-preset-moxy

postcss-preset-moxy

PostCSS preset to be used at MOXY.

Installation

$ npm install postcss-preset-moxy --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
• Uses postcss-css-variables instead of postcss-custom-properties because it's more complete
• 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-conditionals so that you can use @if and @else statements, useful inside mixins
• Enables postcss-color-function so that you can use alpha, lightness and other color utilities

Usage

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

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

...or with options

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

Available options:

Name	Description	Type	Default
import	Options to pass to postcss-import	Object	undefined
mixins	Options to pass to postcss-mixins	Object	undefined
cssVariables	Options to pass to postcss-css-variables, false disables the plugin	Object/boolean	{ preserveAtRulesOrder: true }
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	browserslist-config-google

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

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

Tests

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

License

MIT License

Changelog

4.3.0 (2019-09-16)

Features

• add ability to disable cssVariables (52862a1)