[chore] Upgrade css-tree version to 2.1.0 (#7572)

* chore: upgrade to css-tree major version

* fix: handle whitespace token for new ast

* fix: css syntax error

* remove @types/css-tree

* import css-tree/parser instead of file path import

Co-authored-by: tanhauhau <lhtan93@gmail.com>

package.json

@@ -118,7 +118,7 @@
     "@ampproject/remapping": "^0.3.0",
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-json": "^4.0.1",
-    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.0",
     "@rollup/plugin-sucrase": "^3.1.0",
     "@rollup/plugin-typescript": "^2.0.1",
@@ -134,7 +134,7 @@
     "aria-query": "^5.0.0",
     "axobject-query": "^3.0.1",
     "code-red": "^0.2.5",
-    "css-tree": "^1.1.2",
+    "css-tree": "^2.1.0",
     "eslint": "^8.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-svelte3": "^4.0.0",

src/compiler/compile/css/Selector.ts

@@ -212,7 +212,7 @@ function apply_selector(blocks: Block[], node: Element, to_encapsulate: Array<{
 	}
 
 	if (block.combinator) {
-		if (block.combinator.type === 'WhiteSpace') {
+		if (block.combinator.type === 'Combinator' && block.combinator.name === ' ') {
 			for (const ancestor_block of blocks) {
 				if (ancestor_block.global) {
 					continue;

src/compiler/parse/read/style.ts

@@ -1,4 +1,5 @@
-import parse from 'css-tree/lib/parser/index.js';
+// @ts-ignore
+import parse from 'css-tree/parser';
 import { walk } from 'estree-walker';
 import { Parser } from '../index';
 import { Node } from 'estree';

test/parser/samples/error-css/error.json

@@ -1,6 +1,6 @@
 {
 	"code": "css-syntax-error",
-	"message": "LeftCurlyBracket is expected",
+	"message": "\"{\" is expected",
 	"start": {
 		"line": 2,
 		"column": 16,