fix: remove redundant prefixes for uplifted selectors (#26)

Author: valerybugakov

src/transforms/globalCssToCssModule/__tests__/__snapshots__/globalCssToCssModule.test.ts.snap

@@ -116,6 +116,9 @@ exports[`globalCssToCssModule transforms correctly 1`] = `
 .kek-pek {
     color: red;
 }
+.logo {
+    display: flex;
+}
 "
 `;
 
@@ -136,7 +139,7 @@ export const Kek = () => {
                     [classNames('d-flex mr-1', styles.kek)]: isActive,
                 })}
              />
-            It's a component<p className={styles.kekWow}>wow</p>
+            It's a component<p className={styles.logo}>wow</p>
             <div className={classNames('m-2 d-flex m-1', styles.repoHeader)}>Another one!</div>
         </div>
     )

src/transforms/globalCssToCssModule/__tests__/fixtures/Kek.scss

@@ -28,6 +28,10 @@
         border-width: 1px 0;
     }
 
+    &__logo {
+        display: flex;
+    }
+
     // &__action-list-item {
     &__action-list-item {
         // Have a small gap between buttons so they are visually distinct when pressed

src/transforms/globalCssToCssModule/__tests__/fixtures/Kek.tsx

@@ -11,7 +11,7 @@ export const Kek = () => {
                     'd-flex mr-1 kek': isActive,
                 })}
             ></div>
-            It's a component<p className="kek--wow">wow</p>
+            It's a component<p className="repo-header__logo">wow</p>
             <div className="m-2 repo-header d-flex m-1">Another one!</div>
         </div>
     )

src/transforms/globalCssToCssModule/postcss/__tests__/exportNameMapPrefixes.test.ts

@@ -0,0 +1,45 @@
+import { removePrefixFromExportNameIfNeeded, getPrefixesToRemove } from '../exportNameMapPrefixes'
+
+describe('removePrefixFromExportNameIfNeeded', () => {
+    it('removes matching prefix', () => {
+        const exportName = removePrefixFromExportNameIfNeeded({
+            className: 'menu__button',
+            exportName: 'menuButton',
+            prefixesToRemove: [{ prefix: 'menu__', exportName: 'menu' }],
+        })
+
+        expect(exportName).toBe('button')
+    })
+
+    it('skips exportName without matching prefix', () => {
+        expect(
+            removePrefixFromExportNameIfNeeded({
+                className: 'menu__button',
+                exportName: 'menuButton',
+                prefixesToRemove: [{ prefix: 'repo__', exportName: 'repo' }],
+            })
+        ).toBe('menuButton')
+
+        expect(
+            removePrefixFromExportNameIfNeeded({
+                className: 'menu',
+                exportName: 'menu',
+                prefixesToRemove: [{ prefix: 'menu__', exportName: 'menu' }],
+            })
+        ).toBe('menu')
+    })
+})
+
+describe('getPrefixesToRemove', () => {
+    it('finds all prefixes to remove', () => {
+        const prefixesToRemove = getPrefixesToRemove({
+            'repo-header': 'repoHeader',
+            'repo-header__button': 'repoHeaderButton',
+            'repo-header--alert': 'repoHeaderAlert',
+            'navbar-nav': 'navbarNav',
+            spacer: 'spacer',
+        })
+
+        expect(prefixesToRemove).toEqual([{ prefix: 'repo-header__', exportName: 'repoHeader' }])
+    })
+})

src/transforms/globalCssToCssModule/postcss/__tests__/getCssModuleExportNameMap.test.ts

