fix: 🐛 run globalRule only if postcss is installed

Author: kaisermann

src/autoProcess.ts

@@ -16,6 +16,7 @@ import {
   Options,
   Processed,
 } from './types';
+import { hasPostCssInstalled } from './modules/hasPostcssInstalled';
 
 interface Transformers {
   typescript?: TransformerOptions<Options.Typescript>;
@@ -261,26 +262,27 @@ export function autoPreprocess(
         dependencies = concat(dependencies, transformed.dependencies);
       }
 
-      if (attributes.global) {
-        const transformed = await runTransformer('globalStyle', null, {
+      if (await hasPostCssInstalled()) {
+        if (attributes.global) {
+          const transformed = await runTransformer('globalStyle', null, {
+            content: code,
+            map,
+            filename,
+          });
+
+          code = transformed.code;
+          map = transformed.map;
+        }
+
+        const transformed = await runTransformer('globalRule', null, {
           content: code,
           map,
           filename,
         });
-
         code = transformed.code;
         map = transformed.map;
       }
 
-      const transformed = await runTransformer('globalRule', null, {
-        content: code,
-        map,
-        filename,
-      });
-
-      code = transformed.code;
-      map = transformed.map;
-
       return { code, map, dependencies };
     },
   };

src/modules/hasPostcssInstalled.ts

@@ -0,0 +1,17 @@
+let cachedResult: boolean;
+
+export async function hasPostCssInstalled() {
+  if (cachedResult != null) {
+    return cachedResult;
+  }
+
+  let result = false;
+  try {
+    await import('postcss');
+    result = true;
+  } catch (e) {
+    result = false;
+  }
+
+  return (cachedResult = result);
+}

src/modules/importAny.ts

@@ -0,0 +1,11 @@
+export async function importAny(...modules: string[]) {
+  try {
+    const mod = await modules.reduce(
+      (acc, moduleName) => acc.catch(() => import(moduleName)),
+      Promise.reject(),
+    );
+    return mod;
+  } catch (e) {
+    throw new Error(`Cannot find any of modules: ${modules}`);
+  }
+}

src/transformers/scss.ts

@@ -1,7 +1,8 @@
 import { Result } from 'sass';
 
-import { importAny, getIncludePaths } from '../utils';
+import { getIncludePaths } from '../utils';
 import { Transformer, Processed, Options } from '../types';
+import { importAny } from '../modules/importAny';
 
 let sass: Options.Sass['implementation'];
 

src/utils.ts

@@ -158,16 +158,4 @@ export const runTransformer = async (
       `Error transforming '${name}'.\n\nMessage:\n${e.message}\n\nStack:\n${e.stack}`,
     );
   }
-};
-
-export const importAny = async (...modules: string[]) => {
-  try {
-    const mod = await modules.reduce(
-      (acc, moduleName) => acc.catch(() => import(moduleName)),
-      Promise.reject(),
-    );
-    return mod;
-  } catch (e) {
-    throw new Error(`Cannot find any of modules: ${modules}`);
-  }
-};
+};

test/transformers/globalRule.test.ts

@@ -2,6 +2,13 @@ import autoProcess from '../../src';
 import { preprocess } from '../utils';
 
 describe('transformer - globalRule', () => {
+  it('does nothing if postcss is not installed', async () => {
+    const template = `<style>:global div{color:red}:global .test{}</style>`;
+    const opts = autoProcess();
+
+    expect(async () => await preprocess(template, opts)).not.toThrow();
+  });
+
   it('wraps selector in :global(...) modifier', async () => {
     const template = `<style>:global div{color:red}:global .test{}</style>`;
     const opts = autoProcess();

test/transformers/scss.test.ts

@@ -7,7 +7,7 @@ import { Options } from '../../src/types';
 const implementation: Options.Sass['implementation'] = {
   render(options, callback) {
     callback(null, {
-      css: Buffer.from('Foo'),
+      css: Buffer.from('div#red{color:red}'),
       stats: {
         entry: 'data',
         start: 0,
@@ -18,7 +18,7 @@ const implementation: Options.Sass['implementation'] = {
     });
   },
   renderSync: () => ({
-    css: Buffer.from('Bar'),
+    css: Buffer.from('div#green{color:green}'),
     stats: {
       entry: 'data',
       start: 0,
@@ -58,7 +58,7 @@ describe('transformer - scss', () => {
       },
     });
     const preprocessed = await preprocess(template, opts);
-    expect(preprocessed.toString()).toContain('Foo');
+    expect(preprocessed.toString()).toContain('div#red{color:red}');
   });
 
   it('should prepend scss content via `data` option property - via renderSync', async () => {
@@ -95,6 +95,6 @@ describe('transformer - scss', () => {
       },
     });
     const preprocessed = await preprocess(template, opts);
-    expect(preprocessed.toString()).toContain('Bar');
+    expect(preprocessed.toString()).toContain('div#green{color:green}');
   });
 });

test/utils.test.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path';
 
-import { importAny, getIncludePaths } from '../src/utils';
+import { getIncludePaths } from '../src/utils';
+import { importAny } from '../src/modules/importAny';
 
 describe('utils - importAny', () => {
   it('should throw error when none exist', () => {