index.js

/**
 * The following code is modified based on
 * https://github.com/seek-oss/css-modules-typescript-loader
 *
 * only generator .d.ts for css modules file
 *
 * MIT Licensed
 * Author mattcompiles
 * Copyright 2018 SEEK
 * https://github.com/seek-oss/css-modules-typescript-loader/blob/master/LICENSE
 */

const path = require('path')
const fs = require('fs')
const lineDiff = require('line-diff')

const bannerMessage = `
/**
 * This file is automatically generated.
 * Please do not change this file!
 * 该文件根据*.module.less自动生成,修改无效
 */
`

const cssModuleExport = 'export const cssExports: CssExports;\nexport default cssExports;\n'

/**
 *
 * @param {NodeJS.ErrnoException} err
 * @returns {boolean}
 */
const isFileNotFound = (err) => err && err.code === 'ENOENT'

const enforceLFLineSeparators = (text) => {
  if (text) {
    return text.replace(/\r\n/g, '\n')
  } else {
    return text
  }
}

const compareText = (contentA, contentB) => {
  return enforceLFLineSeparators(contentA) === enforceLFLineSeparators(contentB)
}

/**
 * 返回类型声明文件的路径
 * @param {string} filename
 * @returns {string}
 */
const interfaceFilename = (filename) => {
  return path.join(path.dirname(filename), `${path.basename(filename)}.d.ts`)
}

/**
 *
 * @param {fs.PathOrFileDescriptor} filename
 * @returns {{read:(handler:(err: NodeJS.ErrnoException | null, data: string) => void)=>void}}
 */
const makeFileHandlers = (filename) => {
  return {
    read: (handler) => fs.readFile(filename, { encoding: 'utf-8' }, handler),
    write: (content, handler) => fs.writeFile(filename, content, { encoding: 'utf-8' }, handler),
  }
}

const makeDoneHandler = (callback, content, rest) => {
  return {
    reject: (err) => callback(err),
    resolve: () => callback(null, content, ...rest),
  }
}
/**
 * 用于拼装 interface
 * @param {string[]} className
 * @returns string
 */
const cssModuleToInterface = (className) => {
  const interfaceFields = className
    .sort()
    .map((key) => ` '${key}':string;`)
    .join('\n')
  return `interface CssExports {\n${interfaceFields}\n}`
}

const getFilename = (path, scope = 'module') => {
  if (scope === 'module') {
    if (path.includes('module')) {
      return path
    }
  } else {
    return path
  }
}

/**
 * Generated type declaration does not exist。
 * 类型文件声明文件不存在。
 * @param {{filename:string}} filename
 * @returns { Error }
 */
const throwNotFoundFilError = ({ filename }) =>
  new Error(`Generated type declaration does not exist. Run rspack and commit the type declaration for '${filename}'`)

/**
 *
 * @param {{filename:string,expected:string,actual:string}} param - 参数描述
 * - `filename`:文件名
 * - `expected`: 预期的文件
 * - `actual`: 实际的文件
 * @returns { Error }
 */
const getTypeMismatchError = ({ filename, expected, actual }) => {
  const diff = new lineDiff(enforceLFLineSeparators(actual), expected).toString()
  return new Error(
    `Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '${filename}'\n\n${diff}`
  )
}

module.exports = function (source, ...rest) {
  /** @type {import('./index').Options} */
  const options = this.getOptions()

  const { scope = 'module', mode = 'emit', banner = '' } = options

  /** @type {string} type - description */
  const filename =
    scope === 'module' ? (this.resourcePath.includes('module') ? this.resourcePath : '') : this.resourcePath

  const { resolve, reject } = makeDoneHandler(this.async(), source, rest)

  if (!filename) {
    return resolve()
  }
  const cssModuleInterfaceFilename = interfaceFilename(filename)

  const { read, write } = makeFileHandlers(cssModuleInterfaceFilename)

  const regex = /(?<=\}\s*|^)(\.[a-zA-Z0-9_-]+)(?=\s*{)/g

  /** @type {string} type - 通过正则捕获的类名 */
  let match

  /** @type {string[]} type - less文件里的类目*/
  const classNames = []

  while ((match = regex.exec(source))) {
    if (classNames.indexOf(match[1]) < 0) {
      classNames.push(match[1].replace('.', ''))
    }
  }
  /** @type {string} type - 生成的类型文件 */
  const interfaceFile = `${banner || bannerMessage}\n${cssModuleToInterface(classNames)}\n${cssModuleExport}`

  if (mode === 'verify') {
    read((err, fileContent) => {
      // 没有目录或文件
      if (isFileNotFound(err)) {
        return reject(
          throwNotFoundFilError({
            filename: cssModuleInterfaceFilename,
          })
        )
      }
      if (err) {
        return reject(err)
      }
      if (!compareText(interfaceFile, fileContent)) {
        return reject(
          getTypeMismatchError({
            filename: cssModuleInterfaceFilename,
            expected: interfaceFile,
            actual: fileContent,
          })
        )
      }
      return resolve()
    })
  } else {
    read((_, fileContent) => {
      if (!compareText(interfaceFile, fileContent)) {
        write(interfaceFile, (err) => {
          if (err) {
            return reject(err)
          } else {
            return resolve()
          }
        })
      } else {
        return resolve()
      }
    })
  }
}