fix: align css depth mode to css+js mode (#2916)

wix · Oct 16, 2023 · 494c723 · 494c723
1 parent 352a73d
commit 494c723
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 17 deletions.
diff --git a/packages/cli/src/build-single-file.ts b/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 });
         }

diff --git a/packages/cli/src/build.ts b/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;

diff --git a/packages/core/src/features/st-import.ts b/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('.st.css')) {
+                cssDepth = Math.max(cssDepth, depth);
+            }
         },
-        1
+        2
     );
     context.meta.transformCssDepth = { cssDepth, deepDependencies };
 }

diff --git a/packages/core/src/helpers/import.ts b/packages/core/src/helpers/import.ts
@@ -598,11 +598,15 @@ export function tryCollectImportsDeep(
     meta: StylableMeta,
     imports = new Set<string>(),
     onImport: undefined | ((e: ImportEvent) => void) = undefined,
-    depth = 0
+    depth = 1,
+    origin = meta.source
 ) {
     for (const { context, request } of meta.getImportStatements()) {
         try {
             const resolved = resolver.resolvePath(context, request);
+            if (resolved === origin) {
+                continue;
+            }
             onImport?.({ context, request, resolved, depth });
 
             if (!imports.has(resolved)) {
@@ -613,7 +617,8 @@ export function tryCollectImportsDeep(
                         resolver.analyze(resolved),
                         imports,
                         onImport,
-                        depth + 1
+                        depth + 1,
+                        origin
                     );
                 }
             }

diff --git a/packages/core/test/features/st-import.spec.ts b/packages/core/test/features/st-import.spec.ts
@@ -247,6 +247,36 @@ describe(`features/st-import`, () => {
             `,
         });
     });
+    it('should calculate meta depth', () => {
+        const { sheets } = testStylableCore({
+            'code.js': `
+                module.exports.add = (a, b) => {
+                    return Number(a) + Number(b);
+                };            
+            `,
+            'depth1.st.css': `
+                @st-import [add] from "./code.js";
+                .root {
+                    content: add(1, 2);
+                }
+            `,
+            'depth2.st.css': `
+                @st-import "./depth1.st.css";
+                @st-import CIRCULAR from "./depth2.st.css";
+            `,
+            'depth3.st.css': `
+                @st-import "./depth2.st.css";
+            `,
+            'entry.st.css': `
+                @st-import "./depth3.st.css";
+            `,
+        });
+
+        expect(sheets['/entry.st.css'].meta.transformCssDepth?.cssDepth, 'entry').to.eql(4);
+        expect(sheets['/depth3.st.css'].meta.transformCssDepth?.cssDepth, 'depth3').to.eql(3);
+        expect(sheets['/depth2.st.css'].meta.transformCssDepth?.cssDepth, 'depth2').to.eql(2);
+        expect(sheets['/depth1.st.css'].meta.transformCssDepth?.cssDepth, 'depth1').to.eql(1);
+    });
     describe(`st-symbol`, () => {
         it(`should warn on redeclare between multiple import statements`, () => {
             testStylableCore({

diff --git a/packages/esbuild/src/stylable-esbuild-plugin.ts b/packages/esbuild/src/stylable-esbuild-plugin.ts
@@ -197,7 +197,7 @@ export const stylablePlugin = (initialPluginOptions: ESBuildOptions = {}): Plugi
                 const res = stylable.transform(args.path);
                 const { errors, warnings } = esbuildEmitDiagnostics(res, diagnosticsMode);
                 const { imports, collector } = importsCollector(res);
-                const { cssDepth = 0, deepDependencies } = res.meta.transformCssDepth!;
+                const { cssDepth = 1, deepDependencies } = res.meta.transformCssDepth!;
                 const getModuleId = () => {
                     switch (runtimeStylesheetId) {
                         case 'module':
@@ -302,7 +302,7 @@ export const stylablePlugin = (initialPluginOptions: ESBuildOptions = {}): Plugi
             { filter: /.*/, namespace: namespaces.css },
             wrapDebug('onLoad css output', (args) => {
                 const { meta } = args.pluginData.stylableResults as StylableResults;
-                const { cssDepth = 0 } = meta.transformCssDepth!;
+                const { cssDepth = 1 } = meta.transformCssDepth!;
                 const pathId = idForPath.getId(args.path);
                 return {
                     resolveDir: dirname(args.path),

diff --git a/packages/webpack-plugin/src/loader-utils.ts b/packages/webpack-plugin/src/loader-utils.ts
@@ -79,7 +79,7 @@ export function getImports(
     /**
      * Get the transformed css depth
      */
-    const cssDepth = meta.transformCssDepth?.cssDepth ?? 0;
+    const cssDepth = meta.transformCssDepth?.cssDepth ?? 1;
     /**
      * Take all deep dependencies since they can affect the output
      */

diff --git a/packages/webpack-plugin/test/e2e/dual-mode-esm.spec.ts b/packages/webpack-plugin/test/e2e/dual-mode-esm.spec.ts
@@ -63,12 +63,12 @@ describe(`(${project})`, () => {
         expect(vanillaStylesNoRuntime).to.eql(stylableStylesNoRuntime);
 
         expect(normalizeNamespace(vanillaStyles)).to.eql([
-            { id: 'designsystem', depth: '0' },
-            { id: 'label', depth: '0' },
-            { id: 'button', depth: '1' },
-            { id: 'basictheme', depth: '2' },
-            { id: 'labeltheme', depth: '3' },
-            { id: 'buttontheme', depth: '3' },
+            { id: 'designsystem', depth: '1' },
+            { id: 'label', depth: '1' },
+            { id: 'button', depth: '2' },
+            { id: 'basictheme', depth: '3' },
+            { id: 'labeltheme', depth: '4' },
+            { id: 'buttontheme', depth: '4' },
         ]);
     });
 });