Home

Awesome

stylops

Write JSON as CSS

oclif Version Downloads/week License

<!-- toc --> <!-- tocstop -->

Why

MORE PAIN! NO GAIN!

Instead of make your work of write JSON (maybe YAML) configuration file better this will make it worse.

We really hope you didn't try to cheat using any pre-processor like stylus, sass, less, because if you do, your verbose CSS will gain features like variables, includes, mixins and etc, please don't do that.

Unintended side-effect, every selector merges objects deeply, this means that if you write your selector two times your object will:

  1. Merge properties
  2. Overwrite if exists

Fortunately, unlike any pre-processor or browser, include isn't supported, otherwise you could use it to make any included file change any property of final json, like happens when mutiple css files have same selector, example.

Please look at tests and anti-patterns to known what you should and shouldn't do.

TODO

Usage

<!-- usage --> 
$ npm install -g stylops
$ stylops (-v|--version|version)
stylops/0.0.1 linux-x64 node-v15.2.1
$ stylops --help 
USAGE
$ stylops -i test/fixture.css -o fixture.json
...
<!-- usagestop -->

Constraints

  1. Your root object is @page, ie:
/*
 {
  "root-property": "root property value"
 }
*/

@page {
  root-property: "root property value";
}
  1. Atributes should be valid json value (null, true, 3, "avocado")
/*
 {
    "root-property": 3.14
 }
*/

@page {
  root-property: 3.14;
}
  1. Your object property name is a tag selector, ie:
/*
 {
    "sub-obj": {
      "property": "value"
    }
 }
*/

sub-obj {
  property: "value";
}
  1. Array should be writed with :nth-child(index)
/*
 {
    "sub-obj": [
      {
        "property": "value"
      }
    ]
 }
*/

sub-obj :nth-child(0) {
  property: "value"
}

4.1 Simple Array (unstable)


/*
 {
    "sub-prop": [
      1,
      2.2,
      "string",
      false,
      null
    ]
 }
*/

@page {
  sub-prop: array(
    1,
    2.2,
    "string",
    false,
    null
  );
}

Related:

Posts

Projects

Notable implementations

Sometimes, we don't like a language used as config because, some developers did a poor job on the application side, like not validating it, or in the case o CSS presenting different behavior in different browsers.

Sometimes, it goes in oposite direction, not only implementing it well, but exteding its functionality to match application domain: