@minna-ui/postcss-config NPM

`@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

Install this package and its dependencies:

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

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',
};

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