tailwindcss-patch 9.0.0-alpha.1 → 9.0.0-alpha.2

package/src/patching/operations/export-context/postcss-v2.ts

@@ -0,0 +1,235 @@
+import type { ExposeContextTransformOptions } from './postcss-v3'
+import * as t from '@babel/types'
+import { generate, parse, traverse } from '../../../babel'
+
+const IDENTIFIER_RE = /^[A-Z_$][\w$]*$/i
+
+function toIdentifierName(property: string) {
+  if (!property) {
+    return 'contextRef'
+  }
+  const sanitized = property.replace(/[^\w$]/gu, '_')
+  if (/^\d/.test(sanitized)) {
+    return `_${sanitized}`
+  }
+  return sanitized || 'contextRef'
+}
+
+function createExportsMember(property: string) {
+  if (IDENTIFIER_RE.test(property)) {
+    return t.memberExpression(t.identifier('exports'), t.identifier(property))
+  }
+  return t.memberExpression(t.identifier('exports'), t.stringLiteral(property), true)
+}
+
+export function transformProcessTailwindFeaturesReturnContextV2(content: string) {
+  const ast = parse(content, {
+    sourceType: 'unambiguous',
+  })
+  let hasPatched = false
+
+  traverse(ast, {
+    FunctionDeclaration(path) {
+      const node = path.node
+      if (
+        node.id?.name !== 'processTailwindFeatures'
+        || node.body.body.length !== 1
+        || !t.isReturnStatement(node.body.body[0])
+      ) {
+        return
+      }
+
+      const returnStatement = node.body.body[0]
+      if (!t.isFunctionExpression(returnStatement.argument)) {
+        return
+      }
+
+      const body = returnStatement.argument.body.body
+      const lastStatement = body[body.length - 1]
+      const alreadyReturnsContext = Boolean(
+        t.isReturnStatement(lastStatement)
+        && t.isIdentifier(lastStatement.argument)
+        && lastStatement.argument.name === 'context',
+      )
+
+      hasPatched = alreadyReturnsContext
+      if (!alreadyReturnsContext) {
+        body.push(t.returnStatement(t.identifier('context')))
+      }
+    },
+  })
+
+  return {
+    code: hasPatched ? content : generate(ast).code,
+    hasPatched,
+  }
+}
+
+export function transformPostcssPluginV2(content: string, options: ExposeContextTransformOptions) {
+  const refIdentifier = t.identifier(toIdentifierName(options.refProperty))
+  const exportMember = createExportsMember(options.refProperty)
+  const valueMember = t.memberExpression(refIdentifier, t.identifier('value'))
+  const ast = parse(content)
+
+  let hasPatched = false
+
+  traverse(ast, {
+    Program(path) {
+      const program = path.node
+      const index = program.body.findIndex((statement) => {
+        return t.isFunctionDeclaration(statement) && statement.id?.name === '_default'
+      })
+
+      if (index === -1) {
+        return
+      }
+
+      const previous = program.body[index - 1]
+      const beforePrevious = program.body[index - 2]
+
+      const alreadyHasVariable = Boolean(
+        previous
+        && t.isVariableDeclaration(previous)
+        && previous.declarations.length === 1
+        && (() => {
+          const declaration = previous.declarations[0]
+          return Boolean(
+            declaration
+            && t.isIdentifier(declaration.id)
+            && declaration.id.name === refIdentifier.name,
+          )
+        })(),
+      )
+
+      const alreadyAssignsExports = Boolean(
+        beforePrevious
+        && t.isExpressionStatement(beforePrevious)
+        && t.isAssignmentExpression(beforePrevious.expression)
+        && t.isMemberExpression(beforePrevious.expression.left)
+        && t.isIdentifier(beforePrevious.expression.right)
+        && beforePrevious.expression.right.name === refIdentifier.name
+        && generate(beforePrevious.expression.left).code === generate(exportMember).code,
+      )
+
+      hasPatched = alreadyHasVariable && alreadyAssignsExports
+
+      if (!alreadyHasVariable) {
+        program.body.splice(
+          index,
+          0,
+          t.variableDeclaration('var', [
+            t.variableDeclarator(
+              refIdentifier,
+              t.objectExpression([
+                t.objectProperty(t.identifier('value'), t.arrayExpression()),
+              ]),
+            ),
+          ]),
+          t.expressionStatement(
+            t.assignmentExpression('=', exportMember, refIdentifier),
+          ),
+        )
+      }
+    },
+    FunctionDeclaration(path) {
+      if (hasPatched) {
+        return
+      }
+
+      const fn = path.node
+      if (fn.id?.name !== '_default') {
+        return
+      }
+
+      if (fn.body.body.length !== 1 || !t.isReturnStatement(fn.body.body[0])) {
+        return
+      }
+
+      const returnStatement = fn.body.body[0]
+      if (
+        !t.isCallExpression(returnStatement.argument)
+        || !t.isMemberExpression(returnStatement.argument.callee)
+        || !t.isArrayExpression(returnStatement.argument.callee.object)
+      ) {
+        return
+      }
+
+      const fnExpression = returnStatement.argument.callee.object.elements[1]
+      if (!fnExpression || !t.isFunctionExpression(fnExpression)) {
+        return
+      }
+
+      const block = fnExpression.body
+      const statements = block.body
+
+      if (
+        t.isExpressionStatement(statements[0])
+        && t.isAssignmentExpression(statements[0].expression)
+        && t.isNumericLiteral(statements[0].expression.right)
+      ) {
+        hasPatched = true
+        return
+      }
+
+      const lastStatement = statements[statements.length - 1]
+      if (
+        lastStatement
+        && t.isExpressionStatement(lastStatement)
+      ) {
+        statements[statements.length - 1] = t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(valueMember, t.identifier('push')),
+            [lastStatement.expression],
+          ),
+        )
+      }
+
+      const index = statements.findIndex(statement => t.isIfStatement(statement))
+      if (index > -1) {
+        const ifStatement = statements[index] as t.IfStatement
+        if (
+          t.isBlockStatement(ifStatement.consequent)
+          && ifStatement.consequent.body[1]
+          && t.isForOfStatement(ifStatement.consequent.body[1])
+        ) {
+          const forOf = ifStatement.consequent.body[1]
+          if (
+            t.isBlockStatement(forOf.body)
+            && forOf.body.body.length === 1
+          ) {
+            const nestedIf = forOf.body.body[0]
+            if (
+              nestedIf
+              && t.isIfStatement(nestedIf)
+              && t.isBlockStatement(nestedIf.consequent)
+              && nestedIf.consequent.body.length === 1
+              && t.isExpressionStatement(nestedIf.consequent.body[0])
+            ) {
+              nestedIf.consequent.body[0] = t.expressionStatement(
+                t.callExpression(
+                  t.memberExpression(valueMember, t.identifier('push')),
+                  [nestedIf.consequent.body[0].expression],
+                ),
+              )
+            }
+          }
+        }
+      }
+
+      statements.unshift(
+        t.expressionStatement(
+          t.assignmentExpression(
+            '=',
+            t.memberExpression(valueMember, t.identifier('length')),
+            t.numericLiteral(0),
+          ),
+        ),
+      )
+    },
+  })
+
+  return {
+    code: hasPatched ? content : generate(ast).code,
+    hasPatched,
+  }
+}

