feat: Removing common prefixes from states, like, is.

Author: ramitha

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

@@ -13,6 +13,7 @@ type BlockToBemSelectorMap  = Map<string, ElementToBemSelectorMap>;
 type BemToBlockClassMap  = WeakMap<BemSelector, BlockClassSelector>;
 
 const EMPTY_ELEMENT_PLACEHOLDER = "EMPTY-ELEMENT-PLACEHOLDER";
+const COMMON_PREFIXES_FOR_MODIFIERS = ["is"];
 
 export function convertBemToBlocks(files: Array<string>): Promise<void>[] {
   let promises: Promise<void>[] = [];
@@ -22,7 +23,7 @@ export function convertBemToBlocks(files: Array<string>): Promise<void>[] {
         .process(css, { from: file });
       // rewrite the file with the processed output
       const parsedFilePath = path.parse(file);
-      const blockFilePath = Object.assign(parsedFilePath, {ext: `.block${parsedFilePath.ext}`, base: parsedFilePath.base.replace(parsedFilePath.ext, `.block${parsedFilePath.ext}`)} );
+      const blockFilePath = Object.assign(parsedFilePath, {ext: `.block${parsedFilePath.ext}`, base: undefined} );
       promises.push(fs.writeFile(path.format(blockFilePath), output.toString()));
     });
   });
@@ -109,8 +110,14 @@ export function constructBlocksMap(bemSelectorCache: BemSelectorMap): BemToBlock
             let blockClass = resultMap.get(sel);
             let lcs = blockClass && blockClass.state && lcsMap[blockClass.state];
             if (blockClass && blockClass.state && lcs) {
-              blockClass.subState = blockClass.state.replace(`${lcs}-`, "");
-              blockClass.state = lcs.replace(/-$/, "");
+              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(/-$/, "");
+              }
             }
           });
         }
@@ -184,6 +191,9 @@ export const bemToBlocksPlugin: postcss.Plugin<PostcssAny> = postcss.plugin("bem
                 quoteMark: blockClassName.subState ? '"' : undefined,
                 operator: blockClassName.subState ? "=" : undefined,
                 value: blockClassName.subState,
+                // the API for postcss-selector-parser mentions raws to be
+                // deprecated when used with quoteMark but that didn't work as
+                // expected. Keeping quoteMark and raws until it is fixed.
                 raws: {value: blockClassName.subState ? `"${blockClassName.subState}"` : undefined},
               });
 

Diff for: packages/@css-blocks/bem-to-blocks/src/utils.ts

@@ -5,8 +5,6 @@ export const R_BEM_REGEX = /^.(?:((?:[a-z0-9]+-)*[a-z0-9]+)(__(?:[a-z0-9]+-)*[a-
 // regex that matches block--modifier__element pattern
 export const R_BME_REGEX = /^.(?:((?:[a-z0-9]+-)*[a-z0-9]+)(--(?:[a-z0-9]+-)*[a-z0-9]+)?(__(?:[a-z0-9]+-)*[a-z0-9]+)?)$/;
 
-const COMMON_PREFIXES_FOR_MODIFIERS = ["is"];
-
 /**
  * function to find the LCS (longest common substring) from a string array
  *
@@ -28,11 +26,10 @@ export function findLcsMap(arr: string[]): {[key: string]: string} {
       wordMap[word[0]] = new Array(word.join("-"));
     }
   });
-  // return only those values who have a count of greater than 1 and whose key
-  // is not present in COMMON_PREFIXES_FOR_MODIFIERS
+  // return only those values who have a count of greater than 1
   let reducedWordMap = {};
   for (let [key, value] of Object.entries(wordMap)) {
-    if (value.length > 1 && COMMON_PREFIXES_FOR_MODIFIERS.indexOf(key) < 0) {
+    if (value.length > 1) {
       value.forEach(item => {
         // create a reverser mapping of the string to the key
         reducedWordMap[item] = key;

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

@@ -114,12 +114,11 @@ describe("construct-blocks", () => {
     let mockMap = new Map(Object.entries({
       ".myblock__myelement--is-disabled": sel1,
       ".myblock__myelement--is-animating": sel2,
-
     }));
 
     let result = constructBlocksMap(mockMap);
-    assert.deepEqual(result.get(sel1), new BlockClassSelector({ class: "myelement", state: "is-disabled" }));
-    assert.deepEqual(result.get(sel2), new BlockClassSelector({ class: "myelement", state: "is-animating" }));
+    assert.deepEqual(result.get(sel1), new BlockClassSelector({ class: "myelement", state: "disabled" }));
+    assert.deepEqual(result.get(sel2), new BlockClassSelector({ class: "myelement", state: "animating" }));
   });
 
 });