@minna-ui/postcss-config

PostCSS config preset for use in Minna UI projects or standalone.

Included plugins (in execution order):

Plugin	Docs	Notes
postcss-advanced-variables	link
postcss-use	link
postcss-nested	link
postcss-color-mod-function	link
css-mqpacker	link	(optimize only)
autoprefixer	link	(optimize only)
cssnano	link	(optimize only)

Usage

1. Install this package and its dependencies:

   yarn add -D @minna-ui/postcss-config postcss postcss-scss

2. Create a postcss.config.js file in your project root with this package as a plugin:

   module.exports = {
     map: true,
     plugins: {
       // the `unsafe` option is fine when compiling components separately, it
       // only becomes potentially dangerous when compiling a whole app
       '@minna-ui/postcss-config': { unsafe: true },
     },
     syntax: 'postcss-scss',
   };

3. CSS is automatically transformed with our preset PostCSS plugins, but if you need extra functionality, you can specify PostCSS plugins directly in your CSS using @use (after first installing the plugin):

   @use postcss-extend-rule();
   
   .navbar-icon {
     @extend .icon;
   }

Options

Option	Default value	Type	Description
importAlias	{ '^##\\/(.*)$': 'src/$1' }	object	A map of import aliases. Given a matching regex key, will replace the import path with the value.
importPaths	[process.cwd(), 'src', 'src/css']	array	A list of extra paths to search when resolving @import rules in CSS. First, imports will try to resolve according to the CSS Import Resolve spec and then try again with each of the importPaths.
optimize	process.env.NODE_ENV === 'production'	boolean	Perform optimisations to reduce output file size and minimise runtime style computation.
unsafe	false	boolean	Apply potentially unsafe transformations (e.g. combining same @media).
debug	true	boolean	Show useful debugging feedback (e.g. unresolved variables).
...options	undefined	any	Any other options will be passed to all PostCSS plugins and to the nanocss preset options.This can be particuarly powerful if you need to pass options when using the @use rule — use the plugin name as a key, as shown in the postcss-use docs.

Licence

@minna-ui/postcss-config is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.

---

© 2020 We Are Genki