feat: add custom PostCSS imports plugin (#23)

Author: valerybugakov

src/transforms/globalCssToCssModule/README.md

@@ -11,5 +11,5 @@ echo "Hello world"
 ## TODO
 
 - [x] Run code formatters on the updated files
-- [] Handle @import statements in SCSS
-- [] Add interactive CLI support
+- [x] Handle @import statements in SCSS
+- [ ] Add interactive CLI support

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

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`globalCssToCssModule transforms correctly 1`] = `
-"@import './RepositoriesPopover';
-
+"
 /* Woah! */
 .kek {
     color: red;

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

@@ -5,6 +5,8 @@ const replaceWhitespace = (value: string) => value.replace(/\s+/g, ' ').trim()
 describe('transformFileToCssModule', () => {
     it('correctly transforms provided CSS to CSS module', async () => {
         const sourceCss = `
+            @import './RepositoriesPopover';
+
             // .repo-header comment
             .repo-header {
                 flex: none;
@@ -29,6 +31,10 @@ describe('transformFileToCssModule', () => {
                 .navbar-nav {
                     white-space: nowrap;
                 }
+
+                @media (--xs-breakpoint-down) {
+                    border-radius: var(--border-radius);
+                }
             }
 
             .theme-light {
@@ -39,6 +45,8 @@ describe('transformFileToCssModule', () => {
         `
 
         const expectedCssModuleSource = `
+                @import 'wildcard/src/global-styles/breakpoints';
+
                 /* .repo-header comment*/
                 .repo-header {
                     flex: none;
@@ -58,6 +66,10 @@ describe('transformFileToCssModule', () => {
                     :global(.navbar-nav) {
                         white-space: nowrap;
                     }
+
+                    @media (--xs-breakpoint-down) {
+                        border-radius: var(--border-radius);
+                    }
                 }
 
                 /* &__button comment*/

src/transforms/globalCssToCssModule/postcss/transformFileToCssModule.ts

@@ -2,6 +2,7 @@ import path from 'path'
 
 import { createCssProcessor } from './createCssProcessor'
 import { postcssToCssModulePlugin } from './postcssToCssModulePlugin'
+import { updateImportsPlugin } from './updateImportsPlugin'
 
 interface TransformFileToCssModuleOptions {
     sourceCss: string
@@ -18,7 +19,7 @@ export async function transformFileToCssModule(
 ): Promise<TransformFileToCssModuleResult> {
     const { sourceCss, sourceFilePath } = options
 
-    const transformFileToCssModuleProcessor = createCssProcessor(postcssToCssModulePlugin())
+    const transformFileToCssModuleProcessor = createCssProcessor(updateImportsPlugin(), postcssToCssModulePlugin())
     const transformedResult = await transformFileToCssModuleProcessor(sourceCss)
 
     const { dir, name } = path.parse(sourceFilePath)

src/transforms/globalCssToCssModule/postcss/updateImportsPlugin.ts

@@ -0,0 +1,48 @@
+import { AcceptedPlugin, Container } from 'postcss'
+
+interface UpdateImportsPluginOptions {
+    breakpointsImportPath?: string
+}
+
+/**
+ * PostCSS plugin that:
+ * 1. Adds breakpoints @import statement if needed.
+ * 2. Removes all other @import statements.
+ */
+export function updateImportsPlugin(options: UpdateImportsPluginOptions = {}): AcceptedPlugin {
+    const { breakpointsImportPath = 'wildcard/src/global-styles/breakpoints' } = options
+    let hasBreakpointsImport = false
+
+    return {
+        postcssPlugin: 'postcss-update-imports',
+        AtRule(atRule) {
+            const { name, params } = atRule
+
+            /**
+             * In case of the @import statement:
+             * 1. Update `hasBreakpointsImport` if breakpoints import if found.
+             * 2. Remove all other @import statements.
+             */
+            if (name === 'import') {
+                const isBreakpointImport = params.includes(breakpointsImportPath)
+
+                if (isBreakpointImport) {
+                    hasBreakpointsImport = true
+                } else {
+                    // To avoid resetting `raws` which changes line-breaks — use `Container.removeChild()`
+                    // https://github.com/postcss/postcss/blob/75966a9d069be54c997d8b40358342e23bb81328/lib/root.js#L18
+                    Container.prototype.removeChild.call(atRule.parent, atRule)
+                }
+            }
+
+            /**
+             * In case of the @media rule:
+             * Add breakpoints import statement to the file if it's not yet added.
+             */
+            if (name === 'media' && !hasBreakpointsImport) {
+                atRule.root().prepend(`@import '${breakpointsImportPath}';`)
+                hasBreakpointsImport = true
+            }
+        },
+    }
+}