Handle id selector correctly

winston0410 · Aug 23, 2021 · 5f5f98e · 5f5f98e
1 parent 227a0bb
commit 5f5f98e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 68 deletions.
diff --git a/src/helper.js b/src/helper.js
@@ -4,22 +4,25 @@ export const getAttribute = (elem, name) =>
   elem?.attributes.find((attr) => attr.name === name);
 
 export const getInjectionSlot = (elem) => {
-  let start, end;
-  if (elem.attributes.length < 1) {
-    //  TODO:
-    return;
-  }
+  let start, end
+  let append = false
+
+  //  if (elem.attributes.length < 1) {
+    //  //  TODO:
+    //  return;
+  //  }
   const classAttr = getAttribute(elem, "class");
   if (classAttr) {
     const classAttrValue = classAttr.value[0];
     start = classAttrValue.start;
     end = classAttrValue.end;
   } else {
-    //  TODO: find the last attribute
-    //  const lastAttr = elem.attributes[
+    const lastAttr = elem.attributes[elem.attributes.length - 1].value[0]
+    end = lastAttr.end + 1
+    append = true
   }
 
-  return [start, end];
+  return [append, start, end];
 };
 
 export const getMediaQuery = (rule) => {
@@ -70,7 +73,6 @@ export const getClassName = (rule) => {
         break;
 
       case "IdSelector":
-        shouldMinify = false;
         className += `#${selectorNode.name}`;
         break;
 

diff --git a/src/transformer.js b/src/transformer.js
@@ -6,6 +6,7 @@ import {
   matchWithSelector,
   getMinifiedToken,
   getAttribute,
+  getInjectionSlot,
   createGenerator,
   isCombinator,
 } from "./helper.js";
@@ -22,18 +23,18 @@ const isTargetElement = (selectorNode, node, linker) => {
 
   while (r.getIndex() > -1) {
     if (!curNode) {
-        linker.reveal()
-        return false
+      linker.reveal();
+      return false;
     }
     //  console.log("run count", index, selector, curNode);
-    const combinator = isCombinator(selector)
+    const combinator = isCombinator(selector);
     if (combinator) {
       curNode = linker.getParent(curNode);
       selector = r.prev();
       if (combinator === ">") {
-          //  prevent linker from providing more than one node for finding direct parent
-          linker.hide(curNode)
-      } 
+        //  prevent linker from providing more than one node for finding direct parent
+        linker.hide(curNode);
+      }
     } else {
       const isMatch = matchWithSelector(curNode, selector);
       if (isMatch) {
@@ -112,8 +113,12 @@ export default function (code, { dir, base }) {
 
             if (result) {
               const minified = getMinifiedToken(replaceList.get(selectorNode));
-              const slot = getAttribute(node, "class").value[0];
-              changeable.overwrite(slot.start, slot.end, minified);
+              const [append, start, end] = getInjectionSlot(node);
+              if (append) {
+                changeable.appendRight(end, `class="${minified}"`)
+              } else {
+                changeable.overwrite(start, end, minified);
+              }
             }
           }
         },

diff --git a/test/issue2.spec.js b/test/issue2.spec.js
@@ -65,13 +65,6 @@ describe("when given a rule with descendant combinator", function () {
 
 describe("when given a rule with descendant combinator", function () {
   it("should add class to the right HTML tag", function () {
-    //  const code = `
-    //  <style>
-    //  .main .h1 {
-    //  color: #ff3e00;
-    //  }
-    //  </style><main class="main"><h1 id="hello" class="h1"></h1></main>`;
-
     const code = `
 <style>
 .main .h1{
@@ -89,16 +82,15 @@ describe("when given a rule with descendant combinator", function () {
     const parsedPath = path.parse(filename);
     tokenizer.generateToken(ast.css, parsedPath);
 
-    const transformer = createTransformer(code, parsedPath).transformHtml(
-      ast.html,
-      classCache
-    );
+    const transformer = createTransformer(code, parsedPath)
+      .transformHtml(ast.html, classCache)
+      .transformCss(ast.css, declarationCache);
 
     const result = transformer.toString();
 
     expect(result.replace(/\s/g, "")).toBe(
       `<style>
-        .main .h1 {
+        :global(.a){
           color: #ff3e00;
         }
       </style>
@@ -110,42 +102,39 @@ describe("when given a rule with descendant combinator", function () {
   });
 });
 
-//  describe("when given a rule with id selector", function () {
-//  it("should add class to the right HTML tag", function () {
-//  const code = `
-//  <style>
-//  #hello{
-//  color: #ff3e00;
-//  }
-//  </style><h1 id="hello"></h1>`;
-
-//  const filename = "/src/routes/index.svelte";
-
-//  const classCache = getProxiedObject();
-//  const declarationCache = getProxiedObject();
-
-//  const tokenizer = createTokenizer(classCache, declarationCache);
-//  const ast = parse(code, { filename });
-//  const parsedPath = path.parse(filename);
-//  tokenizer.generateToken(ast.css, parsedPath);
-
-//  const transformer = createTransformer(code, parsedPath).transformHtml(
-//  ast.html,
-//  classCache
-//  )
-
-//  const result = transformer.toString();
-
-//  expect(result.replace(/\s/g, "")).toBe(
-//  `<style>
-//  a{
-//  color: #ff3e00;
-//  }
-//  </style>
-//  <main>
-//  <h1 class="a"></h1>
-//  </main>
-//  `.replace(/\s/g, "")
-//  );
-//  });
-//  });
+describe("when given a rule with id selector", function () {
+  it("should add class to the right HTML tag", function () {
+    const code = `
+<style>
+#hello{
+color: #ff3e00;
+}
+</style><h1 id="hello"></h1>`;
+
+    const filename = "/src/routes/index.svelte";
+
+    const classCache = getProxiedObject();
+    const declarationCache = getProxiedObject();
+
+    const tokenizer = createTokenizer(classCache, declarationCache);
+    const ast = parse(code, { filename });
+    const parsedPath = path.parse(filename);
+    tokenizer.generateToken(ast.css, parsedPath);
+
+    const transformer = createTransformer(code, parsedPath)
+      .transformHtml(ast.html, classCache)
+      .transformCss(ast.css, declarationCache);
+
+    const result = transformer.toString();
+
+    expect(result.replace(/\s/g, "")).toBe(
+      `<style>
+    :global(.a){
+    color: #ff3e00;
+    }
+    </style>
+    <h1 id="hello" class="a"></h1>
+`.replace(/\s/g, "")
+    );
+  });
+});