postcss-global-important-plugin

Features

turns css properties under :global in css-module into important

.container {
  font-size: 14px;
  :global .ant-btn {
-    font-weight: 500;
+    font-weight: 500 !important;
    &:hover, &:focus, &:visited {
-      color: red;
+      color: red !important;
    }
  }
}

Installation

// use yarn 
yarn add postcss-global-important-plugin -D

// use npm 
npm install postcss-global-important-plugin -D

Usage

Webpack

In webpack you can use postcss-loader with postcss-global-important-plugin and other PostCSS plugins

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

And create a postcss.config.js with:

module.exports = {
  plugins: [
    'postcss-global-important-plugin'
  ]
}

CLI

You can use the postcss-cli to run postcss-global-important-plugin from CLI:

npm install postcss postcss-cli postcss-global-important-plugin -D
npx postcss *.css --use postcss-global-important-plugin -d build/