Skyva Loader

A postCSS loader with awesome presets to help you write future proof CSS

Install

yarn add skyva-loader --dev

npm install skyva-loader --save-dev

Why?

Over time I started to realize I always used the same plugins for all projects and I just kept copying configs from one side to the other so I decided to automate this and create a loader for the plugins and options I use and help me write future proof CSS.

Any other options or plugins would be awesome !

Included Plugins

• cssnext
• postcss-smart-import
• cssnano
• postcss-image-set-polyfill

Usage

Add

webpack.config.js

{
  test: /\.(css)$/,
  include: [
    path.resolve(__dirname, 'src/components'),
  ],
  use: [
    {
      loader: 'css-loader'
    },
    {
      loader: 'skyva-loader',
    },
  ]
},

Options

• min: Adds cssnano to the build,
• plugins: An array of plugins you would like to add
• cssnext: Options to pass to cssnext

webpack.config.js

const writeSVG = require('postcss-write-svg');
...
{
  test: /\.(css)$/,
  include: [
    path.resolve(__dirname, 'src/components'),
  ],
  use: [
    {
      loader: 'css-loader'
    },
    {
      loader: 'skyva-loader',
      options: {
        min: true,
        plugins: [writeSVG],
        cssnext: {
          applyRule: false,
        },
      },
    },
  ]
},