als-css-parse

als-css-parse

als-css-parse is a JavaScript library for parsing CSS strings into a structured JSON format. This utility focuses on transforming CSS into a nested JSON object that represents the hierarchy and relationships of CSS rules. It is ideal for applications that need to programmatically analyze or manipulate stylesheets.

Features

• Converts CSS to JSON: The main functionality of als-css-parse is to take a CSS string and turn it into a structured JSON object.
• Preserves Global Comments: Comments that are not nested within CSS rules are preserved as plain text entries within the resulting JSON array.
• Simple and Out-of-the-Box: There are no configurations or settings to worry about. Just pass in a CSS string, and get back a JSON object.

Limitations

• Internal Comments Removal: Any comments placed inside CSS rules are removed during the parsing process.
• No CSS Validation: The parser does not validate CSS properties or selectors. It simply structures whatever CSS it is given.

Installation

To install als-css-parse, use npm:

npm install als-css-parse

Usage in the Browser

als-css-parse is also available as a bundled JavaScript file for direct use in web browsers. This allows you to leverage the CSS parsing capabilities in frontend applications.

Including the Script

Include the script in your HTML by referencing the bundled file located at node_modules/als-css-parse/css-parser.js:

<script src="path/to/your/node_modules/als-css-parse/css-parser.js"></script>

Make sure the path to the css-parser.js file matches the structure of your project.

Using the Parser

After including the script, you can use the global cssParser function to parse CSS strings into JSON. Simply call cssParser(cssString) where cssString is your CSS code. The function returns the parsed CSS as a JSON object, which you can manipulate or display as needed.

Usage

Basic Usage

Here's how you can use als-css-parse to convert a simple CSS string into JSON:

const cssParser = require('als-css-parse');

const cssString = `
/* Global comment */
body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  justify-content: center;
}
`;

const parsedCss = cssParser(cssString);
console.log(parsedCss);

This will output:

[
  "/* Global comment */",
  {
    "body": {
      "margin": "0",
      "padding": "0"
    }
  },
  {
    ".container": {
      "display": "flex",
      "justify-content": "center"
    }
  }
]

Advanced Example

Let's parse a more complex CSS with nested rules and media queries:

const cssString = `
@media screen and (max-width: 600px) {
  .container {
    display: block;
  }
  .item {
    padding: 10px;
  }
}
`;

const parsedCss = cssParser(cssString);
console.log(parsedCss);

This will output:

[
  {
    "@media screen and (max-width: 600px)": [
      {
        ".container": {
          "display": "block"
        }
      },
      {
        ".item": {
          "padding": "10px"
        }
      }
    ]
  }
]

Removing comments

You can remove the comments by using second parameter which is true by default.

abbr {
    color: chocolate;
}
/* some comment */ 
@media (hover: hover) {
    /* some multiline 
    inner comment 
    */ 
    abbr:hover {
      color: limegreen;
      transition-duration: 1s;
    }
}

const parsedCss = cssParser(cssString,false);

Result:

[
    {
        "abbr": {
            "color": "chocolate"
        }
    },
    {
        "@media (hover: hover)": [
            {
                "abbr:hover": {
                    "color": "limegreen",
                    "transition-duration": "1s"
                }
            }
        ]
    }
]