Skip to content

Latest commit

 

History

History
44 lines (33 loc) · 2 KB

README.md

File metadata and controls

44 lines (33 loc) · 2 KB

razzle-plugin-postcss

CircleCI Razzle-status npm version Known Vulnerabilities

A Razzle 2.x plugin for PostCSS (with primer for supporting for SCSS syntax).

Instead of locking your postCSS config to the core project postCSS configurations, this gives you the freedom to shoot yourself in the foot. Or style your Razzle project, whichever.

Usage

Example options for each plugin can be found inside of testdata. Once you have your desired options, pass it to modify which will return a Razzle plugin compliant modify function. It just works.

  // razzle.config.js

  const modifyBuilder = require('razzle-plugin-postcss').default
  const cssConfig = {
  postcssPlugins: [
    require('stylelint')({
      ignorePath: '/node_modules/**/*.css'
    }),
    require('autoprefixer')({
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9' // React doesn't support IE8 anyway
      ]
    })
  ]
}
  const modify = modifyBuilder({ cssConfig })

  module.exports = {
    plugins: [ { func: modify }]
  }

Note: Your package.json must import postcss-scss for this to work, the plugin simply enables the syntax at compile time.

Configuration options

All available configuration options are defined in their respective repositories, which can be found searching on npm or at PostCSS.