# prepend-selector-webpack-plugin

> a Webpack plugin for prepending a selector to all your CSS

Latest version **1.0.1** (published 2022-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install prepend-selector-webpack-plugin
pnpm add prepend-selector-webpack-plugin
yarn add prepend-selector-webpack-plugin
bun add prepend-selector-webpack-plugin
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-20 |
| First published | 2017-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.5 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | sakabako |

## Links

- npm: https://www.npmjs.com/package/prepend-selector-webpack-plugin
- Repository: https://github.com/stutrek/prepend-selector-webpack-plugin
- Homepage: https://github.com/stutrek/prepend-selector-webpack-plugin#readme
- Issues: https://github.com/stutrek/prepend-selector-webpack-plugin/issues
- npm.io page: https://npm.io/package/prepend-selector-webpack-plugin

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^5.0.0
- [postcss-prepend-selector](https://npm.io/package/postcss-prepend-selector.md) ^0.3.0

## Recent versions

- 1.0.1 (latest) — 2022-11-20
- 1.0.0 — 2017-06-15

## README

# prepend-selector-webpack-plugin

This is a Webpack plugin for prepending a selector to all your CSS with `prepend-selector-webpack-plugin`. This allows prepending CSS classes with a string while also using CSS modules. If that's possilble with a built in solution when you find this, use that instead.

It turns this:
```css
li {
    color: blue;
}

.myClassName, .someoneElsesClassName {
    color: green;
}
```

into this:

```css
.myContainer li {
    color: blue;
}

.myContainer .myClassName, .myContainer .someoneElsesClassName {
    color: green;
}
```

## Usage

Add this to your plugins:

```javascript
var webpackPlugins = [
    new PrependSelectorPlugin({
        selector: '.mySelector '
    })
];
```

You can use all the (one) options that [postcss-prepend-selector](https://github.com/ledniy/postcss-prepend-selector) accepts.

## Why?

This is useful for creating a widget that will live on a website where you won't control the environment.

### Why not manually? Or with the PostCSS plugin that does this?

Doing this manually, or with said plugin, breaks the `compose` keyword in CSS Modules.

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