@minna-ui/postcss-config
TypeScript icon, indicating that this package has built-in type declarations

0.36.0 • Public • Published

NPM version Licence

@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

Package Sidebar

Install

npm i @minna-ui/postcss-config

Weekly Downloads

2

Version

0.36.0

License

Apache-2.0

Unpacked Size

32.9 kB

Total Files

12

Last publish

Collaborators

  • maxmilton