@novicell/postcss-config NPM

Novicell PostCSS config

npm

This is an PostCSS 8 config for vite or Nuxt projects written with PostCSS.

Included plugins

How to install in a Nuxt 3 project

```bash
npm i @novicell/postcss-config
```

Add the following to nuxt.config.ts

Import the default config in top of nuxt.config.ts

import postcssConfig from '@novicell/postcss-config';

Add the config inside defineNuxtConfig section

postcss: {
  postcssOptions: {
    plugins: {
      ...postcssConfig({
        // Your overriding options
      })
    }
  }
}

How to install in a vite project

```bash
npm i postcss @novicell/postcss-config
```

Add the following to vite.config.ts

Import the array config in top of vite.config.ts since vite doesn't support Object type plugin config.
```
import { postcssArrayConfig } from '@novicell/postcss-config';
```

Add the config inside defineConfig section

css: {
  postcss: {
    plugins:[
      ...postcssArrayConfig({
        // Your overriding options
      }) 
    ]
  }
}

Default plugins and options

These are the default plugins and options provided by @novicell/postcss-config

{
  'postcss-import': {},
  'postcss-inline-media': {},
  'postcss-nested': {},
  'postcss-calc': {},
  'postcss-preset-env': {
    stage: 2,
    preserve: process.env.NODE_ENV !== 'production',
    importFrom: ['assets/css/_mediaqueries.css', 'assets/css/_variables.css'],
    features: {
      'color-mod-function': { unresolved: 'warn' },
      'custom-media-queries': {}
    },
    browsers: ['>= 5% in DK']
  },
  'postcss-reporter': {
    clearReportedMessages: true
  }
}

Overriding options

It's possible to modify all the options of the plugins used in postcssConfig. Simply add the override as a keyed object with the postCSS plugin name like this...

...postcssArrayConfig({
  'postcss-preset-env': {
    preserve: false,
    importFrom: ['assets/_mediaqueries.css', 'assets/_variables.css'],
  },
  'postcss-reporter': {
    clearReportedMessages: false
  }
})

Contribution

Looking to contribute something? Here's how you can help. Please take a moment to review our contribution guidelines in order to make the contribution process easy and effective for everyone involved.