Update CSS rules for CSS Nesting

[Jacob Cassidy (jacobcassidy)]

This PR converts the CSS Nesting Syntax Highlighting extension additions to CSON for vscode-css. The extension has 3000+ downloads with no reported errors.

This should fix #9 and #15.

[Jacob Cassidy (jacobcassidy)]

I currently have limited time, so if anyone else wants to test the updated css.cson file, that would help speed up the progress.

[Jacob Cassidy (jacobcassidy)]

@microsoft-github-policy-service agree

[Wes Bos (wesbos)]

Any chance we can get some eyes on this Burke Holland (@burkeholland)?

Modern CSS highlighting is very broken in VS code right now

[Romain Menke (romainmenke)]

We really should have tests first:
See: #9 (comment)

[Romain Menke (romainmenke)]

Hi Jacob Cassidy (@jacobcassidy)

Thank you for working on this!
The test setup for this package is back, I went ahead and tried your changes to check for regressions. It seems that there is an issue somewhere that is causing most rule contents to be considered as meta.at-rule.container.body.css instead of the expected meta.property-list.css

You can run the tests yourself by updating this branch and running npm run test

[Jacob Cassidy (jacobcassidy)]

Romain Menke (@romainmenke), Awesome, I'll update this branch based on the test during the next chance I have.

[Jacob Cassidy (jacobcassidy)]

The css.cson scopes are now refactored to pass all tests. The only test that doesn't pass is an incorrect test that is fixed with PR #39.

I'll push an update to the CSS Nesting Syntax Highlighting extension soon for anyone who wants to test the updated syntax highlighting scopes easily.

[Romain Menke (romainmenke)]

Jacob Cassidy (@jacobcassidy) Thank you for continuing to work on this 🎉
Can you also add some test coverage?

When testing this PR I for example noticed that json encoded values don't work as expected:

it('tokenizes custom properties with json encoded values', function () {
	var tokens;
	tokens = testGrammar.tokenizeLine(':root { --json-1: {"foo":true}; --json-2: {"bar":false}; }').tokens;
	assert.deepStrictEqual(tokens[5], { scopes: ['source.css', 'meta.property-list.css', 'variable.css'], value: '--json-1' });
	assert.deepStrictEqual(tokens[6], { scopes: ['source.css', 'meta.property-list.css', 'punctuation.separator.key-value.css'], value: ':' });
	assert.deepStrictEqual(tokens[7], { scopes: ['source.css', 'meta.property-list.css'], value: ' ' });
	assert.deepStrictEqual(tokens[8], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css'], value: '{' });
	assert.deepStrictEqual(tokens[9], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css', 'string.quoted.double.css', 'punctuation.definition.string.begin.css'], value: '"' });
	assert.deepStrictEqual(tokens[10], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css', 'string.quoted.double.css'], value: 'foo' });
	assert.deepStrictEqual(tokens[11], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css', 'string.quoted.double.css', 'punctuation.definition.string.end.css'], value: '"' });
	assert.deepStrictEqual(tokens[12], { scopes: ['source.css', 'meta.property-list.css', 'meta.property-value.css'], value: ':true' });
	assert.deepStrictEqual(tokens[13], { scopes: ['source.css', 'meta.property-list.css', 'punctuation.section.property-list.end.bracket.curly.css'], value: '}' });
	assert.deepStrictEqual(tokens[14], { scopes: ['source.css'], value: '; --json-2: ' });
	assert.deepStrictEqual(tokens[15], { scopes: ['source.css', 'meta.property-list.css', 'punctuation.section.property-list.begin.bracket.curly.css'], value: '{' });
	assert.deepStrictEqual(tokens[16], { scopes: ['source.css', 'meta.property-list.css'], value: '"' });
});

Notice how token 14 suddenly produces: ; --json-2:

---

I these aspects would be good to have test coverage for:

• selectors that start with type selectors: .foo { a { color: green } }
• pseudo selectors: .foo { a:after { color: green } }
• functional pseudo's: .foo { a:is(.bar) { color: green } }
• implicit style rules: @scope (html) { background-color: green; }
• property values that have {}: .foo { --json: {}; color: green; }
• curly braces as grouping for comma separated values: .foo { color: --foo({1, 2, 3}, 4); font-size: 1px; }
• if conditions: .foo { color: if(style(--color: white): black; else: white); font-size: 1px; }

[Jacob Cassidy (jacobcassidy)]

Romain Menke (@romainmenke) Can you link me to the documentation for using the following?

/* Property values that have unquoted {} */
.foo { --json: {}; color: green; }

/* Curly braces as grouping for comma-separated values:  */
.foo { color: --foo({1, 2, 3}, 4); font-size: 1px; }

/* If conditions:  */
.foo { color: if(style(--color: white): black; else: white); font-size: 1px; }

As far as I know, these are not valid CSS expressions.

[Romain Menke (romainmenke)]

.foo { --json: {}; color: green; }

Storing JSON encoded data was one of the use cases in mind when custom properties in CSS were specced. It isn't explicitly listed in the spec (I think), but you can still test for it:

https://codepen.io/romainmenke/pen/JodWbOm?editors=1111

---

.foo { color: --foo({1, 2, 3}, 4); font-size: 1px; }

See: https://drafts.csswg.org/css-mixins-1/#example-2fcd7f28

A comma-containing value may be passed as a single argument by wrapping the value in curly braces, {}:

---

.foo { color: if(style(--color: white): black; else: white); font-size: 1px; }

See: https://drafts.csswg.org/css-values-5/#if-notation

[Jacob Cassidy (jacobcassidy)]

Romain Menke (@romainmenke) Thanks for the links. I'll look into this during the next downtime I have.

[Tobias Hernstig (thernstig)]

Jacob Cassidy (@jacobcassidy) are you able to progress this? 😄

[Jacob Cassidy (jacobcassidy)]

Tobias Hernstig (@thernstig) Unfortunately, with a newborn, I no longer have free time. Someone else will need to take over where I left off, or it will need to become a paid project.

[Ivan Torres (torresgol10)]

I have resumed this PR, resolved the issues that were mentioned, and added some tests. I have created a new PR based on this PR. #47

[Romain Menke (romainmenke)]

Thank you for working on this Ivan Torres (@torresgol10)
But I don't really understand.
The issues mentioned in this comment don't seem to have been fixed 🤔

[Ivan Torres (torresgol10)]

Romain Menke (@romainmenke) Thank you for the feedback! I apologize, I missed the previous comment regarding those issues. I have now addressed them and pushed the fixes to the PR. Please let me know if everything looks correct now.

[Tobias Hernstig (thernstig)]

I am confused as to why this was merged. Didn't #47 supersede this one?

[Romain Menke (romainmenke)]

I think that is purely GitHub UI.
As #47 wasn't squash merged and #47 includes all the commits from this PR.