# postcss-modules-scope

> A CSS Modules transform to extract export statements from local-scope classes

Latest version **3.2.1** (published 2024-11-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install postcss-modules-scope
pnpm add postcss-modules-scope
yarn add postcss-modules-scope
bun add postcss-modules-scope
```

## Health

**Score 43/100 (D)** — status: stable.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.2.1 |
| Published | 2024-11-11 |
| First published | 2015-05-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/postcss-modules-scope) |
| Module format | CommonJS |
| Node | ^10 \|\| ^12 \|\| >= 14 |
| Dependencies | 1 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Glen Maddern |
| Maintainers | markdalgleish, sokra, geelen, evilebottnawi |
| Keywords | css-modules, postcss, plugin |

## Links

- npm: https://www.npmjs.com/package/postcss-modules-scope
- Repository: https://github.com/css-modules/postcss-modules-scope
- Issues: https://github.com/css-modules/postcss-modules-scope/issues
- npm.io page: https://npm.io/package/postcss-modules-scope

## Dependencies (1)

- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^7.0.0

## Recent versions

- 3.2.1 (latest) — 2024-11-11
- 3.0.0-rc.2 (next) — 2020-10-11
- 1.0.0-beta1 (beta) — 2015-08-15
- 3.2.0 — 2024-04-03
- 3.1.2 — 2024-04-03
- 3.1.1 — 2024-01-18
- 3.1.0 — 2023-12-21
- 3.0.0 — 2020-10-13
- 3.0.0-rc.1 — 2020-09-22
- 3.0.0-rc.0 — 2020-09-21
- 2.2.0 — 2020-03-19
- 2.1.1 — 2019-11-28
- 2.1.0 — 2019-03-05
- 2.0.1 — 2018-11-27
- 2.0.0 — 2018-11-23
- … 13 more at https://npm.io/package/postcss-modules-scope/versions

## README

# CSS Modules: Scope Locals & Extend

[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)

Transforms:

```css
:local(.continueButton) {
  color: green;
}
```

into:

```css
:export {
  continueButton: __buttons_continueButton_djd347adcxz9;
}
.__buttons_continueButton_djd347adcxz9 {
  color: green;
}
```

so it doesn't pollute CSS global scope and can be simply used in JS like so:

```js
import styles from "./buttons.css";
elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`;
```

## Composition

Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:

```css
.globalButtonStyle {
  background: white;
  border: 1px solid;
  border-radius: 0.25rem;
}
.globalButtonStyle:hover {
  box-shadow: 0 0 4px -2px;
}
:local(.continueButton) {
  compose-with: globalButtonStyle;
  color: green;
}
```

becomes:

```
.globalButtonStyle {
  background: white;
  border: 1px solid;
  border-radius: 0.25rem;
}
.globalButtonStyle:hover {
  box-shadow: 0 0 4px -2px;
}
:local(.continueButton) {
  compose-with: globalButtonStyle;
  color: green;
}
```

**Note:** you can also use `composes` as a shorthand for `compose-with`

## Local-by-default & reuse across files

You're looking for [CSS Modules](https://github.com/css-modules/css-modules). It uses this plugin as well as a few others, and it's amazing.

## Building

```
npm install
npm test
```

- Status: [![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
- Lines: [![Coverage Status](https://coveralls.io/repos/css-modules/postcss-modules-scope/badge.svg?branch=master)](https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master)
- Statements: [![codecov.io](http://codecov.io/github/css-modules/postcss-modules-scope/coverage.svg?branch=master)](http://codecov.io/github/css-modules/postcss-modules-scope?branch=master)

## Development

- `npm test:watch` will watch `src` and `test` for changes and run the tests

## License

ISC

## With thanks

- Mark Dalgleish
- Tobias Koppers
- Guy Bedford

---

Glen Maddern, 2015.

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