moxystudio / postcss-preset

PostCSS preset to be used at MOXY

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

postcss-preset's Issues

Use postcss-preset-env instead

https://moox.io/blog/deprecating-cssnext/

Add conditionals and iterators

Since https://github.com/andyjansson/postcss-conditionals was archived and we need another plugin for conditionals I suggest using https://github.com/jonathantneal/postcss-advanced-variables. With this plugin we can also have iterators 🎉
If using https://github.com/jonathantneal/postcss-advanced-variables we no longer need https://github.com/postcss/postcss-mixins.

With this, we can have:

• @if and @else Rules
• @for and @each Rules
• @mixin, @include, and @content rules (that will be replace the postcss-mixins)

In the case of the mixins, syntax changes:

Before:

@define-mixin  heading-text {
  color: #242424;
  font-size: 4em;
}

h1 {
  @mixin heading-text;
}

After:

@mixin heading-text {
  color: #242424;
  font-size: 4em;
}

h1 {
  @include heading-text;
}

Check "Custom Properties" based on browser needs

Custom properties are currently supported by most browsers:

Although there are a few, like IE, that do not provide support by default.

We should try and only enable custom properties based on which browsers we aim to support and their needs.

Upgrade to postcss v8

It's difficult to upgrade to postcss 8 because several packages we rely on don't yet support it. Keep an eye on these:

• csstools/postcss-advanced-variables#87
• csstools/postcss-preset-env#191

Use report plugins?

https://github.com/postcss/postcss-reporter
https://github.com/postcss/postcss-browser-reporter