https://github.com/alexstevovich/struct-css
[Node.js] Enables two-way conversion of raw CSS into a structured representation.
https://github.com/alexstevovich/struct-css
css nodejs struct structured-data webstandards
Last synced: 3 months ago
JSON representation
[Node.js] Enables two-way conversion of raw CSS into a structured representation.
- Host: GitHub
- URL: https://github.com/alexstevovich/struct-css
- Owner: alexstevovich
- License: apache-2.0
- Created: 2025-03-15T01:18:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-15T01:19:38.000Z (about 1 year ago)
- Last Synced: 2025-09-29T14:18:33.690Z (8 months ago)
- Topics: css, nodejs, struct, structured-data, webstandards
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# struct-css
> **Archetype:** Node.js package
**struct-css** enables two-way conversion of raw CSS into a structured JavaScript object representation and vice versa.
## Install
```js
npm install struct-css
```
## Usage
### structure
Converts raw CSS to a structured JavaScript representation.
```js
import { struct } from 'struct-css';
const cssString = 'div { color: blue; font-size: 16px; }';
const structure = struct(cssString);
console.log(structure);
console.log(structure.rules[0].declarations[0].property); // Output: 'color'
```
**Output** _(Prettyfied for example)_:
```js
{
"rules":
[
{
"selectors": ["div"],
"declarations":
[
{ "property": "color", "value": "blue" },
{ "property": "font-size", "value": "16px" }
],
"rules": []
}
]
}
```
### css
Converts a structured JavaScript representation back to raw CSS.
```js
import { css } from 'struct-css';
const structure = {
rules: [
{
selectors: ['div'],
declarations: [
{ property: 'color', value: 'blue' },
{ property: 'font-size', value: '16px' },
],
rules: [],
},
],
declarations: [],
};
const cssString = css(structure);
console.log(cssString);
```
**Output** Raw CSS string _Prettyfied for example_
```css
div {
color: blue;
font-size: 16px;
}
```
## License
Apache-2.0 License. See [LICENSE](LICENSE) for details.