Skip to content

🚀 Loader for Webpack to process CSS files to deduplicate rules, declarations and identifiers to minimize and compress CSS files as much as possible.

License

Notifications You must be signed in to change notification settings

mohsenshafiei/quark-loader

Repository files navigation

GitHub Logo

version node travis downloads MIT LICENSE semantic-release

Loader for Webpack to deduplicate, minify and compress CSS as much as possible.

Getting Started

To begin you'll need to install quark-loader

npm install --save-dev quark-loader

Examples

Add the loader to your webpack config.

file.js

import file from 'file.js';

Chain the quark-loader with css-loader and the style-loader to immediately minimize and apply all styles to the DOM.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[hash:base64:3]',
              importLoaders: 3,
            },
          },
          {
            loader: 'quark-loader',
            options: {
              compress: true,
            },
          },
        ],
      },
    ],
  },
};

You can also use the quark-loader with sass-loader. For example

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[hash:base64:3]',
              importLoaders: 3,
            },
          },
          {
            loader: 'quark-loader',
            options: {
              compress: true,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },

How it works

quark-loader process the CSS files and replaced our style with a reference to our declarations. In this way, we can remove repetitive styles from our CSS and make it minimum.

What actually happens?

style.css

.a {
  top: 100px;
}
.b {
  top: 100px;
}
.c {
  top: 100px;
}
.d {
  top: 100px;
}

Let's review what we get at the end

Extracted CSS file

.t7E {
	top: 100px;
}
.BOO {
}
._1dA {
}
._1rC {
}
._3e1 {
}

Without CSS extraction

exports.locals = {
	"top--100px": "t7E",
	"a": "BOO t7E",
	"b": "_1dA t7E",
	"c": "_1rC t7E",
	"d": "_3e1 t7E"
};

Tutorials

Using Quark-Loader to minimize css files

About

🚀 Loader for Webpack to process CSS files to deduplicate rules, declarations and identifiers to minimize and compress CSS files as much as possible.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published