fix(css): safer transformCSS logic

Author: harlan-zw

src/core/utils.ts

@@ -1,4 +1,6 @@
+import { WindiPluginUtils } from '@windicss/plugin-utils'
 import { HAS_DIRECTIVE_TEST, HAS_THEME_FUNCTION_TEST } from './constants'
+import debug from './debug'
 
 export const cssRequiresTransform = (source: string) => {
   return HAS_DIRECTIVE_TEST.test(source) || HAS_THEME_FUNCTION_TEST.test(source)
@@ -7,3 +9,27 @@ export const cssRequiresTransform = (source: string) => {
 export const isJsx = (source: string) => {
   return /{`(.*)`}/gms.test(source)
 }
+
+export const transformCSS = (service: WindiPluginUtils, source: string, resource: string) => {
+  if (!source || source.length <= 0)
+    return source
+
+  // make sure the transform is required, can be expensive
+  if (!cssRequiresTransform(source))
+    return source
+
+  let output = source
+  try {
+    output = service.transformCSS(source, resource, { globaliseKeyframes: true })
+    if (!output || output.length <= 0) {
+      console.warn(`[WindiCSS] Failed to transform CSS for resource: ${resource}.`)
+      return source
+    }
+    debug.loader('Transformed CSS', resource)
+  }
+  catch (e) {
+    console.warn(`[WindiCSS] Failed to transform CSS for resource: ${resource}.`)
+    return source
+  }
+  return output
+}

src/loaders/transform-css.ts

@@ -1,7 +1,6 @@
 import type webpack from 'webpack'
 import type { Compiler } from '../interfaces'
-import debug from '../core/debug'
-import { cssRequiresTransform } from '../core/utils'
+import { transformCSS } from '../core/utils'
 
 function TransformCss(
   this: webpack.loader.LoaderContext,
@@ -16,19 +15,7 @@ function TransformCss(
   if (!service)
     return source
 
-  // only run if there's a directive to apply
-  if (!cssRequiresTransform(source))
-    return source
-
-  let output = source
-  try {
-    output = service.transformCSS(source, this.resource)
-    debug.loader('Transformed CSS', this.resource)
-  }
-  catch (e) {
-    this.emitWarning(`[Windi CSS] Failed to css for resource: ${this.resource}.`)
-  }
-  return output || source
+  return transformCSS(service, source, this.resource)
 }
 
 export default TransformCss

src/loaders/transform-template.ts

@@ -4,7 +4,7 @@ import defaults from 'lodash/defaults'
 import loaderUtils from 'loader-utils'
 import debug from '../core/debug'
 import type { Compiler } from '../interfaces'
-import { cssRequiresTransform, isJsx } from '../core/utils'
+import { isJsx, transformCSS } from '../core/utils'
 
 function TransformTemplate(
   this: webpack.loader.LoaderContext,
@@ -22,13 +22,8 @@ function TransformTemplate(
   /*
    * Via the pitcher loader we can transfer post-interpreted CSS
    */
-  if (this.resource.indexOf('type=style') > 0) {
-    // if no transform is required
-    if (!cssRequiresTransform(source))
-      return source
-
-    return service.transformCSS(source, this.resource)
-  }
+  if (this.resource.indexOf('type=style') > 0)
+    return transformCSS(service, source, this.resource)
 
   const hasHtmlWebpackPlugin = this.loaders.filter((loader) => {
     // loader name as unresolved module
@@ -62,9 +57,6 @@ function TransformTemplate(
         debug.loader('Template has unsupported block, skipping resource', this.resource)
         return match
       }
-      if (!cssRequiresTransform(match))
-        return match
-
       // for jsx styles we need to replace the contents of template strings
       if (isJsx(css)) {
         let m, transformedCSS
@@ -77,14 +69,16 @@ function TransformTemplate(
           // The result can be accessed through the `m`-variable.
           m.forEach((match, groupIndex) => {
             if (groupIndex === 1) {
-              transformedCSS = `<style${meta}>\n{\`${service.transformCSS(match, this.resource)}\n\`}</style>`
+              const transformedJSXCSS = transformCSS(service, match, this.resource)
+              transformedCSS = `<style${meta}>\n{\`${transformedJSXCSS}\n\`}</style>`
               debug.loader('jsx transformed', transformedCSS)
             }
           })
         }
         return transformedCSS ?? match
       }
-      return `<style${meta}>\n${service.transformCSS(css, this.resource)}\n</style>`
+      const transformedCSS = transformCSS(service, css, this.resource)
+      return `<style${meta}>\n${transformedCSS}\n</style>`
     })
     debug.loader('Transformed template ', this.resource)
     const transformed = service.transformGroups(templateWithTransformedCSS)
@@ -94,7 +88,7 @@ function TransformTemplate(
       output = templateWithTransformedCSS
   }
   catch (e) {
-    this.emitWarning(`[Windi CSS] Failed to transform groups and css for template: ${this.resource}.`)
+    this.emitWarning(`[WindiCSS] Failed to transform groups and css for template: ${this.resource}.`)
   }
   return output
 }