package/src/patching/operations/export-context/postcss-v3.ts

@@ -0,0 +1,249 @@
+import * as t from '@babel/types'
+import { generate, parse, traverse } from '../../../babel'
+
+export interface ExposeContextTransformOptions {
+  refProperty: string
+}
+
+const IDENTIFIER_RE = /^[A-Z_$][\w$]*$/i
+
+function toIdentifierName(property: string) {
+  if (!property) {
+    return 'contextRef'
+  }
+  const sanitized = property.replace(/[^\w$]/gu, '_')
+  if (/^\d/.test(sanitized)) {
+    return `_${sanitized}`
+  }
+  return sanitized || 'contextRef'
+}
+
+function createModuleExportsMember(property: string) {
+  const object = t.memberExpression(t.identifier('module'), t.identifier('exports'))
+  if (IDENTIFIER_RE.test(property)) {
+    return t.memberExpression(object, t.identifier(property))
+  }
+  return t.memberExpression(object, t.stringLiteral(property), true)
+}
+
+export function transformProcessTailwindFeaturesReturnContext(content: string) {
+  const ast = parse(content)
+  let hasPatched = false
+
+  traverse(ast, {
+    FunctionDeclaration(path) {
+      const node = path.node
+      if (
+        node.id?.name !== 'processTailwindFeatures'
+        || node.body.body.length !== 1
+      ) {
+        return
+      }
+
+      const [returnStatement] = node.body.body
+      if (
+        !t.isReturnStatement(returnStatement)
+        || !t.isFunctionExpression(returnStatement.argument)
+      ) {
+        return
+      }
+
+      const expression = returnStatement.argument
+      const body = expression.body.body
+      const lastStatement = body[body.length - 1]
+      const alreadyReturnsContext = Boolean(
+        t.isReturnStatement(lastStatement)
+        && t.isIdentifier(lastStatement.argument)
+        && lastStatement.argument.name === 'context',
+      )
+
+      hasPatched = alreadyReturnsContext
+      if (!alreadyReturnsContext) {
+        body.push(t.returnStatement(t.identifier('context')))
+      }
+    },
+  })
+
+  return {
+    code: hasPatched ? content : generate(ast).code,
+    hasPatched,
+  }
+}
+
+export function transformPostcssPlugin(content: string, { refProperty }: ExposeContextTransformOptions) {
+  const ast = parse(content)
+  const refIdentifier = t.identifier(toIdentifierName(refProperty))
+  const moduleExportsMember = createModuleExportsMember(refProperty)
+  const valueMember = t.memberExpression(refIdentifier, t.identifier('value'))
+
+  let hasPatched = false
+
+  traverse(ast, {
+    Program(path) {
+      const program = path.node
+      const index = program.body.findIndex((statement) => {
+        return (
+          t.isExpressionStatement(statement)
+          && t.isAssignmentExpression(statement.expression)
+          && t.isMemberExpression(statement.expression.left)
+          && t.isFunctionExpression(statement.expression.right)
+          && statement.expression.right.id?.name === 'tailwindcss'
+        )
+      })
+
+      if (index === -1) {
+        return
+      }
+
+      const previousStatement = program.body[index - 1]
+      const lastStatement = program.body[program.body.length - 1]
+      const alreadyHasVariable = Boolean(
+        previousStatement
+        && t.isVariableDeclaration(previousStatement)
+        && previousStatement.declarations.length === 1
+        && (() => {
+          const declaration = previousStatement.declarations[0]
+          return Boolean(
+            declaration
+            && t.isIdentifier(declaration.id)
+            && declaration.id.name === refIdentifier.name,
+          )
+        })(),
+      )
+
+      const alreadyAssignsModuleExports = Boolean(
+        t.isExpressionStatement(lastStatement)
+        && t.isAssignmentExpression(lastStatement.expression)
+        && t.isMemberExpression(lastStatement.expression.left)
+        && t.isIdentifier(lastStatement.expression.right)
+        && lastStatement.expression.right.name === refIdentifier.name
+        && generate(lastStatement.expression.left).code === generate(moduleExportsMember).code,
+      )
+
+      hasPatched = alreadyHasVariable && alreadyAssignsModuleExports
+
+      if (!alreadyHasVariable) {
+        program.body.splice(
+          index,
+          0,
+          t.variableDeclaration('const', [
+            t.variableDeclarator(
+              refIdentifier,
+              t.objectExpression([
+                t.objectProperty(t.identifier('value'), t.arrayExpression()),
+              ]),
+            ),
+          ]),
+        )
+      }
+
+      if (!alreadyAssignsModuleExports) {
+        program.body.push(
+          t.expressionStatement(
+            t.assignmentExpression('=', moduleExportsMember, refIdentifier),
+          ),
+        )
+      }
+    },
+    FunctionExpression(path) {
+      if (hasPatched) {
+        return
+      }
+      const fn = path.node
+      if (fn.id?.name !== 'tailwindcss' || fn.body.body.length !== 1) {
+        return
+      }
+
+      const [returnStatement] = fn.body.body
+      if (!returnStatement || !t.isReturnStatement(returnStatement) || !t.isObjectExpression(returnStatement.argument)) {
+        return
+      }
+
+      const properties = returnStatement.argument.properties
+      if (properties.length !== 2) {
+        return
+      }
+
+      const pluginsProperty = properties.find(
+        prop => t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === 'plugins',
+      )
+
+      if (
+        !pluginsProperty
+        || !t.isObjectProperty(pluginsProperty)
+        || !t.isCallExpression(pluginsProperty.value)
+        || !t.isMemberExpression(pluginsProperty.value.callee)
+        || !t.isArrayExpression(pluginsProperty.value.callee.object)
+      ) {
+        return
+      }
+
+      const pluginsArray = pluginsProperty.value.callee.object.elements
+
+      const targetPlugin = pluginsArray[1]
+      if (!targetPlugin || !t.isFunctionExpression(targetPlugin)) {
+        return
+      }
+
+      const block = targetPlugin.body
+      const statements = block.body
+      const last = statements[statements.length - 1]
+
+      if (
+        last
+        && t.isExpressionStatement(last)
+      ) {
+        statements[statements.length - 1] = t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(valueMember, t.identifier('push')),
+            [last.expression],
+          ),
+        )
+      }
+
+      const index = statements.findIndex(s => t.isIfStatement(s))
+      if (index > -1) {
+        const ifStatement = statements[index] as t.IfStatement
+        if (t.isBlockStatement(ifStatement.consequent)) {
+          const [, second] = ifStatement.consequent.body
+          if (
+            second
+            && t.isForOfStatement(second)
+            && t.isBlockStatement(second.body)
+          ) {
+            const bodyStatement = second.body.body[0]
+            if (
+              bodyStatement
+              && t.isIfStatement(bodyStatement)
+              && t.isBlockStatement(bodyStatement.consequent)
+              && bodyStatement.consequent.body.length === 1
+              && t.isExpressionStatement(bodyStatement.consequent.body[0])
+            ) {
+              bodyStatement.consequent.body[0] = t.expressionStatement(
+                t.callExpression(
+                  t.memberExpression(valueMember, t.identifier('push')),
+                  [bodyStatement.consequent.body[0].expression],
+                ),
+              )
+            }
+          }
+        }
+      }
+
+      statements.unshift(
+        t.expressionStatement(
+          t.assignmentExpression(
+            '=',
+            t.memberExpression(valueMember, t.identifier('length')),
+            t.numericLiteral(0),
+          ),
+        ),
+      )
+    },
+  })
+
+  return {
+    code: hasPatched ? content : generate(ast).code,
+    hasPatched,
+  }
+}

