# scope-css

> Scope each css rule with a selector, ie. nest into parent

Latest version **2.0.0** (published 2026-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install scope-css
pnpm add scope-css
yarn add scope-css
bun add scope-css
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-01-28 |
| First published | 2016-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 58 |
| Author | ΔY |
| Maintainers | dfcreative, dy |
| Keywords | css, style, insert-css, nesting, scope, nest, parent, selector, sheetify |

## Links

- npm: https://www.npmjs.com/package/scope-css
- Repository: https://github.com/dy/scope-css
- Homepage: https://github.com/dy/scope-css#readme
- Issues: https://github.com/dy/scope-css/issues
- npm.io page: https://npm.io/package/scope-css

## 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

- 2.0.0 (latest) — 2026-01-28
- 1.2.1 — 2018-10-16
- 1.2.0 — 2018-10-11
- 1.1.1 — 2018-10-10
- 1.1.0 — 2018-04-23
- 1.0.5 — 2017-11-02
- 1.0.4 — 2016-07-25
- 1.0.3 — 2016-07-24
- 1.0.2 — 2016-07-19
- 1.0.1 — 2016-07-19
- 1.0.0 — 2016-07-19

## README

# scope-css [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges) [![Build Status](https://img.shields.io/travis/dy/scope-css.svg)](https://travis-ci.org/dy/scope-css)

Prefix or nest each style selector in a css string. Useful to create namespaced css for components, themes, applications, modular css etc. Also it is tiny.

## Usage

[![npm install scope-css](https://nodei.co/npm/scope-css.png?mini=true)](https://npmjs.org/package/scope-css/)

```js
const scope = require('scope-css');

scope(`
.my-component {}
.my-component-element {}
`, '.parent');

/*
`
.parent .my-component {}
.parent .my-component-element {}
`
*/
```

## API

## css = scope(css, parent, options?)

Return css string with each rule prefixed with the parent selector. Note that `parent` selector itself will be ignored. Also each `:host` keyword will be replaced with `parent` value. Example:

```js
scope(`
	.panel {}
	:host {}
	:host .my-element {}
	.panel .my-element {}
	.my-element {}
`, '.panel');

/*
`
	.panel {}
	.panel {}
	.panel .my-element {}
	.panel .my-element {}
	.panel .my-element {}
`
*/
```

Options can scope keyframes via `{ keyframes: bool|prefixStr }` option, eg.

```js
scope(`
	.panel {
		animation: infinite loading 4s;
	}
	@keyframes loading {
		from { top: 0; }
		to { top: 100px; }
	}
`, '.panel', { keyframes: true })

/*
`
.panel {
	animation: infinite panel-loading 4s;
}
@keyframes panel-loading {
	from { top: 0; }
	to { top: 100px; }
`)
*/
```

## css = scope.replace(css, 'replacement $1$2')

Apply replace to css, where `$1` is matched selectors and `$2` is rules for the selectors. It does not do any self/host detection, so use it for more flexible replacements.

```js
scope.replace(`
	.my-component, .my-other-component {
		padding: 0;
	}
`, '$1');

// `.my-component, .my-other-component`
```

## See also

* [scoped css polyfill](https://github.com/samthor/scoped)

## Credits

Based on [this question](http://stackoverflow.com/questions/12575845/what-is-the-regex-of-a-css-selector).

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