Skip to content

Instantly share code, notes, and snippets.

@tomhodgins
Last active January 21, 2020 20:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/4a3aa45b8e694acf60abf92e93a2ea54 to your computer and use it in GitHub Desktop.
Save tomhodgins/4a3aa45b8e694acf60abf92e93a2ea54 to your computer and use it in GitHub Desktop.

CSSON

CSS Object Notation

CSSON is a superset of JSON that is parsed according to CSS syntax.

Any JSON can be parsed as CSSON, though not every CSS Style Sheet can be parsed as CSSON.

Pros:

  • CSSON syntax is more expressive and forgiving than JSON syntax, making it friendlier to use
  • CSSON includes more types than JSON, allowing your environment to handle the pieces of information in a smarter way

Cons:

  • less built-in language support, compared to JSON or XML

CSSON Objects

JSON Types

  • <json-number>
  • <json-string>
  • <json-true>
  • <json-false>
  • <json-null>
  • <json-array>
  • <json-object>

CSS Types

It's JLJ (Just like JSON)

CSSON always attemps to parse a JSON type first, so 1 will always be a <json-number>, not a <css-number>.

Converting CSS Types to JSON Types

Rules

  • maximum one value per slot where a value could go
1      /* valid */
1 2 3  /* invalid */
{
  number: 1;      /* valid */
  number: 1 2 3;  /* invalid */ 
}
{
name: 'my_package';
description: '';
version: '1.0.0';
main: url(index.js);
scripts: {
test: "echo \"Error: no test specified\" && exit 1";
};
repository: {
type: 'git';
url: url(/my_package.git);
};
keywords: [];
author: '';
license: 'ISC';
bugs: {
url: url(/my_package/issues)
};
homepage: url(/my_package);
}
{
"name": "my_package",
"description": "",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "/my_package.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "/my_package/issues"
},
"homepage": "/my_package"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment