https://github.com/sweetchuck/npm-postcss-expand-selectors

PostCSS plugin to expand comma separated selectors into individual rules
https://github.com/sweetchuck/npm-postcss-expand-selectors

css-coverage postcss-plugin unusedcss

Last synced: 4 months ago
JSON representation

PostCSS plugin to expand comma separated selectors into individual rules

• Host: GitHub
• URL: https://github.com/sweetchuck/npm-postcss-expand-selectors
• Owner: Sweetchuck
• Created: 2023-06-14T10:49:19.000Z (almost 3 years ago)
• Default Branch: 2.x
• Last Pushed: 2024-12-24T10:27:05.000Z (over 1 year ago)
• Last Synced: 2025-04-06T03:58:48.390Z (about 1 year ago)
• Topics: css-coverage, postcss-plugin, unusedcss
• Language: JavaScript
• Homepage:
• Size: 572 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# PostCSS Expand Selectors

[![CircleCI](https://circleci.com/gh/Sweetchuck/npm-postcss-expand-selectors/tree/2.x.svg?style=svg)](https://circleci.com/gh/Sweetchuck/npm-postcss-expand-selectors/?branch=2.x)

[![codecov](https://codecov.io/gh/Sweetchuck/npm-postcss-expand-selectors/branch/2.x/graph/badge.svg?token=HSF16OGPyr)](https://app.codecov.io/gh/Sweetchuck/npm-postcss-expand-selectors/branch/2.x)

[PostCSS] plugin to expand comma separated selectors into individual rules.

**SCSS source**

```scss

a {

  e: f;

}

b,

c {

  g: h;

}

d {

  i: j;

}

```

Compile the SCSS files with these options: `{ sourceComments: true, outputStyle: 'expanded' }`

**CSS before**

```css

a {

  e: f;

}

/* line 4, style.css */

b,

c {

  g: h;

}

d {

  i: j;

}

```

## Usage

```javascript

postcss([ require('postcss-expand-selectors') ])

```

**CSS after**

```css

a {

  e: f;

}

/* line 4, style.css */

b {

  g: h;

}

/* line 4, style.css */

c {

  g: h;

}

d {

  i: j;

}

```

## When to use this plugin

If there are no comma separated selectors in a rule then you can get a

more accurate CSS coverage report from Google Chrome with Puppeteer.

So use this plugin only when you prepare your application for CSS coverage

generation with Google Chrome, but do not use this plugin when you create

production release.

[PostCSS]: https://postcss.org/