package/src/patching/operations/extend-length-units.ts

@@ -0,0 +1,197 @@
+import type { ArrayExpression, StringLiteral } from '@babel/types'
+import type { NormalizedExtendLengthUnitsOptions } from '../../options/types'
+import * as t from '@babel/types'
+import fs from 'fs-extra'
+import path from 'pathe'
+import { generate, parse, traverse } from '../../babel'
+import logger from '../../logger'
+import { spliceChangesIntoString } from '../../utils'
+
+interface FindArrayExpressionResult {
+  arrayRef?: ArrayExpression
+  changed: boolean
+}
+
+function updateLengthUnitsArray(content: string, options: NormalizedExtendLengthUnitsOptions): FindArrayExpressionResult {
+  const { variableName = 'lengthUnits', units } = options
+  const ast = parse(content)
+
+  let arrayRef: ArrayExpression | undefined
+  let changed = false
+
+  traverse(ast, {
+    Identifier(path) {
+      if (
+        path.node.name === variableName
+        && t.isVariableDeclarator(path.parent)
+        && t.isArrayExpression(path.parent.init)
+      ) {
+        arrayRef = path.parent.init
+        const existing = new Set(
+          path.parent.init.elements.map(element => (t.isStringLiteral(element) ? (element as StringLiteral).value : undefined)).filter(Boolean),
+        )
+
+        for (const unit of units) {
+          if (!existing.has(unit)) {
+            path.parent.init.elements = path.parent.init.elements.map((element) => {
+              if (t.isStringLiteral(element)) {
+                return t.stringLiteral(element.value)
+              }
+              return element
+            })
+            path.parent.init.elements.push(t.stringLiteral(unit))
+            changed = true
+          }
+        }
+      }
+    },
+  })
+
+  return {
+    ...(arrayRef === undefined ? {} : { arrayRef }),
+    changed,
+  }
+}
+
+export function applyExtendLengthUnitsPatchV3(rootDir: string, options: NormalizedExtendLengthUnitsOptions) {
+  if (!options.enabled) {
+    return { changed: false, code: undefined }
+  }
+
+  const opts: NormalisedV3Options = {
+    ...options,
+    lengthUnitsFilePath: options.lengthUnitsFilePath ?? 'lib/util/dataTypes.js',
+    variableName: options.variableName ?? 'lengthUnits',
+  }
+
+  const dataTypesFilePath = path.resolve(rootDir, opts.lengthUnitsFilePath)
+  const exists = fs.existsSync(dataTypesFilePath)
+
+  if (!exists) {
+    return { changed: false, code: undefined }
+  }
+
+  const content = fs.readFileSync(dataTypesFilePath, 'utf8')
+  const { arrayRef, changed } = updateLengthUnitsArray(content, opts)
+
+  if (!arrayRef || !changed) {
+    return { changed: false, code: undefined }
+  }
+
+  const { code } = generate(arrayRef, {
+    jsescOption: { quotes: 'single' },
+  })
+
+  if (arrayRef.start != null && arrayRef.end != null) {
+    const nextCode = `${content.slice(0, arrayRef.start)}${code}${content.slice(arrayRef.end)}`
+    if (opts.overwrite) {
+      const target = opts.destPath ? path.resolve(opts.destPath) : dataTypesFilePath
+      fs.writeFileSync(target, nextCode, 'utf8')
+      logger.success('Patched Tailwind CSS length unit list (v3).')
+    }
+
+    return {
+      changed: true,
+      code: nextCode,
+    }
+  }
+
+  return {
+    changed: false,
+    code: undefined,
+  }
+}
+
+interface NormalisedV3Options extends NormalizedExtendLengthUnitsOptions {
+  lengthUnitsFilePath: string
+  variableName: string
+}
+
+interface V4FilePatch {
+  file: string
+  code: string
+  hasPatched: boolean
+}
+
+interface V4Candidate extends V4FilePatch {
+  match: RegExpExecArray
+}
+
+export function applyExtendLengthUnitsPatchV4(rootDir: string, options: NormalizedExtendLengthUnitsOptions) {
+  if (!options.enabled) {
+    return { files: [], changed: false }
+  }
+
+  const opts: NormalisedV4Options = { ...options }
+
+  const distDir = path.resolve(rootDir, 'dist')
+  if (!fs.existsSync(distDir)) {
+    return { files: [], changed: false }
+  }
+
+  const entries = fs.readdirSync(distDir)
+  const chunkNames = entries.filter(entry => entry.endsWith('.js') || entry.endsWith('.mjs'))
+  const pattern = /\[\s*["']cm["'],\s*["']mm["'],[\w,"']+\]/
+
+  const candidates = chunkNames.map((chunkName) => {
+    const file = path.join(distDir, chunkName)
+    const code = fs.readFileSync(file, 'utf8')
+    const match = pattern.exec(code)
+    if (!match) {
+      return null
+    }
+    return {
+      file,
+      code,
+      match,
+      hasPatched: false,
+    }
+  }).filter((candidate): candidate is V4Candidate => candidate !== null)
+
+  for (const item of candidates) {
+    const { code, file, match } = item
+    const ast = parse(match[0], { sourceType: 'unambiguous' })
+
+    traverse(ast, {
+      ArrayExpression(path) {
+        for (const unit of opts.units) {
+          if (path.node.elements.some(element => t.isStringLiteral(element) && element.value === unit)) {
+            item.hasPatched = true
+            return
+          }
+          path.node.elements.push(t.stringLiteral(unit))
+        }
+      },
+    })
+
+    if (item.hasPatched) {
+      continue
+    }
+
+    const { code: replacement } = generate(ast, { minified: true })
+    const start = match.index ?? 0
+    const end = start + match[0].length
+    item.code = spliceChangesIntoString(code, [
+      {
+        start,
+        end,
+        replacement: replacement.endsWith(';') ? replacement.slice(0, -1) : replacement,
+      },
+    ])
+
+    if (opts.overwrite) {
+      fs.writeFileSync(file, item.code, 'utf8')
+    }
+  }
+
+  if (candidates.some(file => !file.hasPatched)) {
+    logger.success('Patched Tailwind CSS length unit list (v4).')
+  }
+
+  return {
+    changed: candidates.some(file => !file.hasPatched),
+    files: candidates,
+  }
+}
+
+interface NormalisedV4Options extends NormalizedExtendLengthUnitsOptions {}