fix(types): prefer webpack augmentation

Fixes #116

Author: harlan-zw

src/loaders/dev-tools.ts

@@ -1,9 +1,8 @@
 import { readFileSync } from 'fs'
-import type webpack from 'webpack'
 import { resolve } from 'pathe'
+import type { Compiler, loader } from 'webpack'
 import { isDev, isWebCompilerTarget } from '../core/utils'
 import { DEVTOOLS_POST_PATH } from '../core/constants'
-import type { Compiler } from '../types'
 
 const DEVTOOLS_CLIENT_PATH = resolve(__dirname, '../runtime/client.cjs')
 
@@ -21,7 +20,7 @@ style.innerHTML = ${JSON.stringify(comment + css)}
 document.head.prepend(style)
 `
 }
-async function devtoolsLoader(this: webpack.loader.LoaderContext, source: string): Promise<void> {
+async function devtoolsLoader(this: loader.LoaderContext, source: string): Promise<void> {
   const callback = this.async()!
 
   if (!this._compiler) {
@@ -31,13 +30,13 @@ async function devtoolsLoader(this: webpack.loader.LoaderContext, source: string
 
   this.cacheable(true)
 
-  const { port, host } = await (this._compiler as Compiler).$windi.server.ensureStart()
+  const { port, host } = await this._compiler.$windi.server.ensureStart()
 
   if (isWebCompilerTarget(this._compiler.options.target) && isDev()) {
     const clientContent = readFileSync(DEVTOOLS_CLIENT_PATH, 'utf-8')
       .replace('__POST_PATH__', `http://${host}:${port}${DEVTOOLS_POST_PATH}`)
 
-    const mockClasses = getMockClassesInjector(this._compiler as Compiler)
+    const mockClasses = getMockClassesInjector(this._compiler)
 
     callback(null, `${clientContent}\n${mockClasses}`)
   }

src/loaders/virtual-module.ts

@@ -1,14 +1,13 @@
 import fs, { readFileSync } from 'fs'
-import type webpack from 'webpack'
+import type { loader } from 'webpack'
 import { defaultConfigureFiles } from '@windicss/plugin-utils'
 import type { LayerName } from '@windicss/plugin-utils'
