@novicell/postcss-config

Novicell PostCSS config

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

Included plugins

• PostCSS Import
• PostCSS Inline Media
• PostCSS Nested
• PostCSS Calc
• PostCSS Preset Env
• PostCSS Reporter

How to install in a Nuxt 3 project

1. npm i @novicell/postcss-config
   

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

1. npm i postcss @novicell/postcss-config
   

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

License

The Novicell CSS Utils is licensed under the MIT license. (http://opensource.org/licenses/MIT)