Update CSS rules for CSS Nesting

[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.

[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.

[jacobcassidy]

@microsoft-github-policy-service agree

[wesbos]

Any chance we can get some eyes on this @burkeholland?

Modern CSS highlighting is very broken in VS code right now

[romainmenke]

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

[romainmenke]

Hi @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

[jacobcassidy]

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

[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.

[romainmenke]

@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; }

[jacobcassidy]

@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.

[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

[jacobcassidy]

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

[thernstig]

@jacobcassidy are you able to progress this? 😄

[jacobcassidy]

@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.

[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

[romainmenke]

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

[torresgol10]

@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.