# postcss-global-important-plugin

> a postcss plugin that turns elements under :global in css-module into important

Latest version **1.0.9** (published 2022-07-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install postcss-global-important-plugin
pnpm add postcss-global-important-plugin
yarn add postcss-global-important-plugin
bun add postcss-global-important-plugin
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-07-01 |
| First published | 2022-06-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | travischen1996@gmail.com |
| Maintainers | travischen1996 |
| Keywords | css-module, postcss, postcss-plugin, global, important |

## Links

- npm: https://www.npmjs.com/package/postcss-global-important-plugin
- Repository: https://github.com/PorkSashimi/postcss-global-important-plugin
- Homepage: https://github.com/PorkSashimi/postcss-global-important-plugin#readme
- Issues: https://github.com/PorkSashimi/postcss-global-important-plugin/issues
- npm.io page: https://npm.io/package/postcss-global-important-plugin

## Recent versions

- 1.0.9 (latest) — 2022-07-01
- 1.0.8 — 2022-06-30
- 1.0.6 — 2022-06-30
- 1.0.5 — 2022-06-30
- 1.0.4 — 2022-06-30
- 1.0.3 — 2022-06-30
- 1.0.2 — 2022-06-30
- 1.0.1 — 2022-06-30
- 1.0.0 — 2022-06-30

## README

[webpack]:https://webpack.js.org/
[postcss-loader]:https://github.com/postcss/postcss-loader
[postcss-global-important-plugin]:https://github.com/PorkSashimi/postcss-global-important-plugin
[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
[postcss-cli]: https://github.com/postcss/postcss-cli

<h1>
  postcss-global-important-plugin
</h1>

<div>
  <img alt="npm" src="https://img.shields.io/npm/v/postcss-global-important-plugin">
  <img alt="npm" src="https://img.shields.io/npm/dy/postcss-global-important-plugin">
  <img alt="npm" src="https://img.shields.io/badge/coverage-100%25-green">
  <img alt="npm" src="https://img.shields.io/badge/test-passing-blue">
</div>

## Features
turns css properties under `:global` in css-module into important

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

## Installation
```sh
// 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]

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}
```
And create a `postcss.config.js` with:
```js
module.exports = {
  plugins: [
    'postcss-global-important-plugin'
  ]
}
```

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

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

---
_Source: https://npm.io/package/postcss-global-important-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._