https://github.com/maxhoffmann/ocss-parser
:fax: syntax parser for the OCSS preprocessor
https://github.com/maxhoffmann/ocss-parser
css syntax-parser
Last synced: 6 months ago
JSON representation
:fax: syntax parser for the OCSS preprocessor
- Host: GitHub
- URL: https://github.com/maxhoffmann/ocss-parser
- Owner: maxhoffmann
- License: mit
- Created: 2014-08-24T19:47:01.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-04-11T12:35:00.000Z (over 9 years ago)
- Last Synced: 2024-11-17T12:48:19.263Z (about 1 year ago)
- Topics: css, syntax-parser
- Language: JavaScript
- Homepage: http://maxhoffmann.github.io/ocss-parser/
- Size: 390 KB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ocss-parser
===========
[![version][1]][2]
[![build][3]][4]
This is the repository for the syntax parser and stringifier of the [OCSS preprocessor][5]. You can try it out in the [live editor][6].
Input
-----
```
display: block
color: red
child // comment
color: blue
background: transparent
:hover
color: red
subchild
font-size: 12px
// another comment
=big
font-size: 200%
child
color: red
```
AST Output
----------
```json
{
"type": "object",
"name": "test",
"declarations": [
{
"position": {
"line": 1
},
"type": "declaration",
"property": "display",
"value": "block"
},
{
"position": {
"line": 2
},
"type": "declaration",
"property": "color",
"value": "red"
}
],
"elements": [
{
"position": {
"line": 4
},
"type": "element",
"name": "child",
"declarations": [
{
"position": {
"line": 5
},
"type": "declaration",
"property": "color",
"value": "blue"
},
{
"position": {
"line": 6
},
"type": "declaration",
"property": "background",
"value": "transparent"
}
],
"pseudoelements": [
{
"position": {
"line": 8
},
"type": "pseudoelement",
"name": "hover",
"declarations": [
{
"position": {
"line": 9
},
"type": "declaration",
"property": "color",
"value": "red"
}
]
}
],
"elements": [
{
"position": {
"line": 11
},
"type": "element",
"name": "subchild",
"declarations": [
{
"position": {
"line": 12
},
"type": "declaration",
"property": "font-size",
"value": "12px"
}
]
}
]
}
],
"modifiers": [
{
"position": {
"line": 14
},
"type": "modifier",
"name": "big",
"declarations": [
{
"position": {
"line": 15
},
"type": "declaration",
"property": "font-size",
"value": "200%"
}
],
"elements": [
{
"position": {
"line": 17
},
"type": "element",
"name": "child",
"declarations": [
{
"position": {
"line": 18
},
"type": "declaration",
"property": "color",
"value": "red"
}
]
}
]
}
]
}
```
CSS Output
----------
```css
.test {
display: block;
color: red;
}
.test-child {
color: blue;
background: transparent;
}
.test-child-subchild {
font-size: 12px;
}
.test-child:hover {
color: red;
}
.test--big {
font-size: 200%;
}
.test--big .test-child {
color: red;
}
```
Tests
-----
Install dependencies with `npm install` once. Afterwards run `npm test` every time you want to start the tests.
[1]: http://img.shields.io/npm/v/ocss-parser.svg?style=flat
[2]: https://www.npmjs.org/package/ocss-parser
[3]: http://img.shields.io/travis/maxhoffmann/ocss-parser.svg?style=flat
[4]: https://travis-ci.org/maxhoffmann/ocss-parser
[5]: https://github.com/maxhoffmann/ocss
[6]: http://maxhoffmann.github.io/ocss-parser/