[CSS] Support custom properties (css variables)

[tonyganch]

https://www.w3.org/TR/css-variables/

[tonyganch]

From Sass 3.5 announcement:

So we decided on a compromise: we'd treat custom properties like we do selectors and at-rule values, and only allow #{} as a means of including Sass values. While technically this is plain CSS, it's a very small surface area and it's very easy to escape, so we're not too worried. This means that in 3.5 you can write:

 :host {
  --my-toolbar-theme: {
    background-color: #{$toolbar-background};
    border-radius: 4px;
    border: 1px solid gray;
  };
}

[eugef]

Right now parsing the css variable like --my-var: #ffffff gives an error Please check validity of the block starting from line

[hopefuture]

+1

[bgriffith]

Any thoughts on how to approach custom properties on a node level?

Would --my-var: #ffffff parse like a standard property? or would it have a customProperty node type?

-> declaration
| -> property
| | -> ident
| |    "--my-var"
| -> propertyDelimiter
|    ":"
| -> space
|    " "
| -> value
| | -> color
| |    "ffffff"

[dgattey]

Is this getting looked at? sass-lint relies on this AST, and as such, you can't write code with custom variables natively and run sass-lint on it. Seems like this issue has been open for 3 years, CSS variables are very much native at this point.

[jdalton]

Hi @dgattey!

I believe initial support landed via #276 in v4.2.0.

Note: There's an open issue #290 to add support for custom properties with interpolation that I'm actively working on.