feat: JSX Support and new tests

Support for JSX template resolving, fixes #15 & #65 & #46 (maybe)
Updated windi.css alias root resolving, fixes #34 & #65 (maybe)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,26 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Clone repository '...'
+2. Run '....'
+3. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/test.yml

@@ -0,0 +1,40 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  ci:
+    timeout-minutes: 20
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ macos-latest, windows-latest, ubuntu-latest ]
+        node: [ 14 ]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/cache@v2
+        id: cache
+        with:
+          path: "node_modules"
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn
+
+      - name: Build ts
+        run: yarn build
+
+      - name: Run tests
+        run: yarn test
+
+      - name: Coverage
+        uses: codecov/codecov-action@v1

.gitignore

@@ -29,3 +29,5 @@ dist
 .nuxt
 .next
 .env
+
+.umi

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  roots: [
+    '<rootDir>',
+  ],
+  testMatch: [
+    '**/test/**.test.js',
+  ],
+}

package.json

@@ -48,22 +48,29 @@
 		"windicss": "^2.5.14"
 	},
 	"devDependencies": {
+		"@babel/preset-env": "^7.14.0",
+		"@babel/preset-react": "^7.13.13",
 		"@types/color-string": "^1.5.0",
 		"@types/debug": "^4.1.5",
 		"@types/jest": "^26.0.20",
 		"@types/loader-utils": "^2.0.1",
 		"@types/webpack": "^4.41.26",
+		"babel-loader": "^8.2.2",
+		"css-loader": "^5.2.4",
 		"dotenv-cli": "^4.0.0",
 		"esbuild": "^0.8.50",
 		"husky": "^4.3.8",
 		"jest": "^26.6.3",
 		"lint-staged": "^10.5.4",
 		"memfs": "^3.2.0",
-		"release-it": "^14.5.0",
+		"release-it": "^14.6.1",
 		"schema-utils": "^3.0.0",
 		"ts-jest": "^26.5.0",
 		"typescript": "^4.1.3",
 		"unionfs": "^4.4.0",
+		"vue-loader": "^15.9.6",
+		"vue-style-loader": "^4.1.3",
+		"vue-template-compiler": "^2.6.12",
 		"webpack": "^4.44.2",
 		"webpack5": "npm:webpack@^5.0.0",
 		"xo": "^0.37.1"

src/debug.ts

@@ -0,0 +1,7 @@
+import _debug from "debug";
+import {NAME} from "./constants";
+
+export default {
+  plugin: _debug(`${NAME}:plugin`),
+  loader: _debug(`${NAME}:loader`),
+}

src/loaders/transform-css.ts

@@ -1,5 +1,6 @@
 import type webpack from 'webpack'
 import type {Compiler} from '../interfaces'
+import debug from '../debug'
 
 function TransformCss(
   this: webpack.loader.LoaderContext,
@@ -15,9 +16,17 @@ function TransformCss(
     return source
   }
 
+  // only transform css if there is an @apply
+  const hasWindiApply = source.indexOf('@apply') > -1
+  if (!hasWindiApply) {
+    debug.loader('Skipping CSS transform, no @apply', this.resource)
+    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}.`)
   }

src/loaders/transform-template.ts

@@ -1,6 +1,7 @@
 import type webpack from 'webpack'
 import type {Compiler} from '../interfaces'
 import { relative } from 'path'
+import debug from '../debug'
 
 function TransformTemplate(
   this: webpack.loader.LoaderContext,
@@ -16,7 +17,6 @@ function TransformTemplate(
     return source
   }
 
-
   const hasHtmlWebpackPlugin = this.loaders.filter(loader => {
     // loader name as unresolved module
     return(loader.loader && loader.loader.indexOf('html-webpack-plugin') > 0)
@@ -33,16 +33,39 @@ function TransformTemplate(
 
   let output = source
   try {
-    // @ts-ignore
-    output = service.transformGroups(source.replace(/<style(.*?)>((.|\s)*)<\/style>/gm, (match, meta, css) => {
-      // don't transform languages that aren't supported
-      // see: https://github.com/windicss/nuxt-windicss-module/issues/13
-      // @todo setup pitcher for styles
-      if (meta.indexOf('sass') > -1 || meta.indexOf('stylus') > -1 || meta.indexOf('less') > -1) {
-        return `<style${meta}>\n${css}\n</style>`
+    const templateWithTransformedCSS = source.replace(/<style(.*?)>(.*)<\/style>/gms, (match, meta, css) => {
+      // if there's no windi code going on then we shouldn't transform anything
+      const hasWindiApply = match.indexOf('@apply') > -1
+      // windi does not support certain types of css langs
+      const isUnsupportedBlock = meta.indexOf('sass') > -1 || meta.indexOf('stylus') > -1 || meta.indexOf('less') > -1
+      // bail out, return the original match
+      if (!hasWindiApply || isUnsupportedBlock) {
+        debug.loader('skipping resource', this.resource)
+        return match
+      }
+      // for jsx styles we need to replace the contents of template strings
+      if (/{`(.*)`}/gms.test(css)) {
+        let m, transformedCSS;
+        const jsxMatcher = /{`(.*)`}/gms
+        while ((m = jsxMatcher.exec(css)) !== null) {
+          // This is necessary to avoid infinite loops with zero-width matches
+          if (m.index === jsxMatcher.lastIndex) {
+            jsxMatcher.lastIndex++;
+          }
+          // 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>`
+              debug.loader('jsx transformed', transformedCSS)
+            }
+          });
+        }
+        return transformedCSS ?? match
       }
       return `<style${meta}>\n${service.transformCSS(css, this.resource)}\n</style>`
