open-index/open-npm huggingface dataset:
npm package: @samshull/parsecss
Description: Simple tool to parse CSS into a JSON structure.
Author: Michael Yong
Latest version: 1.2.0

# parsecss

Convert CSS Stylesheets into a simple JSON structure.

`parsecss` was written to support critical CSS inlining on dynamic pages. The
JSON structure it produces is optimized for figuring out which CSS rules should
be applied to a given page. We use [postcss](https://github.com/postcss/postcss)
to do most of the heavy lifting, but our JSON output makes it easier to use than
an AST for certain use cases.

[![Hex.pm](https://img.shields.io/hexpm/l/plug.svg)](LICENSE)
[![Build Status](https://travis-ci.org/quora/parsecss.svg?branch=master)](https://travis-ci.org/quora/parsecss)

## Installation

```
npm install -g parsecss
```

## Usage

To use `parsecss` you simply pass it the contents of a CSS stylesheet (or path).

```bash
parsecss -f path/to/file.css

// via stdin
cat path/to/file.css | parsecss
```

You can also use `parsecss` programatically in node:

```js
var parseCSS = require('parsecss');
var output = parseCSS(css);
```

## JSON Structure

`parsecss` was written to support critical CSS inlining on dynamic pages. As
such, the JSON structure it produces is optimized for figuring out which CSS
rules should be applied to a given page.

### Terminology:

1. Rules - A _CSS rule_ refers to a selector + its declarations.
2. Selectors - For each rule, the _selectors_ define which elements are affected.

We consider each rule in a `@media` query as its own rule to ensure that we
don't miss out on any rules that should be included.

### Global Rules

We consider all rules with selectors that don't contain class names to be
global. Since we don't use IDs in our CSS selectors, this effectively means that
all rules that directly affect tags (eg. html, body, a) are global.

### Class List Pairs

For each non global rule, we parse the class names that are contained in it
(accounting for pseudo selectors).

Eg. `.home .link.a {}` => `['home', 'link']`

### `@font-face` Rules

These rules are split into their own section since they are almost always
critical and are required to fetch the fonts as soon as possible.

### Keyframes

Keyframe rules are parsed so that they are keyed by their names to allow for
conditional inclusion of certain critical keyframes on the page.

## Sample Output

Each rule in the output is minified using `cssmin`.

```json
{
    "globalCss": ["footer{display:none}", "a{text-decoration:underline}"],
    "fontfaceCss": ["@font-face{...}"],
    "keyframesCss":[
        ["fadeOut","@keyframes fadeOut{from{opacity:1}to{opacity:0}}"],
        ["fadeInUp","@-webkit-keyframes fadeInUp{}"]
    ],
    "classListCssPairs": [
        [["Button","Topic"],".Button.Topic{border:0}"],
        [["NavHeader","link"],"@media screen and (max-width:434px){.NavHeader .link{...}}"],
    ]
}
```