@@ -30,7 +30,7 @@ describe('getCssModuleExportNameMap', () => {
 
         expect(exportNameMap).toEqual({
             'repo-header': 'repoHeader',
-            'repo-header__button': 'repoHeaderButton',
+            'repo-header__button': 'button',
             'repo-header--alert': 'repoHeaderAlert',
             'navbar-nav': 'navbarNav',
             spacer: 'spacer',

src/transforms/globalCssToCssModule/postcss/exportNameMapPrefixes.ts

@@ -0,0 +1,74 @@
+import { decapitalize, isDefined } from '../../../utils'
+
+interface RemovedPrefix {
+    prefix: string
+    exportName: string
+}
+
+interface RemovePrefixFromExportNameIfNeededOptions {
+    className: string
+    exportName: string
+    prefixesToRemove: RemovedPrefix[]
+}
+
+/**
+ * If `className` starts with `prefix__` and `exportName` starts with `prefix` -> remove `prefix` from the export name.
+ *
+ * ```ts
+ * const exportName = removePrefixFromExportNameIfNeeded({
+ *     className: 'menu__button',
+ *     exportName: 'menuButton',
+ *     prefixesToRemove: [{ prefix: 'menu__', exportName: 'menu' }]
+ * })
+ *
+ * exportName === 'button'
+ * ```
+ */
+export function removePrefixFromExportNameIfNeeded(options: RemovePrefixFromExportNameIfNeededOptions): string {
+    const { className, exportName, prefixesToRemove } = options
+
+    const removedPrefix = prefixesToRemove.find(
+        removedPrefix => exportName.startsWith(removedPrefix.exportName) && className.startsWith(removedPrefix.prefix)
+    )
+
+    if (removedPrefix) {
+        return decapitalize(exportName.replace(removedPrefix.exportName, ''))
+    }
+
+    return exportName
+}
+
+/**
+ * Upon conversion to the CSS module, we lift `&__` nested selectors to the root level:
+ *
+ * ```scss
+ * .menu {
+ *   &__button { ... }
+ * }
+ *
+ * .menu {}
+ * .button {}
+ * ```
+ *
+ * Here `menu__` is a removed prefix because className changed:
+ * .menu__button -> .button
+ *
+ */
+export function getPrefixesToRemove(exportNameMap: Record<string, string>): RemovedPrefix[] {
+    const prefixesToRemove = Object.keys(exportNameMap)
+        .map(key => {
+            const matches = key.match(/(.+)__/)
+
+            if (matches) {
+                return {
+                    prefix: matches[0],
+                    exportName: exportNameMap[matches[1]],
+                }
+            }
+
+            return undefined
+        })
+        .filter(isDefined)
+
+    return [...new Set(prefixesToRemove)]
+}

src/transforms/globalCssToCssModule/postcss/getCssModuleExportNameMap.ts

@@ -3,6 +3,7 @@ import CssModuleLoaderCore, { Source } from 'css-modules-loader-core'
 import postcssNested from 'postcss-nested'
 
 import { createCssProcessor } from './createCssProcessor'
+import { getPrefixesToRemove, removePrefixFromExportNameIfNeeded } from './exportNameMapPrefixes'
 
 const EXPORT_NAME_PREFIX = 'prefix'
 
@@ -14,14 +15,71 @@ const sourceCssToClassNames = (source: Source): Promise<Core.Result> =>
 
 const removeCssNestingProcessor = createCssProcessor(postcssNested)
 
-// Get a mapping between export names that will be used in the TS file and CSS classes.
+/**
+ * Get a mapping between export names that will be used in the TS file and CSS classes.
+ */
 export async function getCssModuleExportNameMap(sourceCss: string): Promise<Record<string, string>> {
     const flattenedResult = await removeCssNestingProcessor(sourceCss)
     const classNames = await sourceCssToClassNames(flattenedResult.css)
 
     const exportNameClassNamePairs: [string, string][] = Object.entries(classNames.exportTokens).map(
-        ([property, className]) => [className.replace(`_${EXPORT_NAME_PREFIX}__`, ''), camelcase(property)]
+        ([exportName, className]) => {
+            const classNameWithoutExportPrefix = className.replace(`_${EXPORT_NAME_PREFIX}__`, '')
+
+            return [classNameWithoutExportPrefix, camelcase(exportName)]
+        }
+    )
+
+    /**
+     * Initial export name map without removed nesting of the selectors:
+     *
+     * ```scss
+     * .menu {
+     *     &__button {}
+     * }
+     * ```
+     *
+     * Export name map:
+     *
+     * ```ts
+     * {
+     *     menu: 'menu',
+     *     menu__button: 'menuButton'
+     * }
+     * ```
+     */
+    const initialExportNameMap = Object.fromEntries<string>(exportNameClassNamePairs)
+    const prefixesToRemove = getPrefixesToRemove(initialExportNameMap)
+
+    const exportNameMapPairs: [string, string][] = Object.entries(initialExportNameMap).map(
+        ([className, exportName]) => {
+            const exportNameWithoutPrefix = removePrefixFromExportNameIfNeeded({
+                className,
+                exportName,
+                prefixesToRemove,
+            })
+
+            return [className, exportNameWithoutPrefix]
+        }
     )
 
-    return Object.fromEntries<string>(exportNameClassNamePairs)
+    /**
+     * Export name map _with_ removed nesting of the selectors:
+     *
+     * ```scss
+     * .menu {
+     *     &__button {}
+     * }
+     * ```
+     *
+     * Export name map:
+     *
+     * ```ts
+     * {
+     *     menu: 'menu',
+     *     menu__button: 'button'
+     * }
+     * ```
+     */
+    return Object.fromEntries<string>(exportNameMapPairs)
 }

src/transforms/globalCssToCssModule/ts/getClassNameNodeReplacement.ts

@@ -42,26 +42,27 @@ export function getClassNameNodeReplacement(
     options: GetClassNameNodeReplacementOptions
 ): PropertyAccessExpression | JsxExpression | ComputedPropertyName | CallExpression {
     const { parentNode, exportNameReferences } = options
+    const parentKind = parentNode.getKind()
 
     if (exportNameReferences.length === 0) {
         throw new Error('`exportNameReferences` should not be empty!')
     }
 
     const replacementWithoutBraces = getClassNameNodeReplacementWithoutBraces(options)
 
-    if (parentNode.getKind() === SyntaxKind.JsxAttribute) {
+    if (parentKind === SyntaxKind.JsxAttribute) {
         return ts.factory.createJsxExpression(undefined, replacementWithoutBraces)
     }
 
-    if (parentNode.getKind() === SyntaxKind.PropertyAssignment) {
+    if (parentKind === SyntaxKind.PropertyAssignment) {
         return ts.factory.createComputedPropertyName(replacementWithoutBraces)
     }
 
-    if (parentNode.getKind() === SyntaxKind.ConditionalExpression) {
+    if (parentKind === SyntaxKind.ConditionalExpression || parentKind === SyntaxKind.CallExpression) {
         // Replace one class string inside of `ConditionalExpression` with the `exportName`.
         // className={classNames('d-flex', isActive ? 'kek' : 'pek')} -> className={classNames('d-flex', isActive ? styles.kek : 'pek')}
         return replacementWithoutBraces
     }
 
-    throw new Error(`Unsupported 'parentNode' type: ${parentNode.compilerNode.kind}`)
+    throw new Error(`Unsupported 'parentNode' type: ${parentNode.getKindName()}`)
 }

src/utils/index.ts

@@ -2,5 +2,7 @@ export function isDefined<T>(argument: T | undefined): argument is T {
     return argument !== undefined
 }
 
+export const decapitalize = ([first, ...rest]: string): string => first.toLowerCase() + rest.join('')
+
 export * from './formatWithPrettierEslint'
 export * from './formatWithStylelint'