-    }))
+    })
+    debug.loader('template', this.resource, templateWithTransformedCSS)
+    output = service.transformGroups(templateWithTransformedCSS)
   } catch (e) {
     this.emitWarning(`[Windi CSS] Failed to transform groups and css for template: ${this.resource}.`)
   }

src/plugin.ts

@@ -1,20 +1,16 @@
-import {Compiler, Options} from './interfaces'
 import {createUtils, defaultConfigureFiles} from '@windicss/plugin-utils'
-import {resolve} from 'upath'
-import {MODULE_ID_VIRTUAL, NAME} from './constants'
+import {resolve,join} from 'upath'
 import {existsSync} from 'fs'
 import VirtualModulesPlugin from 'webpack-virtual-modules'
-import _debug from 'debug'
+import {Compiler, Options} from './interfaces'
+import {MODULE_ID,MODULE_ID_VIRTUAL, NAME} from './constants'
+import debug from './debug'
 
 const loadersPath = resolve(__dirname, 'loaders')
 const transformCSSLoader = resolve(loadersPath, 'transform-css.js')
 const transformTemplateLoader = resolve(loadersPath, 'transform-template.js')
 const virtualModuleLoader = resolve(loadersPath, 'virtual-module.js')
 
-const debug = {
-  plugin: _debug(`${NAME}:plugin`),
-}
-
 class WindiCSSWebpackPlugin {
   options
 
@@ -28,16 +24,19 @@ class WindiCSSWebpackPlugin {
   }
 
   apply(compiler: Compiler): void {
-    // @ts-expect-error
-    const root = this.options.root ?? compiler.options.resolve.alias['~'] ?? compiler.context
+    const root = this.options.root ?? compiler.options.resolve?.alias?.['~'] ?? compiler.context
     // Fix possibly undefined issues
     if (!compiler.options.module || !compiler.options.module.rules) {
       return
     }
 
+    if (!compiler.options.resolve) {
+      compiler.options.resolve = {}
+    }
     // setup alias
-    if (compiler.options.resolve?.alias) {
-      compiler.options.resolve.alias['windi.css'] = resolve(MODULE_ID_VIRTUAL)
+    compiler.options.resolve.alias = {
+      ...compiler.options.resolve.alias,
+      [MODULE_ID]: join(root, MODULE_ID_VIRTUAL)
     }
 
     debug.plugin('options', this.options)
@@ -46,14 +45,13 @@ class WindiCSSWebpackPlugin {
      *
      * e.g. hover:(bg-teal-900 rounded-full) -> hover:bg-teal-900 hover:rounded-full
      */
-    if (this.options.transformGroups) {
-      compiler.options.module.rules.push({
-        include(resource) {
-          return Boolean(compiler.$windyCSSService?.isDetectTarget(resource))
-        },
-        use: [{loader: transformTemplateLoader}],
-      })
-    }
+    compiler.options.module.rules.push({
+      include(resource) {
+        debug.plugin('transformGroups', resource, Boolean(compiler.$windyCSSService?.isDetectTarget(resource)))
+        return Boolean(compiler.$windyCSSService?.isDetectTarget(resource))
+      },
+      use: [{loader: transformTemplateLoader}],
+    })
 
     /*
      * Virtual module loader
@@ -155,7 +153,7 @@ class WindiCSSWebpackPlugin {
         if (!hasConfig) {
           for (const name of defaultConfigureFiles) {
             const path = resolve(root, name)
-            debug.plugin('missing dependency at', path)
+            debug.plugin('setting watcher for config creation', path)
             compilation.missingDependencies.add(path)
           }
         }