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 desireddisable
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