ShatterCSS

ShatterCSS enables two-way conversion of raw CSS into a structured JavaScript object representation and vice versa.

Install

npm install shattercss

Usage

Shatter

Converts raw CSS to a structured JavaScript representation.

import { cssToStructure } from 'shattercss';

const cssString = 'div { color: blue; font-size: 16px; }';
const structure = cssToStructure(cssString);

console.log(structure);
console.log(structure.rules[0].declarations[0].property); // Output: 'color'

Output (Prettyfied for example):

{
	"rules":
	[
		{
		"selectors": ["div"],
		"declarations":
			[
				{ "property": "color", "value": "blue" },
				{ "property": "font-size", "value": "16px" }
			],
		"rules": []
		}
	]
}

Unshatter

Converts a structured JavaScript representation back to raw CSS.

import { structureToCss } from 'shattercss';

const structure = {
    rules: [
        {
            selectors: ['div'],
            declarations: [
                { property: 'color', value: 'blue' },
                { property: 'font-size', value: '16px' },
            ],
            rules: [],
        },
    ],
    declarations: [],
};

const cssString = structureToCss(structure);
console.log(cssString);

Output Raw CSS string Prettyfied for example

div {
    color: blue;
    font-size: 16px;
}

Want to Shatter More?

https://github.com/alexstevovich/shatterjs

License

Apache-2.0 License. See LICENSE for details.