chore(deps): upgrade to latest stable (#2941)

* chore(deps): upgrade to latest stable - adjust to newer postcss container.nodes maybe undefined. most code already protected it one way or another. - added missing project refs - use EXPERIMENTAL_useProjectService in typescript-eslint. it supports project refs properly. - regenerated lock file from scratch * refactor: use reference to eslint enum instead of string * fix: actually check unprotected nodes access --------- Co-authored-by: Ido Rosenthal <[email protected]>
wix · Mar 5, 2024 · 2a3d598 · 2a3d598
1 parent 3c63e6f
commit 2a3d598
Show file tree

Hide file tree

Showing 24 changed files with 546 additions and 399 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -15,7 +15,7 @@
     {
       "files": ["*.ts", "*.tsx"],
       "parserOptions": {
-        "project": "./tsconfig.base.json"
+        "EXPERIMENTAL_useProjectService": true
       },
       "extends": [
         "plugin:@typescript-eslint/recommended",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,13 +39,13 @@
     "@types/mocha": "^10.0.6",
     "@types/node": "18",
     "@types/postcss-safe-parser": "^5.0.4",
-    "@types/react": "^18.2.50",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/validate-npm-package-name": "^4.0.2",
     "@types/yargs": "^17.0.32",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
-    "@typescript-eslint/rule-tester": "^6.20.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/rule-tester": "^7.0.1",
     "autoprefixer": "^10.4.17",
     "c8": "^9.1.0",
     "chai": "^4.3.10",
@@ -55,26 +55,26 @@
     "eslint-config-prettier": "^9.1.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
-    "mini-css-extract-plugin": "^2.7.7",
-    "mocha": "^10.2.0",
+    "mini-css-extract-plugin": "^2.8.0",
+    "mocha": "^10.3.0",
     "node-eval": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "playwright-chromium": "^1.41.1",
-    "postcss": "^8.4.33",
+    "playwright-chromium": "^1.41.2",
+    "postcss": "^8.4.35",
     "promise-assist": "^2.0.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.6",
+    "rollup": "^4.12.0",
     "source-map": "^0.7.4",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.4",
     "ts-expect": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "~5.3.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.90.0",
+    "webpack": "^5.90.2",
     "yargs": "^17.7.2"
   },
   "engines": {

diff --git a/packages/code-formatter/package.json b/packages/code-formatter/package.json
@@ -9,8 +9,8 @@
   "dependencies": {
     "@stylable/core": "^5.16.0",
     "@tokey/css-value-parser": "^0.1.4",
-    "js-beautify": "^1.14.11",
-    "postcss": "^8.4.33"
+    "js-beautify": "^1.15.1",
+    "postcss": "^8.4.35"
   },
   "files": [
     "dist",

diff --git a/packages/code-formatter/src/format-css.ts b/packages/code-formatter/src/format-css.ts
@@ -206,8 +206,8 @@ function formatAst(ast: AnyNode, index: number, options: FormatOptions) {
         }
     }
     if ('nodes' in ast) {
-        for (let i = 0; i < ast.nodes.length; i++) {
-            formatAst(ast.nodes[i], i, {
+        for (let i = 0; i < ast.nodes!.length; i++) {
+            formatAst(ast.nodes![i], i, {
                 endOfLine: NL,
                 indent,
                 indentLevel: indentLevel + 1,

diff --git a/packages/core-test-kit/package.json b/packages/core-test-kit/package.json
@@ -11,7 +11,7 @@
     "@stylable/core": "^5.16.0",
     "chai": "^4.3.10",
     "flat": "^5.0.2",
-    "postcss": "^8.4.33"
+    "postcss": "^8.4.35"
   },
   "files": [
     "dist",

diff --git a/packages/core-test-kit/src/match-rules.ts b/packages/core-test-kit/src/match-rules.ts
@@ -7,6 +7,9 @@ export function matchRuleAndDeclaration(
     decl: string,
     msg?: string
 ) {
+    if (!parent.nodes) {
+        throw new Error(`${msg ? msg + ' ' : ''}expected nested nodes`);
+    }
     const rule = parent.nodes[selectorIndex] as postcss.Rule;
     if (rule.selector !== selector) {
         throw new Error(

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -16,7 +16,7 @@
     "is-vendor-prefixed": "^4.0.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.clonedeepwith": "^4.5.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-js": "^4.0.1",
     "postcss-nested": "^6.0.1",
     "postcss-safe-parser": "^7.0.0",

diff --git a/packages/core/src/helpers/custom-state.ts b/packages/core/src/helpers/custom-state.ts
@@ -794,7 +794,7 @@ export function validateRuleStateDefinition(
                             true,
                             !!stateParam.defaultValue
                         );
-                        if (errors) {
+                        if (errors && selectorNode.nodes) {
                             for (const node of selectorNode.nodes) {
                                 if (node.type === 'decl' && node.prop === `-st-states`) {
                                     diagnostics.report(

diff --git a/packages/core/src/helpers/rule.ts b/packages/core/src/helpers/rule.ts
@@ -54,7 +54,7 @@ export function createSubsetAst<T extends postcss.Root | postcss.AtRule | postcs
     const prefixType = prefixSelectorList[0].nodes[0];
     const containsPrefix = containsMatchInFirstChunk.bind(null, prefixType);
     const mixinRoot = mixinTarget ? mixinTarget : postcss.root();
-    root.nodes.forEach((node) => {
+    root.nodes?.forEach((node) => {
         if (node.type === 'decl') {
             mixinTarget?.append(node.clone());
         } else if (

diff --git a/packages/core/test/helpers/rule.spec.ts b/packages/core/test/helpers/rule.spec.ts
@@ -96,7 +96,7 @@ describe(`helpers/rule`, () => {
                 },
             ];
 
-            testMatcher(expected, res.nodes);
+            testMatcher(expected, res.nodes!);
         });
 
         it('should extract global when creating root chunk', () => {
@@ -115,7 +115,7 @@ describe(`helpers/rule`, () => {
                 { selector: ':global(.x) [st-mixin-marker]' },
             ];
 
-            testMatcher(expected, res.nodes);
+            testMatcher(expected, res.nodes!);
         });
 
         it('should parts under @media', () => {
@@ -144,7 +144,7 @@ describe(`helpers/rule`, () => {
                 },
             ];
 
-            testMatcher(expected, res.nodes);
+            testMatcher(expected, res.nodes!);
         });
 
         it('should not append empty media', () => {
@@ -160,7 +160,7 @@ describe(`helpers/rule`, () => {
 
             const expected = [{ selector: '[st-mixin-marker]' }];
 
-            testMatcher(expected, res.nodes);
+            testMatcher(expected, res.nodes!);
         });
     });
 });
diff --git a/packages/core/test/scope-directive.spec.ts b/packages/core/test/scope-directive.spec.ts
@@ -450,7 +450,7 @@ describe('@st-scope', () => {
             shouldReportNoDiagnostics(meta);
 
             const atRule = meta.targetAst!.nodes[0] as AtRule;
-            const rule = atRule.nodes[0] as Rule;
+            const rule = atRule.nodes![0] as Rule;
             expect(rule.selector).to.equal('.entry__root .entry__part');
         });
     });

diff --git a/packages/dom-test-kit/test/tsconfig.json b/packages/dom-test-kit/test/tsconfig.json
@@ -4,5 +4,9 @@
     "outDir": "../dist/test",
     "types": ["node", "externals", "mocha"]
   },
-  "references": [{ "path": "../../runtime/src" }, { "path": "../src" }]
+  "references": [
+    { "path": "../../runtime/src" },
+    { "path": "../../core-test-kit/src" },
+    { "path": "../src" }
+  ]
 }
diff --git a/packages/e2e-test-kit/package.json b/packages/e2e-test-kit/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@stylable/runtime": "^5.16.0",
     "node-eval": "^2.0.0",
-    "playwright-core": "^1.41.1",
+    "playwright-core": "^1.41.2",
     "rimraf": "^5.0.5"
   },
   "files": [

diff --git a/packages/eslint-plugin-stylable/package.json b/packages/eslint-plugin-stylable/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "@file-services/node": "^8.3.3",
     "@stylable/core": "^5.16.0",
-    "@typescript-eslint/utils": "^6.20.0",
+    "@typescript-eslint/utils": "^7.0.1",
+    "@typescript-eslint/scope-manager": "^7.0.1",
     "postcss-safe-parser": "^7.0.0"
   },
   "keywords": [

diff --git a/packages/eslint-plugin-stylable/src/stylable-es-lint.ts b/packages/eslint-plugin-stylable/src/stylable-es-lint.ts
@@ -8,6 +8,7 @@ import {
     ASTUtils,
     TSESTree as esTree,
 } from '@typescript-eslint/utils';
+import { DefinitionType } from '@typescript-eslint/scope-manager';
 import { createRequire } from 'node:module';
 import { pathToFileURL } from 'node:url';
 
@@ -78,7 +79,9 @@ export default createRule({
                                 return;
                             }
                             const { type } = varDefs.defs[varDefs.defs.length - 1];
-                            return local.name === varDefs.name && type === 'ImportBinding';
+                            return (
+                                local.name === varDefs.name && type === DefinitionType.ImportBinding
+                            );
                         });
 
                         if (!variable) {

diff --git a/packages/language-service/package.json b/packages/language-service/package.json
@@ -19,7 +19,7 @@
     "@tokey/css-selector-parser": "^0.6.2",
     "@tokey/css-value-parser": "^0.1.4",
     "css-selector-tokenizer": "^0.8.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-value-parser": "^4.2.0",
     "vscode-css-languageservice": "^6.2.12",
     "vscode-languageserver": "^9.0.1",

diff --git a/packages/language-service/src/lib-new/ast-from-position.ts b/packages/language-service/src/lib-new/ast-from-position.ts
@@ -70,7 +70,8 @@ export interface AstLocationResult {
     atRuleParams: (AstLocation & { type: 'atRuleParams' }) | undefined;
 }
 function isClosed(node: postcss.AnyNode) {
-    const isLast = node.parent && node.parent.nodes[node.parent.nodes.length - 1] === node;
+    const parentNodes = node.parent?.nodes;
+    const isLast = parentNodes?.[parentNodes.length - 1] === node;
     if (node.type === 'decl' || (node.type === 'atrule' && !node.nodes)) {
         return isLast ? node.parent?.raws.semicolon : true;
     }

diff --git a/packages/language-service/src/lib-new/edit-time-parser.ts b/packages/language-service/src/lib-new/edit-time-parser.ts
@@ -257,7 +257,8 @@ class EditTimeParser extends Parser {
                 tokens.splice(colonIndex, 0, ['word', '', colonToken[2], colonToken[2]]);
             }
             this.decl(tokens, customProperty);
-            node = this.current.nodes[this.current.nodes.length - 1] as postcss.Declaration;
+            const nodes = this.current.nodes;
+            node = nodes?.[nodes.length - 1] as postcss.Declaration;
             this.reportNode(node, 'ambiguity', AMBIGUITY.POSSIBLE_UNOPENED_RULE);
         } else {
             // ambiguity: might be a rule or a declaration

diff --git a/packages/language-service/src/lib/utils/postcss-ast-utils.ts b/packages/language-service/src/lib/utils/postcss-ast-utils.ts
@@ -22,11 +22,11 @@ export function isInNode(
         return false;
     }
     if (!nodeEnd) {
-        return (
-            !isBeforeRuleset(position, node) ||
-            (!!(node as postcss.Container).nodes &&
-                !!((node as postcss.Container).nodes.length > 0))
-        );
+        if (!isBeforeRuleset(position, node)) {
+            return true;
+        }
+        const nodes = (node as postcss.Container).nodes;
+        return nodes ? nodes.length > 0 : false;
     }
     if (nodeEnd.line < position.line) {
         return false;

diff --git a/packages/language-service/src/tsconfig.json b/packages/language-service/src/tsconfig.json
@@ -3,5 +3,5 @@
   "compilerOptions": {
     "outDir": "../dist"
   },
-  "references": [{ "path": "../../core/src" }]
+  "references": [{ "path": "../../core/src" }, { "path": "../../code-formatter/src" }]
 }
diff --git a/packages/optimizer/package.json b/packages/optimizer/package.json
@@ -10,7 +10,7 @@
     "@stylable/core": "^5.16.0",
     "@tokey/css-selector-parser": "^0.6.2",
     "csso": "^5.0.5",
-    "postcss": "^8.4.33"
+    "postcss": "^8.4.35"
   },
   "files": [
     "dist",

diff --git a/packages/optimizer/src/stylable-optimizer.ts b/packages/optimizer/src/stylable-optimizer.ts
@@ -8,7 +8,7 @@ import {
 } from '@stylable/core/dist/index-internal';
 import { parseCssSelector, stringifySelectorAst, Selector, walk } from '@tokey/css-selector-parser';
 import csso from 'csso';
-import postcss, { Root, Rule, Node, Comment, Container } from 'postcss';
+import postcss, { Root, Rule, Node, Comment } from 'postcss';
 import { NameMapper } from './name-mapper';
 
 const { booleanStateDelimiter } = STCustomState.delimiters;
@@ -313,7 +313,7 @@ export function replaceRecursiveUpIfEmpty(label: string, node: Node) {
         parent &&
         parent.type !== 'document' &&
         parent.nodes &&
-        (parent as Container).nodes.filter((node) => node.type !== 'comment').length === 0
+        parent.nodes.filter((node) => node.type !== 'comment').length === 0
     ) {
         replaceRecursiveUpIfEmpty('EMPTY_NODE', parent);
     }

diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
@@ -20,7 +20,7 @@
     "decache": "^4.6.2",
     "enhanced-resolve": "^5.15.0",
     "lodash.clonedeep": "^4.5.0",
-    "postcss": "^8.4.33"
+    "postcss": "^8.4.35"
   },
   "files": [
     "dist",