Merge branch 'master' into barak/uni-runtime-2

package.json

@@ -18,66 +18,62 @@
     "prettify": "npx prettier . --write"
   },
   "devDependencies": {
-    "@file-services/memory": "^8.3.1",
-    "@file-services/node": "^8.3.1",
-    "@rollup/plugin-html": "^1.0.2",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@types/balanced-match": "^1.0.4",
-    "@types/chai": "^4.3.6",
-    "@types/chai-subset": "^1.3.3",
-    "@types/css-selector-tokenizer": "^0.7.2",
-    "@types/cssesc": "^3.0.0",
-    "@types/csso": "^5.0.1",
-    "@types/find-config": "^1.0.2",
-    "@types/flat": "^5.0.3",
-    "@types/js-beautify": "^1.14.1",
-    "@types/json-schema": "^7.0.13",
-    "@types/lodash.camelcase": "^4.3.7",
-    "@types/lodash.clonedeep": "^4.5.7",
-    "@types/lodash.clonedeepwith": "^4.5.7",
-    "@types/lodash.findlast": "^4.6.7",
-    "@types/lodash.upperfirst": "^4.3.7",
-    "@types/memory-fs": "^0.3.4",
-    "@types/mime": "^3.0.2",
-    "@types/mocha": "^10.0.2",
+    "@file-services/memory": "^8.3.2",
+    "@file-services/node": "^8.3.2",
+    "@rollup/plugin-html": "^1.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/chai": "^4.3.9",
+    "@types/chai-subset": "^1.3.4",
+    "@types/css-selector-tokenizer": "^0.7.3",
+    "@types/cssesc": "^3.0.1",
+    "@types/csso": "^5.0.2",
+    "@types/find-config": "^1.0.3",
+    "@types/flat": "^5.0.4",
+    "@types/js-beautify": "^1.14.2",
+    "@types/json-schema": "^7.0.14",
+    "@types/lodash.camelcase": "^4.3.8",
+    "@types/lodash.clonedeep": "^4.5.8",
+    "@types/lodash.clonedeepwith": "^4.5.8",
+    "@types/lodash.upperfirst": "^4.3.8",
+    "@types/mime": "^3.0.3",
+    "@types/mocha": "^10.0.3",
     "@types/node": "18",
-    "@types/postcss-safe-parser": "^5.0.2",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "@types/semver": "^7.5.3",
-    "@types/validate-npm-package-name": "^4.0.0",
-    "@types/yargs": "^17.0.25",
+    "@types/postcss-safe-parser": "^5.0.3",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "@types/validate-npm-package-name": "^4.0.1",
+    "@types/yargs": "^17.0.29",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "autoprefixer": "^10.4.16",
     "c8": "^8.0.1",
-    "chai": "^4.3.9",
+    "chai": "^4.3.10",
     "chai-subset": "^1.6.0",
     "create-listening-server": "^2.1.0",
-    "eslint": "^8.50.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
     "mocha": "^10.2.0",
     "node-eval": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "playwright-chromium": "^1.38.1",
-    "postcss": "^8.4.30",
+    "playwright-chromium": "^1.39.0",
+    "postcss": "^8.4.31",
     "promise-assist": "^2.0.1",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.3",
+    "rollup": "^4.1.4",
     "source-map": "^0.7.4",
     "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.3",
     "ts-expect": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "~5.2.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "yargs": "^17.7.2"
   },
   "engines": {

packages/cli/package.json

@@ -12,8 +12,8 @@
     "test": "mocha \"./dist/test/**/*.spec.js\" --timeout 25000"
   },
   "dependencies": {
-    "@file-services/node": "^8.3.1",
-    "@file-services/types": "^8.3.1",
+    "@file-services/node": "^8.3.2",
+    "@file-services/types": "^8.3.2",
     "@stylable/build-tools": "^5.16.0",
     "@stylable/code-formatter": "^5.16.0",
     "@stylable/core": "^5.16.0",

packages/cli/src/build-single-file.ts

@@ -153,7 +153,7 @@ export function buildSingleFile({
         outputLogs.push(`${format} module`);
 
         const moduleCssImports = collectImportsWithSideEffects(res, stylable, ext);
-        const cssDepth = res.meta.transformCssDepth?.cssDepth ?? 0;
+        const cssDepth = res.meta.transformCssDepth?.cssDepth ?? 1;
         if (injectCSSRequest) {
             moduleCssImports.push({ from: './' + cssAssetFilename });
         }

packages/cli/src/build.ts

@@ -407,7 +407,7 @@ function bundleFiles({
             if (!meta.transformCssDepth) {
                 stylable.transform(meta);
             }
-            return meta.transformCssDepth?.cssDepth ?? 0;
+            return meta.transformCssDepth?.cssDepth ?? 1;
         },
         (m) => {
             return m;

packages/code-formatter/package.json

@@ -10,7 +10,7 @@
     "@stylable/core": "^5.16.0",
     "@tokey/css-value-parser": "^0.1.4",
     "js-beautify": "^1.14.9",
-    "postcss": "^8.4.30"
+    "postcss": "^8.4.31"
   },
   "files": [
     "dist",

packages/core-test-kit/package.json

@@ -7,11 +7,11 @@
     "test": "mocha \"./dist/test/**/*.spec.js\""
   },
   "dependencies": {
-    "@file-services/memory": "^8.3.1",
+    "@file-services/memory": "^8.3.2",
     "@stylable/core": "^5.16.0",
-    "chai": "^4.3.9",
+    "chai": "^4.3.10",
     "flat": "^5.0.2",
-    "postcss": "^8.4.30"
+    "postcss": "^8.4.31"
   },
   "files": [
     "dist",

packages/core/package.json

@@ -7,20 +7,19 @@
     "test": "mocha \"./dist/test/**/*.spec.js\""
   },
   "dependencies": {
-    "@file-services/resolve": "^8.2.0",
+    "@file-services/resolve": "^8.3.2",
     "@tokey/css-selector-parser": "^0.6.2",
     "@tokey/css-value-parser": "^0.1.4",
     "@tokey/imports-parser": "^1.0.0",
-    "balanced-match": "^2.0.0",
     "css-selector-tokenizer": "^0.8.0",
     "cssesc": "^3.0.0",
     "is-vendor-prefixed": "^4.0.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.clonedeepwith": "^4.5.0",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "postcss-js": "^4.0.1",
     "postcss-nested": "^6.0.1",
-    "postcss-safe-parser": "^6.0.0",
+    "postcss-safe-parser": "^7.0.0",
     "postcss-value-parser": "^4.2.0"
   },
   "files": [

packages/core/src/features/css-custom-property.ts

@@ -1,4 +1,4 @@
-import { createFeature, FeatureContext } from './feature';
+import { createFeature, FeatureContext, FeatureTransformContext } from './feature';
 import * as STSymbol from './st-symbol';
 import type { ImportSymbol } from './st-import';
 import {
@@ -177,12 +177,7 @@ export const hooks = createFeature<{
         for (const [localVarName, localSymbol] of Object.entries(
             STSymbol.getAllByType(meta, `cssVar`)
         )) {
-            const resolve = resolvedSymbols.cssVar[localVarName] || {
-                // fallback to local namespace
-                _kind: `css`,
-                symbol: localSymbol,
-                meta,
-            };
+            const resolve = resolveFinalSymbol(meta, localSymbol, resolvedSymbols);
             customPropsMapping.localToGlobal[localVarName] = getTransformedName(resolve);
             if (resolve.meta === meta) {
                 customPropsMapping.locals.add(localVarName);
@@ -209,12 +204,16 @@ export const hooks = createFeature<{
     transformDeclaration({ decl, resolved }) {
         decl.prop = resolved.localToGlobal[decl.prop] || decl.prop;
     },
-    transformValue({ node, data: { cssVarsMapping } }) {
+    transformValue({ node, data: { meta }, context: { getResolvedSymbols } }) {
         const { value } = node;
         const varWithPrefix = node.nodes[0]?.value || ``;
         if (validateCustomPropertyName(varWithPrefix)) {
-            if (cssVarsMapping && cssVarsMapping[varWithPrefix]) {
-                node.nodes[0].value = cssVarsMapping[varWithPrefix];
+            const resolvedSymbols = getResolvedSymbols(meta);
+            const localSymbol = STSymbol.get(meta, varWithPrefix, `cssVar`);
+            if (localSymbol) {
+                node.nodes[0].value = getTransformedName(
+                    resolveFinalSymbol(meta, localSymbol, resolvedSymbols)
+                );
             }
         }
         // handle default values - ToDo: check if required
@@ -235,6 +234,21 @@ export function get(meta: StylableMeta, name: string): CSSVarSymbol | undefined
     return STSymbol.get(meta, name, `cssVar`);
 }
 
+function resolveFinalSymbol(
+    meta: StylableMeta,
+    localSymbol: CSSVarSymbol,
+    resolvedSymbols: ReturnType<FeatureTransformContext['getResolvedSymbols']>
+) {
+    return (
+        resolvedSymbols.cssVar[localSymbol.name] || {
+            // fallback to local namespace
+            _kind: `css`,
+            symbol: localSymbol,
+            meta,
+        }
+    );
+}
+
 function addCSSProperty({
     context,
     node,

packages/core/src/features/feature.ts

@@ -98,7 +98,6 @@ export interface FeatureHooks<T extends NodeTypes = NodeTypes> {
         context: FeatureTransformContext;
         ast: postcss.Root;
         transformer: StylableTransformer;
-        cssVarsMapping: Record<string, string>;
         path: string[];
     }) => void;
 }

packages/core/src/features/st-custom-selector.ts

@@ -77,7 +77,7 @@ export const hooks = createFeature({
         }
     },
     prepareAST({ context, node, toRemove }) {
-        // called without experimentalSelectorInference
+        // called with experimentalSelectorInference=false
         // split selectors & remove definitions
         if (node.type === 'rule' && node.selector.match(CUSTOM_SELECTOR_RE)) {
             node.selector = transformCustomSelectorInline(context.meta, node.selector, {

packages/core/src/features/st-import.ts

@@ -197,15 +197,17 @@ export class StylablePublicApi {
 }
 
 function calcCssDepth(context: FeatureTransformContext) {
-    let cssDepth = 0;
+    let cssDepth = 1;
     const deepDependencies = tryCollectImportsDeep(
         context.resolver,
         context.meta,
         new Set(),
-        ({ depth }) => {
-            cssDepth = Math.max(cssDepth, depth);
+        ({ depth, request }) => {
+            if (request.endsWith('.css')) {
+                cssDepth = Math.max(cssDepth, depth);
+            }
         },
-        1
+        2
     );
     context.meta.transformCssDepth = { cssDepth, deepDependencies };
 }

packages/core/src/features/st-mixin.ts

@@ -122,8 +122,8 @@ export const hooks = createFeature({
         }
         return isMarker;
     },
-    transformLastPass({ context, ast, transformer, cssVarsMapping, path }) {
-        ast.walkRules((rule) => appendMixins(context, transformer, rule, cssVarsMapping, path));
+    transformLastPass({ context, ast, transformer, path }) {
+        ast.walkRules((rule) => appendMixins(context, transformer, rule, path));
     },
 });
 
@@ -212,7 +212,6 @@ function appendMixins(
     context: FeatureTransformContext,
     transformer: StylableTransformer,
     rule: postcss.Rule,
-    cssPropertyMapping: Record<string, string>,
     path: string[] = []
 ) {
     const [decls, mixins] = collectRuleMixins(context, rule);
@@ -221,7 +220,7 @@ function appendMixins(
     }
     for (const mixin of mixins) {
         if (mixin.valid) {
-            appendMixin(context, { transformer, mixDef: mixin, rule, path, cssPropertyMapping });
+            appendMixin(context, { transformer, mixDef: mixin, rule, path });
         }
     }
     for (const mixinDecl of decls) {
@@ -359,7 +358,6 @@ interface ApplyMixinContext {
     mixDef: AnalyzedMixin & { valid: true };
     rule: postcss.Rule;
     path: string[];
-    cssPropertyMapping: Record<string, string>;
 }
 
 function appendMixin(context: FeatureTransformContext, config: ApplyMixinContext) {
@@ -475,8 +473,7 @@ function handleCSSMixin(
                 context.diagnostics,
                 mixDef.data.originDecl,
                 stVarOverride,
-                config.path,
-                config.cssPropertyMapping
+                config.path
             );
             collectOptionalArgs(
                 { meta: resolved.meta, resolver: context.resolver },

packages/core/src/features/st-scope.ts

@@ -35,7 +35,7 @@ export const hooks = createFeature<{ IMMUTABLE_SELECTOR: ImmutablePseudoClass }>
         context.meta.scopes.push(atRule);
     },
     prepareAST({ node, toRemove }) {
-        // called without experimentalSelectorInference
+        // called with experimentalSelectorInference=false
         // flatten @st-scope before transformation
         if (isStScopeStatement(node)) {
             flattenScope(node);

packages/core/src/features/st-var.ts

@@ -271,7 +271,6 @@ export function parseVarsFromExpr(expr: string) {
 
 function collectVarSymbols(context: FeatureContext, rule: postcss.Rule) {
     rule.walkDecls((decl) => {
-        collectUrls(context.meta, decl); // ToDo: remove
         warnOnDeprecatedCustomValues(context, decl);
 
         // check type annotation
@@ -319,20 +318,6 @@ function warnOnDeprecatedCustomValues(context: FeatureContext, decl: postcss.Dec
     );
 }
 
-// ToDo: remove after moving :vars removal to end of analyze.
-// url collection should pickup vars value during general decls walk
-function collectUrls(meta: StylableMeta, decl: postcss.Declaration) {
-    processDeclarationFunctions(
-        decl,
-        (node) => {
-            if (node.type === 'url') {
-                meta.urls.push(node.url);
-            }
-        },
-        false
-    );
-}
-
 function evaluateValueCall(
     context: FeatureTransformContext,
     parsedNode: ParsedValue,