# postcss-selector-scope

> PostCSS plugin to scope styles using :not() pseudo-class

Latest version **1.0.0** (published 2019-04-30) · MIT license · 0 weekly downloads

## Install

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

## 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.0 |
| Published | 2019-04-30 |
| First published | 2019-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 8.* \|\| >= 10.* |
| Dependencies | 2 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | BBVAEngineering |
| Maintainers | bbvaengineer |
| Keywords | postcss, postcss-plugin, css, style-scope, web components, shadow dom |

## Links

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

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^7.0.14
- [escape-regex-string](https://npm.io/package/escape-regex-string.md) ^1.0.6

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

- 1.0.0 (latest) — 2019-04-30

## README

# postcss-selector-scope

[![Build Status](https://travis-ci.org/BBVAEngineering/postcss-selector-scope.svg?branch=master)](https://travis-ci.com/BBVAEngineering/postcss-selector-scope)
[![GitHub version](https://badge.fury.io/gh/BBVAEngineering%2Fpostcss-selector-scope.svg)](https://badge.fury.io/gh/BBVAEngineering%2Fpostcss-selector-scope)
[![NPM version](https://badge.fury.io/js/postcss-selector-scope.svg)](https://badge.fury.io/js/postcss-selector-scope)
[![Dependency Status](https://david-dm.org/BBVAEngineering/postcss-selector-scope.svg)](https://david-dm.org/BBVAEngineering/postcss-selector-scope)
[![codecov](https://codecov.io/gh/BBVAEngineering/postcss-selector-scope/branch/master/graph/badge.svg)](https://codecov.io/gh/BBVAEngineering/postcss-selector-scope)
[![Greenkeeper badge](https://badges.greenkeeper.io/BBVAEngineering/postcss-selector-scope.svg)](https://greenkeeper.io/)

[![NPM](https://nodei.co/npm/postcss-selector-scope.png?downloads=true&downloadRank=true)](https://nodei.co/npm/postcss-selector-scope/)

> PostCSS plugin to scope styles using :not() pseudo-class

Adds the `:not([your-selector])` pseudo-class to the allowed selectors of the processed CSS to prevent undesired styles having effect over certain elements. 

A typical use case is to protect Web Components from styles inherited from the main document in browsers without Shadow DOM support.

## Input 

```css
:root {
  --some-var: red;
}

html, 
body {
  margin: 0;
}

.some-class {
  color: red;
}

.parent .child {
  color: red;
}
```

## Default output

```css
:root {
  --some-var: red;
}

html:not(.style-scope),
body:not(.style-scope) {
  margin: 0;
}

.some-class:not(.style-scope) {
  color: red;
}

.parent .child:not(.style-scope) {
  color: red;
}
```

## Installation

```
npm i -S postcss-selector-scope
```

## Usage

```js
const postcss = require('postcss');
const selectorScope = require('postcss-selector-scope');

const options = {
  not: '.custom-selector',
  exclude: ['.some-class']
};

postcss()
  .use(selectorScope(options))
  .process(cssFileContent)
  .then((result) => console.log(result.css));
```

## Options

### `not`

type: `String`   
default: `.style-scope`

Selector used inside `:not()` pseudo-class.  
The default value is the one used by [ShadyCSS library](https://github.com/webcomponents/shadycss).

### `exclude`

type: `Array`   
default: `[]`

List of selectors to exclude.   
Each value can be a string or a regular expression.   
`:root` selector is excluded by default.

# Contribute

If you want to contribute, please read the [CONTRIBUTING.md](CONTRIBUTING.md).


# Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/BBVAEngineering/postcss-selector-scope/tags).


# Authors

See the list of [contributors](https://github.com/BBVAEngineering/postcss-selector-scope/graphs/contributors) who participated in this project.


# License

This project is licensed under the [MIT License](LICENSE.md).

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