diff --git a/src/autoProcess.ts b/src/autoProcess.ts index 2f822f01..794807a1 100644 --- a/src/autoProcess.ts +++ b/src/autoProcess.ts @@ -16,6 +16,7 @@ import { Options, Processed, } from './types'; +import { hasPostCssInstalled } from './modules/hasPostcssInstalled'; interface Transformers { typescript?: TransformerOptions; @@ -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 }; }, }; diff --git a/src/modules/hasPostcssInstalled.ts b/src/modules/hasPostcssInstalled.ts new file mode 100644 index 00000000..a8fdc61a --- /dev/null +++ b/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); +} diff --git a/src/modules/importAny.ts b/src/modules/importAny.ts new file mode 100644 index 00000000..fee66ebf --- /dev/null +++ b/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}`); + } +} diff --git a/src/transformers/scss.ts b/src/transformers/scss.ts index 78456ce0..d72dff13 100644 --- a/src/transformers/scss.ts +++ b/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']; diff --git a/src/utils.ts b/src/utils.ts index 0b7c6ab5..c54a3ce1 100644 --- a/src/utils.ts +++ b/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}`); - } -}; +}; \ No newline at end of file diff --git a/test/transformers/globalRule.test.ts b/test/transformers/globalRule.test.ts index 509148a9..e01b86ec 100644 --- a/test/transformers/globalRule.test.ts +++ b/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 = ``; + const opts = autoProcess(); + + expect(async () => await preprocess(template, opts)).not.toThrow(); + }); + it('wraps selector in :global(...) modifier', async () => { const template = ``; const opts = autoProcess(); diff --git a/test/transformers/scss.test.ts b/test/transformers/scss.test.ts index cbc19bd1..b04108a2 100644 --- a/test/transformers/scss.test.ts +++ b/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}'); }); }); diff --git a/test/utils.test.ts b/test/utils.test.ts index 5ffe23b1..ce1160d6 100644 --- a/test/utils.test.ts +++ b/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', () => {