https://github.com/dy/scope-css

Prefix each css selector with parent selector
https://github.com/dy/scope-css

Last synced: 10 months ago
JSON representation

Prefix each css selector with parent selector

• Host: GitHub
• URL: https://github.com/dy/scope-css
• Owner: dy
• License: mit
• Created: 2016-07-19T08:10:05.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-09-25T11:26:58.000Z (over 5 years ago)
• Last Synced: 2025-08-09T15:43:51.692Z (10 months ago)
• Language: JavaScript
• Size: 25.4 KB
• Stars: 58
• Watchers: 3
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

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).