fix: Incorrect :scope selector and state output.

When a :scope selector was inserted, the class wasn't properly removed.
This was because the code that removed the class didn't always run.

When only a single state starting with "is-" belonged to a class, the
prefix wasn't removed. I fixed this by just removing prefixes much
earlier in the process rather than having it be part of the substate
algorithm.

Author: chriseppstein

packages/@css-blocks/bem-to-blocks/src/index.ts

@@ -68,6 +68,9 @@ export function constructBlocksMap(bemSelectorCache: BemSelectorMap): BemToBlock
     }
     if (bemSelector.modifier) {
       blockClass.state = bemSelector.modifier;
+      if (blockClass.state.match(/^is-/)) {
+        blockClass.state = blockClass.state.substring(3);
+      }
     }
     // add this blockClass to the resultMap
     resultMap.set(bemSelector, blockClass);
@@ -119,14 +122,8 @@ export function constructBlocksMap(bemSelectorCache: BemSelectorMap): BemToBlock
             let blockClass = resultMap.get(sel);
             let lcs = blockClass && blockClass.state && lcsMap[blockClass.state];
             if (blockClass && blockClass.state && lcs) {
-              if (COMMON_PREFIXES_FOR_MODIFIERS.indexOf(lcs) > -1) {
-                // if we find that the state contains a common prefix, we strip
-                // it of that prefix
-                blockClass.state = blockClass.state.replace(`${lcs}-`, "");
-              } else {
-                blockClass.subState = blockClass.state.replace(`${lcs}-`, "");
-                blockClass.state = lcs.replace(/-$/, "");
-              }
+              blockClass.subState = blockClass.state.replace(`${lcs}-`, "");
+              blockClass.state = lcs.replace(/-$/, "");
             }
           });
         }
@@ -204,9 +201,7 @@ export const bemToBlocksPlugin: postcss.Plugin<PostcssAny> = postcss.plugin("bem
               let newScopeNode = selectorParser.pseudo({
                 value: ":scope",
               });
-              if (selector.parent) {
-                selector.parent.insertBefore(selector, newScopeNode);
-              }
+              selector.parent!.insertBefore(selector, newScopeNode);
               stripSelector = true;
             }
 
@@ -223,15 +218,12 @@ export const bemToBlocksPlugin: postcss.Plugin<PostcssAny> = postcss.plugin("bem
               });
 
               // insert this new node after the current node
-              if (selector.parent) {
-                selector.parent.insertAfter(selector, newAttrNode);
-              }
+              selector.parent!.insertAfter(selector, newAttrNode);
+            }
 
-              // strip the selector in the end if we replaced it with a pseudo
-              // class
-              if (stripSelector) {
-                selector.remove();
-              }
+            // strip the selector in the end if we replaced it with a pseudoclass
+            if (stripSelector) {
+              selector.remove();
             }
           }
         }

packages/@css-blocks/bem-to-blocks/test/construct-blocks-map-test.ts

@@ -24,6 +24,25 @@ describe("construct-blocks", () => {
     assert.deepEqual(result.get(sel4), new BlockClassSelector({ class: "image" }));
   });
 
+  it("converts another simple block", async () => {
+    let sel1 = new BemSelector(".nav");
+    let sel2  = new BemSelector(".nav--open");
+    let sel3 =  new BemSelector(".nav__item");
+    let sel4 = new BemSelector(".nav__item--is-selected");
+    let mockMap = new Map(Object.entries({
+      ".nav": sel1,
+      ".nav--open": sel2,
+      ".nav__item": sel3,
+      ".nav__item--is-selected": sel4,
+    }));
+
+    let result = constructBlocksMap(mockMap);
+    assert.deepEqual(result.get(sel1), new BlockClassSelector());
+    assert.deepEqual(result.get(sel2), new BlockClassSelector({ state: "open" }));
+    assert.deepEqual(result.get(sel3), new BlockClassSelector({ class: "item" }));
+    assert.deepEqual(result.get(sel4), new BlockClassSelector({ class: "item", state: "selected"}));
+  });
+
   it("calculates substates correctly", async () => {
     let sel1 = new BemSelector(".jobs-hero__image--inverse-red");
     let sel2  = new BemSelector(".jobs-hero__image--inverse-black");

packages/@css-blocks/bem-to-blocks/test/plugin-test.ts

@@ -15,6 +15,27 @@ describe("converts BEM to blocks", () => {
     assert.equal(result, ".image[inverse-red] {color: blue}");
   });
 
+  it("converts a simple block", async () => {
+    let output = await processBEMContents(
+      "nav.css",
+      `
+        .nav { }
+        .nav--open { }
+        .nav__item { }
+        .nav__item--is-selected { }
+      `,
+    );
+    assert.equal(
+      output.trim(),
+      `
+        :scope { }
+        :scope[open] { }
+        .item { }
+        .item[selected] { }
+      `.trim(),
+    );
+  });
+
   it("existing attributes remain unchanged", async () => {
     let output = await processBEMContents(
       "test-existing-attributes.css",

packages/@css-blocks/cli/test/convert-test.ts

@@ -33,12 +33,5 @@ describe("BEM converter", () => {
     let result = tempDir.read();
     let convertedFileContents = result["nav.block.css"];
     assert.ok(typeof convertedFileContents === "string" && convertedFileContents.match(/:scope/));
-    // XXX The output isn't correct so we need to add a test case for this.
-    // `
-    //     :scope { }
-    //     :scope[open] { }
-    //     .item { }
-    //     .item[selected] { }
-    // `
   });
 });