# cssimportant-loader

> Webpack Css Loader to add !important to all styles

Latest version **0.4.0** (published 2017-01-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install cssimportant-loader
pnpm add cssimportant-loader
yarn add cssimportant-loader
bun add cssimportant-loader
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2017-01-31 |
| First published | 2017-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Tim Officer |
| Maintainers | tofficer |
| Keywords | Webpack, Css, !imporant |

## Links

- npm: https://www.npmjs.com/package/cssimportant-loader
- Repository: https://github.com/officert/css-important-loader
- Homepage: https://github.com/officert/css-important-loader#readme
- Issues: https://github.com/officert/css-important-loader/issues
- npm.io page: https://npm.io/package/cssimportant-loader

## Dependencies (1)

- [css](https://npm.io/package/css.md) ^2.2.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2017-01-31
- 0.2.0 — 2017-01-23
- 0.1.8 — 2017-01-23
- 0.1.7 — 2017-01-23
- 0.1.6 — 2017-01-23
- 0.1.5 — 2017-01-23
- 0.1.4 — 2017-01-23
- 0.1.3 — 2017-01-23
- 0.1.2 — 2017-01-22
- 0.1.1 — 2017-01-22
- 0.1.0 — 2017-01-22
- 0.0.2 — 2017-01-22
- 0.0.1 — 2017-01-22

## README

# cssimportant-loader

[![npm version](https://badge.fury.io/js/cssimportant-loader.svg)](https://badge.fury.io/js/cssimportant-loader)

[Webpack](https://webpack.github.io/docs/) 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](http://cleanslatecss.com/) 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](https://webpack.github.io/docs/) loader will add `!important` to all your styles so you can easily use Cleanslate, without having to manually add `important` everywhere.

### Install

```sh
npm install cssimportant-loader --save-dev
```

### Usage

*webpack.config.js*

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

*in your application*

```js
import css from 'file.css';
```
### Example

given this CSS:

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

will return this CSS:

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

### Running Tests

```sh
npm run test
```

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