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:
moduleexports = ;
...or with options
moduleexports = 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:
moduleexports = url: false;
Tests
$ npm test
$ npm test -- --watch
during development