[BUGFIX]: add lowercase alias ext:<extensionname> for SCSS imports

package.json

@@ -49,6 +49,7 @@
     "@vitest/coverage-v8": "^4.1.0",
     "memfs": "^4.57.1",
     "prettier": "^3.8.1",
+    "sass": "^1.102.0",
     "typescript": "^5.9.3",
     "vite": "^8.0.1",
     "vitest": "^4.1.0"

src/utils.ts

@@ -263,6 +263,10 @@ export function createAliases(
                 find: "EXT:" + extension.extensionKey,
                 replacement,
             });
+            aliases.push({
+                find: "ext:" + extension.extensionKey,
+                replacement,
+            });
         }
         return aliases;
     }, []);

tests/integration/manifest-expected.json

@@ -14,8 +14,17 @@
       "assets/Main-VWk4xp3e.css"
     ]
   },
+  "vendor/praetorius/test-extension/Resources/Private/Scss.entry.ts": {
+    "file": "assets/Scss.entry-CptVgpj7.js",
+    "name": "Scss.entry",
+    "src": "vendor/praetorius/test-extension/Resources/Private/Scss.entry.ts",
+    "isEntry": true,
+    "css": [
+      "assets/Scss-BpwiChWd.css"
+    ]
+  },
   "vendor/test-vendor/vendor-extension/Resources/Private/Vendor.entry.ts": {
-    "file": "assets/Vendor.entry-Bk2RJPqq.js",
+    "file": "assets/Vendor.entry-4M5qqhJ-.js",
     "name": "Vendor.entry",
     "src": "vendor/test-vendor/vendor-extension/Resources/Private/Vendor.entry.ts",
     "isEntry": true,

tests/integration/project/packages/test_extension/Resources/Private/Scss.entry.ts

@@ -0,0 +1 @@
+import "EXT:test_extension/Resources/Private/Scss/Main.scss";

tests/integration/project/packages/test_extension/Resources/Private/Scss/Main.scss

@@ -0,0 +1,5 @@
+@import "EXT:test_extension/Resources/Private/Scss/partial";
+
+.scss-main {
+    background: green;
+}

tests/integration/project/packages/test_extension/Resources/Private/Scss/_partial.scss

@@ -0,0 +1,3 @@
+.partial {
+    color: blue;
+}

tests/integration/typo3extension.test.ts

@@ -12,17 +12,15 @@ test("vite build works for TYPO3 extension", async () => {
         root,
         plugins: [typo3({ target: "extension" })],
         build: {
-            lib: {
-                cssFileName: "style",
-            },
+            cssCodeSplit: true,
         },
     });
 
     expect(output).toHaveLength(2);
 
     const esmOutput = output[0];
 
-    expect(esmOutput.output).toHaveLength(3);
+    expect(esmOutput.output).toHaveLength(5);
     expect(esmOutput.output[0].fileName).toMatchInlineSnapshot(
         `"Alt.entry.js"`,
     );
@@ -41,14 +39,23 @@ test("vite build works for TYPO3 extension", async () => {
       //#endregion
       "
     `);
-    expect(esmOutput.output[2].fileName).toMatchInlineSnapshot(`"style.css"`);
-    expect(esmOutput.output[2].source).toMatchInlineSnapshot(`
+    expect(esmOutput.output[2].fileName).toMatchInlineSnapshot(
+        `"Scss.entry.js"`,
+    );
+    expect(esmOutput.output[2].code).toMatchInlineSnapshot(`""`);
+    expect(esmOutput.output[3].fileName).toMatchInlineSnapshot(`"Main.css"`);
+    expect(esmOutput.output[3].source).toMatchInlineSnapshot(`
       "body{background:red}
-      /*$vite$:1*/"
+      "
+    `);
+    expect(esmOutput.output[4].fileName).toMatchInlineSnapshot(`"Scss.css"`);
+    expect(esmOutput.output[4].source).toMatchInlineSnapshot(`
+      ".partial{color:#00f}.scss-main{background:green}
+      "
     `);
 
     const cjsOutput = output[1];
-    expect(cjsOutput.output).toHaveLength(3);
+    expect(cjsOutput.output).toHaveLength(5);
     expect(cjsOutput.output[0].fileName).toMatchInlineSnapshot(
         `"Alt.entry.cjs"`,
     );
@@ -61,9 +68,18 @@ test("vite build works for TYPO3 extension", async () => {
     expect(cjsOutput.output[1].code).toMatchInlineSnapshot(
         `"console.log(\`Main.ts\`);"`,
     );
-    expect(cjsOutput.output[2].fileName).toMatchInlineSnapshot(`"style.css"`);
-    expect(cjsOutput.output[2].source).toMatchInlineSnapshot(`
+    expect(cjsOutput.output[2].fileName).toMatchInlineSnapshot(
+        `"Scss.entry.cjs"`,
+    );
+    expect(cjsOutput.output[2].code).toMatchInlineSnapshot(`""`);
+    expect(cjsOutput.output[3].fileName).toMatchInlineSnapshot(`"Main.css"`);
+    expect(cjsOutput.output[3].source).toMatchInlineSnapshot(`
       "body{background:red}
-      /*$vite$:1*/"
+      "
+    `);
+    expect(cjsOutput.output[4].fileName).toMatchInlineSnapshot(`"Scss.css"`);
+    expect(cjsOutput.output[4].source).toMatchInlineSnapshot(`
+      ".partial{color:#00f}.scss-main{background:green}
+      "
     `);
 });

tests/integration/typo3project.test.ts

@@ -18,7 +18,7 @@ test("vite build works for TYPO3 project", async () => {
         (a, b) => (a.fileName < b.fileName ? -1 : 1),
     );
 
-    expect(sortedOutput).toHaveLength(6);
+    expect(sortedOutput).toHaveLength(8);
 
     expect((sortedOutput[0] as OutputAsset).fileName).toBe(
         ".vite/manifest.json",
@@ -50,17 +50,30 @@ test("vite build works for TYPO3 project", async () => {
     );
 
     expect((sortedOutput[4] as OutputAsset).fileName).toMatchInlineSnapshot(
-        `"assets/Vendor-DE25tVp9.css"`,
+        `"assets/Scss-BpwiChWd.css"`,
     );
     expect((sortedOutput[4] as OutputAsset).source).toMatchInlineSnapshot(`
-      "body{background:#00f}
+      ".partial{color:#00f}.scss-main{background:green}
       "
     `);
 
     expect((sortedOutput[5] as OutputChunk).fileName).toMatchInlineSnapshot(
-        `"assets/Vendor.entry-Bk2RJPqq.js"`,
+        `"assets/Scss.entry-CptVgpj7.js"`,
+    );
+    expect((sortedOutput[5] as OutputChunk).code).toMatchInlineSnapshot(`""`);
+
+    expect((sortedOutput[6] as OutputAsset).fileName).toMatchInlineSnapshot(
+        `"assets/Vendor-DE25tVp9.css"`,
+    );
+    expect((sortedOutput[6] as OutputAsset).source).toMatchInlineSnapshot(`
+      "body{background:#00f}
+      "
+    `);
+
+    expect((sortedOutput[7] as OutputChunk).fileName).toMatchInlineSnapshot(
+        `"assets/Vendor.entry-4M5qqhJ-.js"`,
     );
-    expect((sortedOutput[5] as OutputChunk).code).toMatchInlineSnapshot(
+    expect((sortedOutput[7] as OutputChunk).code).toMatchInlineSnapshot(
         `"console.log(\`Vendor.ts\`);"`,
     );
 });

tests/unit/addAliases.test.ts

@@ -21,6 +21,10 @@ describe("addAliases", () => {
                 find: "EXT:test_extension",
                 replacement: "/path/to/dummy/extension1",
             },
+            {
+                find: "ext:test_extension",
+                replacement: "/path/to/dummy/extension1",
+            },
         ]);
     });
     test("existing aliases as object", () => {
@@ -47,6 +51,10 @@ describe("addAliases", () => {
                 find: "EXT:test_extension",
                 replacement: "/path/to/dummy/extension1",
             },
+            {
+                find: "ext:test_extension",
+                replacement: "/path/to/dummy/extension1",
+            },
         ]);
     });
     test("existing aliases as array", () => {
@@ -92,6 +100,10 @@ describe("addAliases", () => {
                 find: "EXT:test_extension",
                 replacement: "/path/to/dummy/extension1",
             },
+            {
+                find: "ext:test_extension",
+                replacement: "/path/to/dummy/extension1",
+            },
         ]);
     });
     test("no double slashes in added alias paths", () => {
@@ -112,6 +124,10 @@ describe("addAliases", () => {
                 find: "EXT:test_extension",
                 replacement: "/path/to/dummy/extension1",
             },
+            {
+                find: "ext:test_extension",
+                replacement: "/path/to/dummy/extension1",
+            },
         ]);
     });
     test("set no aliases", () => {
@@ -167,6 +183,10 @@ describe("addAliases", () => {
                 find: "EXT:test_extension",
                 replacement: "/path/to/dummy/extension1",
             },
+            {
+                find: "ext:test_extension",
+                replacement: "/path/to/dummy/extension1",
+            },
         ]);
     });
 });

tests/unit/outputDebugInformation.test.ts

@@ -50,7 +50,7 @@ describe("outputDebugInformation", () => {
             2,
             "The following aliases have been defined: " +
                 colors.green(
-                    "@test_extension1, EXT:test_extension1, @test_extension2, EXT:test_extension2",
+                    "@test_extension1, EXT:test_extension1, ext:test_extension1, @test_extension2, EXT:test_extension2, ext:test_extension2",
                 ),
             { timestamp: true },
         );