-import type { Compiler } from '../types'
 import { MODULE_ID_VIRTUAL_TEST } from '../core/constants'
 import debug from '../core/debug'
 import { def } from '../core/utils'
 
 async function VirtualModule(
-  this: webpack.loader.LoaderContext,
+  this: loader.LoaderContext,
   source: string,
 ): Promise<void> {
   const callback = this.async()!
@@ -17,7 +16,7 @@ async function VirtualModule(
     return
   }
   this.cacheable(false)
-  const service = (this._compiler as Compiler).$windi
+  const service = this._compiler.$windi
   const match = this.resource.match(MODULE_ID_VIRTUAL_TEST)
   if (!service || !match) {
     const error = new Error(`Failed to match the resource "${this.resource}" to a WindiCSS virtual module.`)

src/loaders/windicss-css.ts

@@ -1,16 +1,15 @@
-import type webpack from 'webpack'
-import type { Compiler } from '../types'
+import type { loader } from 'webpack'
 import { transformCSS } from '../core/utils'
 
 function WindicssCss(
-  this: webpack.loader.LoaderContext,
+  this: loader.LoaderContext,
   source: string,
 ): string {
   if (!this._compiler)
     return source
 
   this.cacheable(true)
-  const service = (this._compiler as Compiler).$windi
+  const service = this._compiler.$windi
 
   if (!service)
     return source

src/loaders/windicss-style-pitcher.ts

@@ -1,4 +1,4 @@
-import type webpack from 'webpack'
+import type { loader } from 'webpack'
 
 type LoaderTest = (l: { path: string; ident?: string }) => boolean
 
@@ -12,7 +12,7 @@ const cssLoaderTest: LoaderTest = l => /(\/|\\|@)css-loader/.test(l.path)
   *
   * We move it just after the PostCSS loader
   */
-export const pitch = function (this: webpack.loader.LoaderContext, remainingRequest: string) {
+export const pitch = function (this: loader.LoaderContext, remainingRequest: string) {
   const findLoaderIndex = (test: LoaderTest) => this.loaders.findIndex((loader) => {
     return test(loader) && !loader.normalExecuted
   })

src/loaders/windicss-template.ts

@@ -1,20 +1,19 @@
-import type webpack from 'webpack'
 import compileTemplate from 'lodash/template'
 import defaults from 'lodash/defaults'
 import loaderUtils from 'loader-utils'
+import type { loader } from 'webpack'
 import debug from '../core/debug'
-import type { Compiler } from '../types'
 import { def, isJsx, transformCSS } from '../core/utils'
 
 function WindicssTemplate(
-  this: webpack.loader.LoaderContext,
+  this: loader.LoaderContext,
   source: string,
 ): string {
   if (!this._compiler)
     return source
 
   this.cacheable(true)
-  const service = (this._compiler as Compiler).$windi
+  const service = this._compiler.$windi
 
   if (!service)
     return source

src/plugin.ts

@@ -2,7 +2,9 @@ import type { LayerName } from '@windicss/plugin-utils'
 import { createUtils } from '@windicss/plugin-utils'
 import { join, resolve } from 'pathe'
 import VirtualModulesPlugin from 'webpack-virtual-modules'
-import type { Compiler, WindiCSSWebpackPluginOptions } from './types'
+import type { Compiler } from 'webpack'
+import { Plugin } from 'webpack'
+import type { WindiCSSWebpackPluginOptions } from './types'
 import { DEVTOOLS_MODULE_ID, DEVTOOLS_VIRTUAL_MODULE, DEVTOOLS_VIRTUAL_MODULE_ID, MODULE_ID, MODULE_ID_VIRTUAL_MODULES, MODULE_ID_VIRTUAL_TEST, NAME } from './core/constants'
 import debug from './core/debug'
 import { def } from './core/utils'
@@ -17,10 +19,11 @@ const transformTemplateLoader = resolve(loadersPath, 'windicss-template.cjs')
 const virtualModuleLoader = resolve(loadersPath, 'virtual-module.cjs')
 const devtoolsLoader = resolve(loadersPath, 'dev-tools.cjs')
 
-class WindiCSSWebpackPlugin {
+class WindiCSSWebpackPlugin extends Plugin {
   options
 
   constructor(options: Partial<WindiCSSWebpackPluginOptions> = {}) {
+    super()
     // @todo validate options
     this.options = {
       // default options
@@ -32,7 +35,7 @@ class WindiCSSWebpackPlugin {
     } as WindiCSSWebpackPluginOptions
   }
 
-  apply(compiler: Compiler): void {
+  apply(compiler: Compiler) {
     // resolve the root working directory
     let root = compiler.context
     if (this.options.root)

src/types.ts

@@ -1,4 +1,3 @@
-import type webpack from 'webpack'
 import type { UserOptions, WindiPluginUtils } from '@windicss/plugin-utils'
 import type Server from './core/server'
 
@@ -22,14 +21,16 @@ declare module 'windi-components.css' {}
 // @ts-expect-error virtual module
 declare module 'windi-utilities.css' {}
 
-export type Compiler = webpack.Compiler & {
-  $windi: WindiPluginUtils & {
-    dirty: Set<string>
-    root: string
-    virtualModules: Map<string, string>
-    initException?: Error
-    invalidateCssModules: (resource: string, modules: string[]) => void
-    server: Server
+declare module 'webpack' {
+  interface Compiler {
+    $windi: WindiPluginUtils & {
+      dirty: Set<string>
+      root: string
+      virtualModules: Map<string, string>
+      initException?: Error
+      invalidateCssModules: (resource: string, modules: string[]) => void
+      server: Server
+    }
   }
 }