chore: add global-css-to-css-module postcss unit tests (#13)

Author: valerybugakov

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

@@ -14,7 +14,7 @@ exports[`globalCssToCssModule transforms correctly 1`] = `
 }
 
 /* Let's see how you handle global top-level classes!*/
-:global(.theme-redesign) .kek {
+:global(.theme-light) .kek {
     color: red;
 }
 
@@ -77,7 +77,7 @@ exports[`globalCssToCssModule transforms correctly 1`] = `
         margin: 0.5rem 0.625rem 0.5rem 0;
         padding: 0.25rem;
 
-        :global(.theme-redesign) & {
+        :global(.theme-light) & {
             margin-top: 0;
             margin-bottom: 0;
         }
@@ -106,8 +106,8 @@ exports[`globalCssToCssModule transforms correctly 1`] = `
             /* background: var(--color-bg-1);*/
             background: var(--color-bg-1);
 
-            /* .theme-redesign & {*/
-            :global(.theme-redesign) & {
+            /* .theme-light & {*/
+            :global(.theme-light) & {
                 background: inherit;
             }
         }

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

@@ -11,7 +11,7 @@
 }
 
 // Let's see how you handle global top-level classes!
-.theme-redesign .kek {
+.theme-light .kek {
     color: red;
 }
 
@@ -44,8 +44,8 @@
             // background: var(--color-bg-1);
             background: var(--color-bg-1);
 
-            // .theme-redesign & {
-            .theme-redesign & {
+            // .theme-light & {
+            .theme-light & {
                 background: inherit;
             }
         }
@@ -68,7 +68,7 @@
         margin: 0.5rem 0.625rem 0.5rem 0;
         padding: 0.25rem;
 
-        .theme-redesign & {
+        .theme-light & {
             margin-top: 0;
             margin-bottom: 0;
         }

src/transforms/globalCssToCssModule/css/postcssToCssModulePlugin.ts

@@ -3,8 +3,8 @@ import path from 'path'
 
 import { Project } from 'ts-morph'
 
-import { getCssModuleExportNameMap } from './css/getCssModuleExportNameMap'
-import { transformFileToCssModule } from './css/transformFileToCssModule'
+import { getCssModuleExportNameMap } from './postcss/getCssModuleExportNameMap'
+import { transformFileToCssModule } from './postcss/transformFileToCssModule'
 import { addClassNamesUtilImportIfNeeded } from './ts/classNamesUtility'
 import { getNodesWithClassName } from './ts/getNodesWithClassName'
 import { STYLES_IDENTIFIER, processNodesWithClassName } from './ts/processNodesWithClassName'
@@ -41,11 +41,11 @@ export function globalCssToCssModule(project: Project): Promise<CodemodResult[]>
 
         // TODO: add check if SCSS file doesn't exist and exit if it's not found.
         const sourceCss = readFileSync(cssFilePath, 'utf8')
-        const exportNameMap = await getCssModuleExportNameMap(sourceCss)
         const { css: cssModuleSource, filePath: cssModuleFileName } = await transformFileToCssModule(
             sourceCss,
             cssFilePath
         )
+        const exportNameMap = await getCssModuleExportNameMap(cssModuleSource)
 
         processNodesWithClassName({
             exportNameMap,

src/transforms/globalCssToCssModule/globalCssToCssModule.ts

@@ -0,0 +1,39 @@
+import { getCssModuleExportNameMap } from '../getCssModuleExportNameMap'
+
+describe('getCssModuleExportNameMap', () => {
+    it('returns correct `exportNameMap`', async () => {
+        const exportNameMap = await getCssModuleExportNameMap(`
+            .repo-header {
+                flex: none;
+
+                &:hover {
+                    opacity: 1;
+                }
+
+                &__button {
+                    margin-top: 1px;
+                }
+
+                &--alert {
+                    border-width: 1px 0;
+                }
+
+                .navbar-nav {
+                    white-space: nowrap;
+                }
+            }
+
+            .spacer {
+                flex: 1 1 0;
+            }
+        `)
+
+        expect(exportNameMap).toEqual({
+            'repo-header': 'repoHeader',
+            'repo-header__button': 'repoHeaderButton',
+            'repo-header--alert': 'repoHeaderAlert',
+            'navbar-nav': 'navbarNav',
+            spacer: 'spacer',
+        })
+    })
+})

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

@@ -0,0 +1,80 @@
+import { transformFileToCssModule } from '../transformFileToCssModule'
+
+const replaceWhitespace = (value: string) => value.replace(/\s+/g, ' ').trim()
+
+describe('transformFileToCssModule', () => {
+    it('correctly transforms provided CSS to CSS module', async () => {
+        const cssSource = `
+            // .repo-header comment
+            .repo-header {
+                flex: none;
+
+                &:hover {
+                    opacity: 1;
+                }
+
+                // &__button comment
+                &__button {
+                    margin-top: 1px;
+                }
+
+                &--alert {
+                    border-width: 1px 0;
+
+                    .theme-dark & {
+                        background: black;
+                    }
+                }
+
+                .navbar-nav {
+                    white-space: nowrap;
+                }
+            }
+
+            .theme-light {
+                .spacer {
+                    flex: 1 1 0;
+                }
+            }
+        `
+
+        const expectedCssModuleSource = `
+                /* .repo-header comment*/
+                .repo-header {
+                    flex: none;
+
+                    &:hover {
+                        opacity: 1;
+                    }
+
+                    &--alert {
+                        border-width: 1px 0;
+
+                        :global(.theme-dark) & {
+                            background: black;
+                        }
+                    }
+
+                    :global(.navbar-nav) {
+                        white-space: nowrap;
+                    }
+                }
+
+                /* &__button comment*/
+                .button {
+                    margin-top: 1px;
+                }
+
+                :global(.theme-light) {
+                    .spacer {
+                        flex: 1 1 0;
+                    }
+                }
+        `
+
+        const { css, filePath } = await transformFileToCssModule(cssSource, 'whatever.scss')
+
+        expect(replaceWhitespace(css)).toEqual(replaceWhitespace(expectedCssModuleSource))
+        expect(filePath).toEqual('whatever.module.scss')
+    })
+})