Merge pull request #66 from windicss/feat/jsx-and-tests

feat: JSX Support and new tests

.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)
  }
  }