Merge pull request #4 from ryoppippi/feature/select-classes-by-query

feature/select classes by query

Author: ryoppippi

__snapshots__/mod_test.ts.snap

@@ -22,3 +22,37 @@ div {
 </style>
 \`
 `;
+
+snapshot[`example svelte partial 1`] = `
+\`<script>
+  let name = 'world';
+</script>
+
+<div class="m2">This is a paragraph</div>
+<p id="message">This is a paragraph</p>
+
+<style>
+  
+div {
+  color: red;
+  background: blue;
+}
+
+
+  
+p {
+  color: blue;
+}
+
+.m2 {
+  background: yellow;
+}
+
+
+
+ #message {
+    text-decoration: underline;
+  }
+</style>
+\`
+`;

deno.jsonc

@@ -20,8 +20,10 @@
     "@std/assert": "jsr:@std/assert@^0.226.0",
     "@std/testing": "jsr:@std/testing@^0.225.3",
     "@sveltejs/kit": "npm:@sveltejs/kit@^2.5.19",
+    "css-selector-extract": "npm:css-selector-extract@^4.0.1",
     "magic-string": "npm:magic-string@^0.30.11",
     "pathe": "npm:pathe@^1.1.2",
+    "query-string": "npm:query-string@^9.1.0",
     "svelte": "npm:svelte@^4.2.18",
     "unconfig": "npm:unconfig@^0.5.5",
     "vite": "npm:vite@^5.3.5"

deno.lock

@@ -2,6 +2,8 @@ import process from "node:process";
 import * as path from "pathe";
 import * as fs from "node:fs/promises";
 import MagicString, { Bundle } from "magic-string";
+import queryString from "query-string";
+import cssSelectorExtract from "css-selector-extract";
 import type { PreprocessorGroup } from "svelte/compiler";
 import type { Config as SvelteKitConfig } from "@sveltejs/kit";
 import type { UserConfig as ViteConfig } from "vite";
@@ -72,10 +74,15 @@ function matchAllImports(str: string) {
   while ((match = globalRegex.exec(str)) !== null) {
     const start = match.index;
     const end = start + match[0].length;
+    const {
+      url: file,
+      query,
+    } = queryString.parseUrl(match[1].substring(1, match[1].length - 1));
     matches.push({
       start,
       end,
-      file: match[1].substring(1, match[1].length - 1),
+      file,
+      query,
     });
   }
   return matches;
@@ -96,7 +103,7 @@ export function importCSSPreprocess(): PreprocessorGroup {
           state.clone().remove(start, end);
         const out = [];
         const deps = [];
-        for (const { start, end, file } of imports.reverse()) {
+        for (const { start, end, file, query } of imports.reverse()) {
           // Right
           if (lastStart != null) {
             out.push(remove(lastStart, content.length).remove(0, end));
@@ -105,8 +112,22 @@ export function importCSSPreprocess(): PreprocessorGroup {
           }
           const absPath = await getAbsPath({ filename, file });
           deps.push(absPath);
-          const text = (await fs.readFile(absPath)).toString();
-          out.push(new MagicString(text, { filename: absPath }));
+
+          const cssText = (await fs.readFile(absPath)).toString();
+
+          let replaceText: string | undefined = undefined;
+
+          if (Object.keys(query).length > 0) {
+            const selectedCss: string = await cssSelectorExtract.process({
+              css: cssText,
+              filters: Object.keys(query),
+            });
+            replaceText = selectedCss;
+          } else {
+            replaceText = cssText;
+          }
+
+          out.push(new MagicString(replaceText, { filename: absPath }));
           lastStart = start;
         }
 

mod.ts

@@ -20,3 +20,20 @@ Deno.test(
     await assertSnapshot(t, code);
   },
 );
+Deno.test(
+  "example svelte partial",
+  async function (t) {
+    const filename = join(
+      import.meta.dirname as string,
+      "./test_project/Partial.svelte",
+    );
+    const source = Deno.readTextFileSync(filename);
+    const { code } = await preprocess(
+      source,
+      [importCSSPreprocess()],
+      { filename },
+    );
+
+    await assertSnapshot(t, code);
+  },
+);

mod_test.ts

@@ -0,0 +1,15 @@
+<script>
+  let name = 'world';
+</script>
+
+<div class="m2">This is a paragraph</div>
+<p id="message">This is a paragraph</p>
+
+<style>
+  @import './main.css#div' scoped;
+  @import './partial.css?p&.m2' scoped;
+
+ #message {
+    text-decoration: underline;
+  }
+</style>

test_project/Partial.svelte

@@ -0,0 +1,11 @@
+p {
+  color: blue;
+}
+
+h1 {
+  color: green;
+}
+
+.m2 {
+  background: yellow;
+}