Cssimportant-loader NPM

cssimportant-loader

Webpack CSS Loader to add !important to all styles.

While using !important is typically frowned upon there are times when it can be useful. When building widgets that will be embedded directly into third party websites (no iframe) the CSS rules in the host site may be unpredictable and cause CSS bleeding. Cleanslate CSS is an aggressive CSS reset that can be used for this exact situation, however to use it you need to add !important to all of your styles to properly override it's resets with your own styles.

This Webpack loader will add !important to all your styles so you can easily use Cleanslate, without having to manually add important everywhere.

Install

npm install cssimportant-loader --save-dev

Usage

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader', 'cssimportant-loader' ]
      }
    ]
  }
}

in your application

import css from 'file.css';

Example

given this CSS:

.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #EFEFEF;
}

will return this CSS:

.modal-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  background: #EFEFEF !important;
}