Merge pull request #6 from ryoppippi/feature/rename-css

feature/rename css

Author: ryoppippi

README.md

@@ -83,5 +83,41 @@ div { color: green; }
 </style>
 ```
 
+### Rename Style Rules by Query Selector
+
+You can rename style rules by query selector.
+
+For example, the following CSS and Svelte:
+
+```css
+/* a.css */
+
+div { color: red; }
+
+.m0 { color: blue; }
+```
+
+```svelte
+<p class="m1"> world </p>
+
+<style>
+@import "./a.css?.m0=.m1" scoped;
+
+div { color: green; }
+</style>
+```
+
+will get converted into:
+
+```svelte
+<p class="m1"> world </p>
+
+<style>
+.m1 { color: blue; }
+
+div { color: green; }
+</style>
+```
+
 ## License
 [MIT](./LICENSE)

__snapshots__/mod_test.ts.snap

@@ -56,3 +56,17 @@ p {
 </style>
 \`
 `;
+
+snapshot[`example svelte rename 1`] = `
+'<div class="m3">This is a paragraph</div>
+
+<style>
+  
+.m3 {
+  background: yellow;
+}
+
+
+</style>
+'
+`;

mod.ts

@@ -118,10 +118,16 @@ export function importCSSPreprocess(): PreprocessorGroup {
           let replaceText: string | undefined = undefined;
 
           if (Object.keys(query).length > 0) {
+            const filters = Object.entries(query).map(([key, value]) => ({
+              selector: key,
+              replacement: value ?? undefined,
+            }));
+
             const selectedCss: string = await cssSelectorExtract.process({
               css: cssText,
-              filters: Object.keys(query),
+              filters,
             });
+
             replaceText = selectedCss;
           } else {
             replaceText = cssText;

mod_test.ts

@@ -3,37 +3,42 @@ import { assertSnapshot } from "@std/testing/snapshot";
 import { preprocess } from "svelte/compiler";
 import { importCSSPreprocess } from "./mod.ts";
 
+async function load(_filename: string) {
+  const filename = join(
+    import.meta.dirname as string,
+    _filename,
+  );
+
+  const source = Deno.readTextFileSync(filename);
+  const { code } = await preprocess(
+    source,
+    [importCSSPreprocess()],
+    { filename },
+  );
+
+  return code;
+}
+
 Deno.test(
   "example svelte main",
   async function (t) {
-    const filename = join(
-      import.meta.dirname as string,
-      "./test_project/Main.svelte",
-    );
-    const source = Deno.readTextFileSync(filename);
-    const { code } = await preprocess(
-      source,
-      [importCSSPreprocess()],
-      { filename },
-    );
-
+    const code = await load("./test_project/Main.svelte");
     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 },
-    );
+    const code = await load("./test_project/Partial.svelte");
+    await assertSnapshot(t, code);
+  },
+);
 
+Deno.test(
+  "example svelte rename",
+  async function (t) {
+    const code = await load("./test_project/Rename.svelte");
     await assertSnapshot(t, code);
   },
 );

test_project/Rename.svelte

@@ -0,0 +1,5 @@
+<div class="m3">This is a paragraph</div>
+
+<style>
+  @import './partial.css?.m2=.m3' scoped;
+</style>