Making JavaScript more CSS friendly.

Let's assume that JS is used mostly in context of Web (in browser or node/deno) so it would be nice for JS to allow to write CSS "directly" - so for JS syntax to include CSS syntax (at least partially) .

All below is based on Sciter's script that was designed to better (than JS) serve "language-behind- UI" role. Yet below ideas are 100% backward compatible - existing code will work as it is.

Proposal #1, syntax-only, object literals

In object literals allow ; to be used as , name/value pairs separators. So

{
   font: "system";
   opacity:0.5;
}

will be a valid object literal. As far as I know it will not break existing code.

Proposal #2, syntax-only, object literals

To use CSS's nmtoken production in field names. CSS's name token matches JS name token but also allows - inside names. So this

{
   font-family: "system";
   opacity:0.5;
}

will be a direct equivalent of

{
   "font-family": "system";
   opacity:0.5;
}

Proposal #3, syntax & runtime

To introduce Tuple type.

Tuple is a) tagged and b) immutable vector/array. Tuple literals look close to array literals :

[ nmtoken ':' element1, element2, ...]

Motivation: CSS uses "functions" in notation that are actually tuples - not functions.

So this CSS declaration:

{
   background-color: rgb(255,0,0) ;
}

Can be expressed in JS++ as

{
   background-color: [rgb:255,0,0];
}

or with some helper CSS namespace object as:

{
   background-color: CSS.rgb(255,0,0);
}

Tuple class is essentially Array class a) without mutating methods and b) with .tag:string property.

Proposal #4, syntax-only, numbers with units

For parser to support units, so this JS++ construct

{
   border-width: 0.5em;
}

will be translated to tuple as:

{
   border-width: [em:0.5];
}

FYI : I am running campaign to Open Source Sciter now.

Proposal one is a block with two labeled statements, is it not?

No.

  1. Labels cannot appear in object literals;
  2. When JS parser gets opening { it knows exactly is it block or object literal.