feat: Add async style compilation support (#13)

Author: znck

README.md

@@ -116,6 +116,10 @@ interface StyleCompileOptions {
   map?: any
   scoped?: boolean
   trim?: boolean
+  preprocessLang?: string
+  preprocessOptions?: any
+  postcssOptions?: any
+  postcssPlugins?: any[]
 }
 
 interface StyleCompileResults {
@@ -125,3 +129,7 @@ interface StyleCompileResults {
   errors: string[]
 }
 ```
+
+### compileStyleAsync(StyleCompileOptions)
+
+Same as `compileStyle(StyleCompileOptions)` but it returns a Promise resolving to `StyleCompileResults`. It can be used with async postcss plugins.

lib/compileStyle.ts

@@ -17,6 +17,10 @@ export interface StyleCompileOptions {
   postcssPlugins?: any[]
 }
 
+export interface AsyncStyleCompileOptions extends StyleCompileOptions {
+  isAsync?: boolean
+}
+
 export interface StyleCompileResults {
   code: string
   map: any | void
@@ -26,6 +30,18 @@ export interface StyleCompileResults {
 
 export function compileStyle (
   options: StyleCompileOptions
+): StyleCompileResults { 
+  return doCompileStyle({ ...options, isAsync: false })
+}
+
+export function compileStyleAsync (
+  options: StyleCompileOptions
+): Promise<StyleCompileResults> {
+  return Promise.resolve(doCompileStyle({ ...options, isAsync: true }))
+}
+
+export function doCompileStyle (
+  options: AsyncStyleCompileOptions
 ): StyleCompileResults {
   const {
     filename,
@@ -63,12 +79,30 @@ export function compileStyle (
   }
 
   let result, code, outMap
-  const errors = []
+  const errors: any[] = []
   if (preProcessedSource && preProcessedSource.errors.length) {
     errors.push(...preProcessedSource.errors)
   }
   try {
     result = postcss(plugins).process(source, postCSSOptions)
+
+    // In async mode, return a promise.
+    if (options.isAsync) {
+      return result
+        .then((result: LazyResult): StyleCompileResults => ({
+          code: result.css || '',
+          map: result.map && result.map.toJSON(),
+          errors,
+          rawResult: result
+        }))
+        .catch((error: Error): StyleCompileResults => ({
+          code: '',
+          map: undefined,
+          errors: [...errors, error.message],
+          rawResult: undefined
+        }))
+    }
+
     // force synchronous transform (we know we only have sync plugins)
     code = result.css
     outMap = result.map

lib/index.ts

@@ -13,6 +13,7 @@ import {
 
 import {
   compileStyle,
+  compileStyleAsync,
   StyleCompileOptions,
   StyleCompileResults
 } from './compileStyle'
@@ -21,7 +22,8 @@ import {
 export {
   parse,
   compileTemplate,
-  compileStyle
+  compileStyle,
+  compileStyleAsync
 }
 
 // types

test/compileStyle.spec.ts

@@ -1,5 +1,5 @@
 import { parse } from '../lib/parse'
-import { compileStyle } from '../lib/compileStyle'
+import { compileStyle, compileStyleAsync } from '../lib/compileStyle'
 
 test('preprocess less', () => {
   const style = parse({
@@ -122,5 +122,34 @@ test('custom postcss options', () => {
     postcssOptions: { random: 'foo' }
   })
 
-  expect((<any>result.rawResult).opts.random).toBe('foo')
+  expect((result.rawResult).opts.random).toBe('foo')
+})
+
+test('async postcss plugin in sync mode', () => {
+  const result = compileStyle({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: '.foo { color: red }',
+    scoped: false,
+    postcssPlugins: [require('postcss').plugin('test-plugin', () => async (result) => result)]
+  })
+
+  expect(result.errors).toHaveLength(1)
+})
+
+
+test('async postcss plugin', async () => {
+  const promise = compileStyleAsync({
+    id: 'v-scope-xxx',
+    filename: 'example.vue',
+    source: '.foo { color: red }',
+    scoped: false,
+    postcssPlugins: [require('postcss').plugin('test-plugin', () => async (result) => result)]
+  })
+
+  expect(promise instanceof Promise).toBe(true)
+  
+  const result = await promise
+  expect(result.errors).toHaveLength(0)
+  expect(result.code).toEqual(expect.stringContaining('color: red'))
 })