From eed0e8b92bca2b8106f56ee97557058565fe18a3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 11 Jul 2022 12:44:18 -0400 Subject: [PATCH 01/16] Update lockfile --- .../tailwindcss-cli/package-lock.json | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/integrations/tailwindcss-cli/package-lock.json b/integrations/tailwindcss-cli/package-lock.json index e36028945..1bfff83a7 100644 --- a/integrations/tailwindcss-cli/package-lock.json +++ b/integrations/tailwindcss-cli/package-lock.json @@ -12,13 +12,13 @@ } }, "../..": { - "version": "3.0.24", + "version": "3.1.5", "license": "MIT", "dependencies": { - "arg": "^5.0.1", + "arg": "^5.0.2", "chokidar": "^3.5.3", "color-name": "^1.1.4", - "detective": "^5.2.0", + "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.11", @@ -36,26 +36,26 @@ "postcss-selector-parser": "^6.0.10", "postcss-value-parser": "^4.2.0", "quick-lru": "^5.1.1", - "resolve": "^1.22.0" + "resolve": "^1.22.1" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" }, "devDependencies": { + "@parcel/css": "^1.11.2", "@swc/cli": "^0.1.57", - "@swc/core": "^1.2.160", + "@swc/core": "^1.2.196", "@swc/jest": "^0.2.21", "@swc/register": "^0.1.10", "autoprefixer": "^10.4.7", - "cssnano": "^5.1.9", - "esbuild": "^0.14.39", - "eslint": "^8.15.0", + "esbuild": "^0.14.48", + "eslint": "^8.18.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-prettier": "^4.0.0", - "jest": "^28.0.3", - "jest-diff": "^28.1.0", - "prettier": "^2.6.2", + "eslint-plugin-prettier": "^4.2.1", + "jest": "^28.1.2", + "jest-diff": "^28.1.1", + "prettier": "^2.7.1", "prettier-plugin-tailwindcss": "^0.1.11", "rimraf": "^3.0.0", "source-map-js": "^1.0.2" @@ -76,27 +76,27 @@ "tailwindcss": { "version": "file:../..", "requires": { + "@parcel/css": "^1.11.2", "@swc/cli": "^0.1.57", - "@swc/core": "^1.2.160", + "@swc/core": "^1.2.196", "@swc/jest": "^0.2.21", "@swc/register": "^0.1.10", - "arg": "^5.0.1", + "arg": "^5.0.2", "autoprefixer": "^10.4.7", "chokidar": "^3.5.3", "color-name": "^1.1.4", - "cssnano": "^5.1.9", - "detective": "^5.2.0", + "detective": "^5.2.1", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "esbuild": "^0.14.39", - "eslint": "^8.15.0", + "esbuild": "^0.14.48", + "eslint": "^8.18.0", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-prettier": "^4.2.1", "fast-glob": "^3.2.11", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jest": "^28.0.3", - "jest-diff": "^28.1.0", + "jest": "^28.1.2", + "jest-diff": "^28.1.1", "lilconfig": "^2.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", @@ -108,10 +108,10 @@ "postcss-nested": "5.0.6", "postcss-selector-parser": "^6.0.10", "postcss-value-parser": "^4.2.0", - "prettier": "^2.6.2", + "prettier": "^2.7.1", "prettier-plugin-tailwindcss": "^0.1.11", "quick-lru": "^5.1.1", - "resolve": "^1.22.0", + "resolve": "^1.22.1", "rimraf": "^3.0.0", "source-map-js": "^1.0.2" } From 9dec4f28efd788bbf6d806f91635792799981e76 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 Sep 2022 13:55:11 -0400 Subject: [PATCH 02/16] Tweak formatting --- src/featureFlags.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/featureFlags.js b/src/featureFlags.js index 5e9d73583..bd75108ea 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -11,7 +11,11 @@ let featureFlags = { 'respectDefaultRingColorOpacity', 'disableColorOpacityUtilitiesByDefault', ], - experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */], + experimental: [ + 'optimizeUniversalDefaults', + 'matchVariant', + // 'variantGrouping', + ], } export function flagEnabled(config, flag) { From 04132c33caf91d2644a7e07a8348d3de597f96da Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 Sep 2022 13:55:15 -0400 Subject: [PATCH 03/16] Add option to load config file relative to the input file --- src/featureFlags.js | 1 + src/lib/setupTrackingContext.js | 6 ++--- src/util/resolveConfigPath.js | 44 ++++++++++++++++++++++++++++++--- 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/src/featureFlags.js b/src/featureFlags.js index bd75108ea..fef84b149 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -15,6 +15,7 @@ let featureFlags = { 'optimizeUniversalDefaults', 'matchVariant', // 'variantGrouping', + 'resolveConfigRelativeToInput', ], } diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index 37b42cdba..14cd92984 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -35,8 +35,8 @@ function getCandidateFiles(context, tailwindConfig) { } // Get the config object based on a path -function getTailwindConfig(configOrPath) { - let userConfigPath = resolveConfigPath(configOrPath) +function getTailwindConfig(configOrPath, inputPath) { + let userConfigPath = resolveConfigPath(configOrPath, inputPath) if (userConfigPath !== null) { let [prevConfig, prevConfigHash, prevDeps, prevModified] = @@ -119,7 +119,7 @@ export default function setupTrackingContext(configOrPath) { return ({ tailwindDirectives, registerDependency }) => { return (root, result) => { let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = - getTailwindConfig(configOrPath) + getTailwindConfig(configOrPath, result.opts.from) let contextDependencies = new Set(configDependencies) diff --git a/src/util/resolveConfigPath.js b/src/util/resolveConfigPath.js index 646a46fd4..f622f75f0 100644 --- a/src/util/resolveConfigPath.js +++ b/src/util/resolveConfigPath.js @@ -1,5 +1,6 @@ import fs from 'fs' import path from 'path' +import { flagEnabled } from '../featureFlags.js' function isObject(value) { return typeof value === 'object' && value !== null @@ -13,7 +14,42 @@ function isString(value) { return typeof value === 'string' || value instanceof String } -export default function resolveConfigPath(pathOrConfig) { +/** + * This will take a possibly-relative path to a config and resolve + * it relative to the input path IF that config file exists and + * has the `resolveConfigRelativeToInput` flag enabled. + * + * If that file does not exist, or the flag is disabled, it will + * resolve the path relative to the current working directory. + * + * @param {string|undefined} inputPath + * @param {string} configPath + * @returns {string} + */ +function pickResolvedPath(configPath, inputPath) { + if (path.isAbsolute(configPath)) { + return configPath + } + + if (inputPath) { + try { + // Use require.resolve so we can find config file in parent directories + let resolvedPath = require.resolve(configPath, { + paths: [inputPath], + }) + + let maybeConfig = require(resolvedPath) + + if (typeof maybeConfig === 'object' && flagEnabled(maybeConfig, 'resolveConfigRelativeToInput')) { + return resolvedPath + } + } catch (e) {} + } + + return path.resolve(configPath) +} + +export default function resolveConfigPath(pathOrConfig, inputPath) { // require('tailwindcss')({ theme: ..., variants: ... }) if (isObject(pathOrConfig) && pathOrConfig.config === undefined && !isEmpty(pathOrConfig)) { return null @@ -25,7 +61,7 @@ export default function resolveConfigPath(pathOrConfig) { pathOrConfig.config !== undefined && isString(pathOrConfig.config) ) { - return path.resolve(pathOrConfig.config) + return pickResolvedPath(pathOrConfig.config, inputPath) } // require('tailwindcss')({ config: { theme: ..., variants: ... } }) @@ -39,13 +75,13 @@ export default function resolveConfigPath(pathOrConfig) { // require('tailwindcss')('custom-config.js') if (isString(pathOrConfig)) { - return path.resolve(pathOrConfig) + return pickResolvedPath(pathOrConfig, inputPath) } // require('tailwindcss') for (const configFile of ['./tailwind.config.js', './tailwind.config.cjs']) { try { - const configPath = path.resolve(configFile) + const configPath = pickResolvedPath(configFile, inputPath) fs.accessSync(configPath) return configPath } catch (err) {} From 4bff7654f5e1416e041beb26f2a435df48f52ef7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 Sep 2022 16:24:33 -0400 Subject: [PATCH 04/16] Refactor `parseDependency` --- src/lib/setupTrackingContext.js | 3 +- src/util/parseDependency.js | 51 +++++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index 14cd92984..28656bb57 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -162,8 +162,7 @@ export default function setupTrackingContext(configOrPath) { // Add template paths as postcss dependencies. for (let fileOrGlob of candidateFiles) { - let dependency = parseDependency(fileOrGlob) - if (dependency) { + for (let dependency of parseDependency(fileOrGlob)) { registerDependency(dependency) } } diff --git a/src/util/parseDependency.js b/src/util/parseDependency.js index 1051df473..bb9118cbe 100644 --- a/src/util/parseDependency.js +++ b/src/util/parseDependency.js @@ -1,6 +1,8 @@ import isGlob from 'is-glob' import globParent from 'glob-parent' +import fs from 'fs' import path from 'path' +import { flagEnabled } from '../featureFlags' // Based on `glob-base` // https://github.com/micromatch/glob-base/blob/master/index.js @@ -25,25 +27,50 @@ function parseGlob(pattern) { return { base, glob } } -export default function parseDependency(normalizedFileOrGlob) { - if (normalizedFileOrGlob.startsWith('!')) { - return null +function toDependency(pathDesc) { + if (!pathDesc.glob) { + return { + type: 'dependency', + file: pathDesc.base, + } } - let message + if (process.env.ROLLUP_WATCH === 'true') { + // rollup-plugin-postcss does not support dir-dependency messages + // but directories can be watched in the same way as files + return { + type: 'dependency', + file: pathDesc.base, + } + } + + return { + type: 'dir-dependency', + dir: pathDesc.base, + glob: pathDesc.glob, + } +} + +export default function parseDependency(normalizedFileOrGlob) { + if (normalizedFileOrGlob.startsWith('!')) { + return [] + } + + let paths = [] if (isGlob(normalizedFileOrGlob)) { let { base, glob } = parseGlob(normalizedFileOrGlob) - message = { type: 'dir-dependency', dir: path.resolve(base), glob } + + paths.push({ base: base, glob }) } else { - message = { type: 'dependency', file: path.resolve(normalizedFileOrGlob) } + paths.push({ base: normalizedFileOrGlob, glob: null }) } - // rollup-plugin-postcss does not support dir-dependency messages - // but directories can be watched in the same way as files - if (message.type === 'dir-dependency' && process.env.ROLLUP_WATCH === 'true') { - message = { type: 'dependency', file: message.dir } - } + paths = paths.map((pathDesc) => + Object.assign(pathDesc, { + base: path.resolve(pathDesc.base), + }) + ) - return message + return paths.map(toDependency) } From 91ddcedb371e6b3c1295b616746bc24167605844 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 Sep 2022 16:26:37 -0400 Subject: [PATCH 05/16] Add flag to resolve content relative to the config file --- src/featureFlags.js | 1 + src/lib/setupContextUtils.js | 2 ++ src/lib/setupTrackingContext.js | 2 +- src/util/parseDependency.js | 9 +++++++-- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/featureFlags.js b/src/featureFlags.js index fef84b149..7616dbd64 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -15,6 +15,7 @@ let featureFlags = { 'optimizeUniversalDefaults', 'matchVariant', // 'variantGrouping', + 'resolveContentRelativeToConfig', 'resolveConfigRelativeToInput', ], } diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index cb3bd1736..3c6f6ae40 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -997,6 +997,8 @@ export function getContext( let context = createContext(tailwindConfig, [], root) + Object.assign(context, { userConfigPath }) + trackModified([...contextDependencies], getFileModifiedMap(context)) // --- diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index 28656bb57..7ebc11044 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -162,7 +162,7 @@ export default function setupTrackingContext(configOrPath) { // Add template paths as postcss dependencies. for (let fileOrGlob of candidateFiles) { - for (let dependency of parseDependency(fileOrGlob)) { + for (let dependency of parseDependency(context, fileOrGlob)) { registerDependency(dependency) } } diff --git a/src/util/parseDependency.js b/src/util/parseDependency.js index bb9118cbe..1ae811659 100644 --- a/src/util/parseDependency.js +++ b/src/util/parseDependency.js @@ -51,7 +51,7 @@ function toDependency(pathDesc) { } } -export default function parseDependency(normalizedFileOrGlob) { +export default function parseDependency(context, normalizedFileOrGlob) { if (normalizedFileOrGlob.startsWith('!')) { return [] } @@ -66,9 +66,14 @@ export default function parseDependency(normalizedFileOrGlob) { paths.push({ base: normalizedFileOrGlob, glob: null }) } + // Resolve base paths relative to the config file or current working directory + let resolveFrom = flagEnabled(context.tailwindConfig, 'resolveContentRelativeToConfig') + ? [context.userConfigPath ?? process.cwd()] + : [process.cwd()] + paths = paths.map((pathDesc) => Object.assign(pathDesc, { - base: path.resolve(pathDesc.base), + base: path.resolve(...resolveFrom, pathDesc.base), }) ) From 383354c47802cd51f17fbd7ec0b0af8e1df8eb11 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 Sep 2022 16:22:37 -0400 Subject: [PATCH 06/16] Resolve symlinks for paths --- src/util/parseDependency.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/util/parseDependency.js b/src/util/parseDependency.js index 1ae811659..4b862be4c 100644 --- a/src/util/parseDependency.js +++ b/src/util/parseDependency.js @@ -27,6 +27,19 @@ function parseGlob(pattern) { return { base, glob } } +function resolvePathSymlinks(pathDesc) { + try { + let newPath = fs.realpathSync(pathDesc.base, { encoding: 'utf8' }) + if (newPath !== pathDesc.base) { + return [pathDesc, { ...pathDesc, base: newPath }] + } + } catch { + // TODO: log this? + } + + return [pathDesc] +} + function toDependency(pathDesc) { if (!pathDesc.glob) { return { @@ -77,5 +90,11 @@ export default function parseDependency(context, normalizedFileOrGlob) { }) ) + // Resolve the symlink for the base directory / file in each path + // These are added as additional dependencies to watch for changes because + // some tools (like webpack) will only watch the actual file or directory + // but not the symlink itself even in projects that use monorepos. + paths = paths.flatMap(resolvePathSymlinks) + return paths.map(toDependency) } From 056d18022addcac5a5ea0ec9a8f94297be8c792c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 16 Sep 2022 13:59:56 -0400 Subject: [PATCH 07/16] Normalize and resolve content paths earlier Not just for PostCSS dependencies --- src/lib/content.js | 166 ++++++++++++++++++++++++++++++++ src/lib/setupTrackingContext.js | 39 +------- src/util/parseDependency.js | 120 ++++++----------------- src/util/parseGlob.js | 24 +++++ 4 files changed, 226 insertions(+), 123 deletions(-) create mode 100644 src/lib/content.js create mode 100644 src/util/parseGlob.js diff --git a/src/lib/content.js b/src/lib/content.js new file mode 100644 index 000000000..9bc8fb12b --- /dev/null +++ b/src/lib/content.js @@ -0,0 +1,166 @@ +// @ts-check + +import fs from 'fs' +import path from 'path' +import isGlob from 'is-glob' +import fastGlob from 'fast-glob' +import normalizePath from 'normalize-path' +import { flagEnabled } from '../featureFlags.js' +import { parseGlob } from '../util/parseGlob' +import { env } from './sharedState' + +/** @typedef {import('../../types/config.js').RawFile} RawFile */ +/** @typedef {import('../../types/config.js').FilePath} FilePath */ + +/** + * @typedef {object} ContentPath + * @property {string} original + * @property {string} base + * @property {string | null} glob + */ + +/** + * Turn a list of content paths (absolute or not; glob or not) into a list of + * absolute file paths that exist on the filesystem + * + * If there are symlinks in the path then multiple paths will be returned + * one for the symlink and one for the actual file + * + * @param {*} context + * @param {import('tailwindcss').Config} tailwindConfig + * @returns {ContentPath[]} + */ +export function parseCandidateFiles(context, tailwindConfig) { + let files = tailwindConfig.content.files + + return files.flatMap((contentPath) => parseContentPath(context, contentPath)) +} + +/** + * + * @param {any} context + * @param {RawFile | FilePath} filePath + * @returns {ContentPath[]} + */ +function parseContentPath(context, filePath) { + if (typeof filePath !== 'string') { + return [] + } + + filePath = normalizePath(filePath) + + /** @type {ContentPath[]} */ + let paths = [] + + if (isGlob(filePath)) { + let { base, glob } = parseGlob(filePath) + + paths.push({ original: filePath, base: base, glob }) + } else { + paths.push({ original: filePath, base: filePath, glob: null }) + } + + paths = resolveRelativePaths(context, paths) + paths = paths.flatMap(resolvePathSymlinks) + + return paths +} + +/** + * Resolve each path relative to the config file (when possible) if the experimental flag is enabled + * Otherwise, resolve relative to the current working directory + * + * @param {any} context + * @param {ContentPath[]} contentPaths + * @returns {ContentPath[]} + */ +function resolveRelativePaths(context, contentPaths) { + let resolveFrom = [] + + // Resolve base paths relative to the config file (when possible) if the experimental flag is enabled + if ( + context.userConfigPath && + flagEnabled(context.tailwindConfig, 'resolveContentRelativeToConfig') + ) { + resolveFrom = [path.dirname(context.userConfigPath)] + } + + return contentPaths.map((contentPath) => + Object.assign(contentPath, { + base: path.resolve(...resolveFrom, contentPath.base), + }) + ) +} + +/** + * Resolve the symlink for the base directory / file in each path + * These are added as additional dependencies to watch for changes because + * some tools (like webpack) will only watch the actual file or directory + * but not the symlink itself even in projects that use monorepos. + * + * @param {ContentPath} contentPath + * @returns {ContentPath[]} + */ +function resolvePathSymlinks(contentPath) { + try { + let newPath = fs.realpathSync(contentPath.base, { encoding: 'utf8' }) + if (newPath !== contentPath.base) { + return [contentPath, { ...contentPath, base: newPath }] + } + } catch { + // TODO: log this? + } + + return [contentPath] +} + +/** + * @param {any} context + * @param {ContentPath[]} candidateFiles + * @param {Map} fileModifiedMap + * @returns {{ content: string, extension: string }[]} + */ +export function resolvedChangedContent(context, candidateFiles, fileModifiedMap) { + let changedContent = context.tailwindConfig.content.files + .filter((item) => typeof item.raw === 'string') + .map(({ raw, extension = 'html' }) => ({ content: raw, extension })) + + for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) { + let content = fs.readFileSync(changedFile, 'utf8') + let extension = path.extname(changedFile).slice(1) + changedContent.push({ content, extension }) + } + + return changedContent +} + +/** + * + * @param {ContentPath[]} candidateFiles + * @param {Map} fileModifiedMap + * @returns {Set} + */ +function resolveChangedFiles(candidateFiles, fileModifiedMap) { + let paths = candidateFiles.map((contentPath) => + contentPath.original.startsWith('!') + ? contentPath.original + : contentPath.glob + ? `${contentPath.base}/${contentPath.glob}` + : contentPath.base + ) + + let changedFiles = new Set() + env.DEBUG && console.time('Finding changed files') + let files = fastGlob.sync(paths, { absolute: true }) + for (let file of files) { + let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity + let modified = fs.statSync(file).mtimeMs + + if (modified > prevModified) { + changedFiles.add(file) + fileModifiedMap.set(file, modified) + } + } + env.DEBUG && console.timeEnd('Finding changed files') + return changedFiles +} diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index 7ebc11044..0f1526f23 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -17,6 +17,7 @@ import { env } from './sharedState' import { getContext, getFileModifiedMap } from './setupContextUtils' import parseDependency from '../util/parseDependency' import { validateConfig } from '../util/validateConfig.js' +import { parseCandidateFiles, resolvedChangedContent } from './content.js' let configPathCache = new LRU({ maxSize: 100 }) @@ -27,9 +28,7 @@ function getCandidateFiles(context, tailwindConfig) { return candidateFilesCache.get(context) } - let candidateFiles = tailwindConfig.content.files - .filter((item) => typeof item === 'string') - .map((contentPath) => normalizePath(contentPath)) + let candidateFiles = parseCandidateFiles(context, tailwindConfig) return candidateFilesCache.set(context, candidateFiles).get(context) } @@ -80,36 +79,6 @@ function getTailwindConfig(configOrPath, inputPath) { return [newConfig, null, hash(newConfig), []] } -function resolvedChangedContent(context, candidateFiles, fileModifiedMap) { - let changedContent = context.tailwindConfig.content.files - .filter((item) => typeof item.raw === 'string') - .map(({ raw, extension = 'html' }) => ({ content: raw, extension })) - - for (let changedFile of resolveChangedFiles(candidateFiles, fileModifiedMap)) { - let content = fs.readFileSync(changedFile, 'utf8') - let extension = path.extname(changedFile).slice(1) - changedContent.push({ content, extension }) - } - return changedContent -} - -function resolveChangedFiles(candidateFiles, fileModifiedMap) { - let changedFiles = new Set() - env.DEBUG && console.time('Finding changed files') - let files = fastGlob.sync(candidateFiles, { absolute: true }) - for (let file of files) { - let prevModified = fileModifiedMap.has(file) ? fileModifiedMap.get(file) : -Infinity - let modified = fs.statSync(file).mtimeMs - - if (modified > prevModified) { - changedFiles.add(file) - fileModifiedMap.set(file, modified) - } - } - env.DEBUG && console.timeEnd('Finding changed files') - return changedFiles -} - // DISABLE_TOUCH = TRUE // Retrieve an existing context from cache if possible (since contexts are unique per @@ -161,8 +130,8 @@ export default function setupTrackingContext(configOrPath) { let fileModifiedMap = getFileModifiedMap(context) // Add template paths as postcss dependencies. - for (let fileOrGlob of candidateFiles) { - for (let dependency of parseDependency(context, fileOrGlob)) { + for (let contentPath of candidateFiles) { + for (let dependency of parseDependency(contentPath)) { registerDependency(dependency) } } diff --git a/src/util/parseDependency.js b/src/util/parseDependency.js index 4b862be4c..5847056e7 100644 --- a/src/util/parseDependency.js +++ b/src/util/parseDependency.js @@ -1,100 +1,44 @@ -import isGlob from 'is-glob' -import globParent from 'glob-parent' -import fs from 'fs' -import path from 'path' -import { flagEnabled } from '../featureFlags' +// @ts-check -// Based on `glob-base` -// https://github.com/micromatch/glob-base/blob/master/index.js -function parseGlob(pattern) { - let glob = pattern - let base = globParent(pattern) +/** + * @typedef {{type: 'dependency', file: string} | {type: 'dir-dependency', dir: string, glob: string}} Dependency + */ - if (base !== '.') { - glob = pattern.substr(base.length) - if (glob.charAt(0) === '/') { - glob = glob.substr(1) - } +/** + * + * @param {import('../lib/content.js').ContentPath} contentPath + * @returns {Dependency[]} + */ +export default function parseDependency(contentPath) { + if (contentPath.original.startsWith('!')) { + return [] } - if (glob.substr(0, 2) === './') { - glob = glob.substr(2) - } - if (glob.charAt(0) === '/') { - glob = glob.substr(1) - } - - return { base, glob } -} - -function resolvePathSymlinks(pathDesc) { - try { - let newPath = fs.realpathSync(pathDesc.base, { encoding: 'utf8' }) - if (newPath !== pathDesc.base) { - return [pathDesc, { ...pathDesc, base: newPath }] - } - } catch { - // TODO: log this? - } - - return [pathDesc] -} - -function toDependency(pathDesc) { - if (!pathDesc.glob) { - return { - type: 'dependency', - file: pathDesc.base, - } + if (!contentPath.glob) { + return [ + { + type: 'dependency', + file: contentPath.base, + }, + ] } if (process.env.ROLLUP_WATCH === 'true') { // rollup-plugin-postcss does not support dir-dependency messages // but directories can be watched in the same way as files - return { - type: 'dependency', - file: pathDesc.base, - } + return [ + { + type: 'dependency', + file: contentPath.base, + }, + ] } - return { - type: 'dir-dependency', - dir: pathDesc.base, - glob: pathDesc.glob, - } -} - -export default function parseDependency(context, normalizedFileOrGlob) { - if (normalizedFileOrGlob.startsWith('!')) { - return [] - } - - let paths = [] - - if (isGlob(normalizedFileOrGlob)) { - let { base, glob } = parseGlob(normalizedFileOrGlob) - - paths.push({ base: base, glob }) - } else { - paths.push({ base: normalizedFileOrGlob, glob: null }) - } - - // Resolve base paths relative to the config file or current working directory - let resolveFrom = flagEnabled(context.tailwindConfig, 'resolveContentRelativeToConfig') - ? [context.userConfigPath ?? process.cwd()] - : [process.cwd()] - - paths = paths.map((pathDesc) => - Object.assign(pathDesc, { - base: path.resolve(...resolveFrom, pathDesc.base), - }) - ) - - // Resolve the symlink for the base directory / file in each path - // These are added as additional dependencies to watch for changes because - // some tools (like webpack) will only watch the actual file or directory - // but not the symlink itself even in projects that use monorepos. - paths = paths.flatMap(resolvePathSymlinks) - - return paths.map(toDependency) + return [ + { + type: 'dir-dependency', + dir: contentPath.base, + glob: contentPath.glob, + }, + ] } diff --git a/src/util/parseGlob.js b/src/util/parseGlob.js new file mode 100644 index 000000000..5c03f413d --- /dev/null +++ b/src/util/parseGlob.js @@ -0,0 +1,24 @@ +import globParent from 'glob-parent' + +// Based on `glob-base` +// https://github.com/micromatch/glob-base/blob/master/index.js +export function parseGlob(pattern) { + let glob = pattern + let base = globParent(pattern) + + if (base !== '.') { + glob = pattern.substr(base.length) + if (glob.charAt(0) === '/') { + glob = glob.substr(1) + } + } + + if (glob.substr(0, 2) === './') { + glob = glob.substr(2) + } + if (glob.charAt(0) === '/') { + glob = glob.substr(1) + } + + return { base, glob } +} From 3871cc54eae5bcf5e1d70f7915d84cca3460b48f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 16 Sep 2022 16:18:12 -0400 Subject: [PATCH 08/16] wip --- src/lib/content.js | 109 ++++++++++++++++++++++++------------ src/util/parseDependency.js | 2 +- 2 files changed, 74 insertions(+), 37 deletions(-) diff --git a/src/lib/content.js b/src/lib/content.js index 9bc8fb12b..da153dddc 100644 --- a/src/lib/content.js +++ b/src/lib/content.js @@ -17,6 +17,8 @@ import { env } from './sharedState' * @property {string} original * @property {string} base * @property {string | null} glob + * @property {boolean} ignore + * @property {string} pattern */ /** @@ -33,37 +35,73 @@ import { env } from './sharedState' export function parseCandidateFiles(context, tailwindConfig) { let files = tailwindConfig.content.files - return files.flatMap((contentPath) => parseContentPath(context, contentPath)) + // Normalize the file globs + files = files.filter((filePath) => typeof filePath === 'string') + files = files.map(normalizePath) + + // Split into included and excluded globs + let tasks = fastGlob.generateTasks(files) + + /** @type {ContentPath[]} */ + let included = [] + + /** @type {ContentPath[]} */ + let excluded = [] + + for (const task of tasks) { + included.push(...task.positive.map((filePath) => parseFilePath(filePath, false))) + excluded.push(...task.negative.map((filePath) => parseFilePath(filePath, true))) + } + + let paths = [...included, ...excluded] + + // Resolve paths relative to the config file or cwd + paths = resolveRelativePaths(context, paths) + + // Resolve symlinks if possible + paths = paths.flatMap(resolvePathSymlinks) + + // Update cached patterns + paths = paths.map(resolveGlobPattern) + + return paths } /** * - * @param {any} context - * @param {RawFile | FilePath} filePath - * @returns {ContentPath[]} + * @param {string} filePath + * @param {boolean} ignore + * @returns {ContentPath} */ -function parseContentPath(context, filePath) { - if (typeof filePath !== 'string') { - return [] +function parseFilePath(filePath, ignore) { + let contentPath = { + original: filePath, + base: filePath, + ignore, + pattern: filePath, + glob: null, } - filePath = normalizePath(filePath) - - /** @type {ContentPath[]} */ - let paths = [] - if (isGlob(filePath)) { - let { base, glob } = parseGlob(filePath) - - paths.push({ original: filePath, base: base, glob }) - } else { - paths.push({ original: filePath, base: filePath, glob: null }) + Object.assign(contentPath, parseGlob(filePath)) } - paths = resolveRelativePaths(context, paths) - paths = paths.flatMap(resolvePathSymlinks) + return contentPath +} - return paths +/** + * + * @param {ContentPath} contentPath + * @returns {ContentPath} + */ +function resolveGlobPattern(contentPath) { + contentPath.pattern = contentPath.glob + ? `${contentPath.base}/${contentPath.glob}` + : contentPath.base + + contentPath.pattern = contentPath.ignore ? `!${contentPath.pattern}` : contentPath.pattern + + return contentPath } /** @@ -85,11 +123,11 @@ function resolveRelativePaths(context, contentPaths) { resolveFrom = [path.dirname(context.userConfigPath)] } - return contentPaths.map((contentPath) => - Object.assign(contentPath, { - base: path.resolve(...resolveFrom, contentPath.base), - }) - ) + return contentPaths.map((contentPath) => { + contentPath.base = path.resolve(...resolveFrom, contentPath.base) + + return contentPath + }) } /** @@ -102,16 +140,21 @@ function resolveRelativePaths(context, contentPaths) { * @returns {ContentPath[]} */ function resolvePathSymlinks(contentPath) { + let paths = [contentPath] + try { - let newPath = fs.realpathSync(contentPath.base, { encoding: 'utf8' }) - if (newPath !== contentPath.base) { - return [contentPath, { ...contentPath, base: newPath }] + let resolvedPath = fs.realpathSync(contentPath.base) + if (resolvedPath !== contentPath.base) { + paths.push({ + ...contentPath, + base: resolvedPath, + }) } } catch { // TODO: log this? } - return [contentPath] + return paths } /** @@ -141,13 +184,7 @@ export function resolvedChangedContent(context, candidateFiles, fileModifiedMap) * @returns {Set} */ function resolveChangedFiles(candidateFiles, fileModifiedMap) { - let paths = candidateFiles.map((contentPath) => - contentPath.original.startsWith('!') - ? contentPath.original - : contentPath.glob - ? `${contentPath.base}/${contentPath.glob}` - : contentPath.base - ) + let paths = candidateFiles.map((contentPath) => contentPath.pattern) let changedFiles = new Set() env.DEBUG && console.time('Finding changed files') diff --git a/src/util/parseDependency.js b/src/util/parseDependency.js index 5847056e7..f26eb1a29 100644 --- a/src/util/parseDependency.js +++ b/src/util/parseDependency.js @@ -10,7 +10,7 @@ * @returns {Dependency[]} */ export default function parseDependency(contentPath) { - if (contentPath.original.startsWith('!')) { + if (contentPath.ignore) { return [] } From 1d84e5b734d78d6a0239a05ad95abe30a242b530 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 Sep 2022 10:05:56 -0400 Subject: [PATCH 09/16] wip --- src/cli.js | 57 +++++++++++++++++++++++++-------- src/featureFlags.js | 2 -- src/lib/content.js | 5 +-- src/lib/setupContextUtils.js | 8 +++-- src/lib/setupTrackingContext.js | 21 ++++-------- src/util/resolveConfigPath.js | 22 ++++++------- 6 files changed, 67 insertions(+), 48 deletions(-) diff --git a/src/cli.js b/src/cli.js index 2851a79f1..56eb85a8e 100644 --- a/src/cli.js +++ b/src/cli.js @@ -19,6 +19,7 @@ import packageJson from '../package.json' import normalizePath from 'normalize-path' import micromatch from 'micromatch' import { validateConfig } from './util/validateConfig.js' +import { parseCandidateFiles } from './lib/content.js' let env = { DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0', @@ -219,6 +220,10 @@ let commands = { type: Boolean, description: 'Disable autoprefixer', }, + '--experimental-contextual-paths': { + type: Boolean, + description: 'Enable experimental contextual path resolution', + }, '-c': '--config', '-i': '--input', '-o': '--output', @@ -429,11 +434,17 @@ async function build() { process.exit(9) } - let configPath = args['--config'] - ? args['--config'] - : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))( - path.resolve(`./${configs.tailwind}`) - ) + let configPath + + if (args['--config']) { + // The user has specified an exact config file to use + // So we want to use that one and only that one + configPath = path.resolve(args['--config']) + } else { + // The user has not specified an exact config file to use + // So we want to find the closest one to the input file + configPath = `./${configs.tailwind}` + } async function loadPostCssPlugins() { let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined @@ -551,14 +562,20 @@ async function build() { } function extractFileGlobs(config) { - return config.content.files - .filter((file) => { - // Strings in this case are files / globs. If it is something else, - // like an object it's probably a raw content object. But this object - // is not watchable, so let's remove it. - return typeof file === 'string' - }) - .map((glob) => normalizePath(glob)) + let context = { + userConfigPath: configPath, + postcssOptions: args['--experimental-contextual-paths'] + ? { + experimental: { + contextualPaths: true, + }, + } + : {}, + } + + let contentPaths = parseCandidateFiles(context, config) + + return contentPaths.map((contentPath) => contentPath.pattern) } function extractRawContent(config) { @@ -599,7 +616,18 @@ async function build() { Once(root, { result }) { tailwind(({ createContext }) => { return () => { - return createContext(config, changedContent) + let context = createContext(config, changedContent) + Object.assign(context, { + userConfigPath: configPath, + postcssOptions: args['--experimental-contextual-paths'] + ? { + experimental: { + contextualPaths: true, + }, + } + : {}, + }) + return context } })(root, result) }, @@ -845,6 +873,7 @@ async function build() { * @return {{all: string[], dynamic: string[], static: string[]}} **/ function refreshContentPatterns(config) { + // TODO: This can be optimized since we're using `fastGlob.generateTasks` indirectly in extractFileGlobs let globs = extractFileGlobs(config) let tasks = fastGlob.generateTasks(globs, { absolute: true }) let dynamicPatterns = tasks.filter((task) => task.dynamic).flatMap((task) => task.patterns) diff --git a/src/featureFlags.js b/src/featureFlags.js index 7616dbd64..bd75108ea 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -15,8 +15,6 @@ let featureFlags = { 'optimizeUniversalDefaults', 'matchVariant', // 'variantGrouping', - 'resolveContentRelativeToConfig', - 'resolveConfigRelativeToInput', ], } diff --git a/src/lib/content.js b/src/lib/content.js index da153dddc..f0ceefa9f 100644 --- a/src/lib/content.js +++ b/src/lib/content.js @@ -116,10 +116,7 @@ function resolveRelativePaths(context, contentPaths) { let resolveFrom = [] // Resolve base paths relative to the config file (when possible) if the experimental flag is enabled - if ( - context.userConfigPath && - flagEnabled(context.tailwindConfig, 'resolveContentRelativeToConfig') - ) { + if (context.userConfigPath && context.postcssOptions?.experimental?.contextualPaths) { resolveFrom = [path.dirname(context.userConfigPath)] } diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 3c6f6ae40..050f98721 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -937,7 +937,8 @@ export function getContext( tailwindConfig, userConfigPath, tailwindConfigHash, - contextDependencies + contextDependencies, + postcssOptions ) { let sourcePath = result.opts.from let isConfigFile = userConfigPath !== null @@ -997,7 +998,10 @@ export function getContext( let context = createContext(tailwindConfig, [], root) - Object.assign(context, { userConfigPath }) + Object.assign(context, { + userConfigPath, + postcssOptions, + }) trackModified([...contextDependencies], getFileModifiedMap(context)) diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index 0f1526f23..eae375e98 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -1,19 +1,10 @@ import fs from 'fs' -import path from 'path' - -import fastGlob from 'fast-glob' import LRU from 'quick-lru' -import normalizePath from 'normalize-path' import hash from '../util/hashConfig' import getModuleDependencies from '../lib/getModuleDependencies' - import resolveConfig from '../public/resolve-config' - import resolveConfigPath from '../util/resolveConfigPath' - -import { env } from './sharedState' - import { getContext, getFileModifiedMap } from './setupContextUtils' import parseDependency from '../util/parseDependency' import { validateConfig } from '../util/validateConfig.js' @@ -36,6 +27,7 @@ function getCandidateFiles(context, tailwindConfig) { // Get the config object based on a path function getTailwindConfig(configOrPath, inputPath) { let userConfigPath = resolveConfigPath(configOrPath, inputPath) + let postcssOptions = typeof configOrPath === 'object' && configOrPath !== null ? configOrPath : {} if (userConfigPath !== null) { let [prevConfig, prevConfigHash, prevDeps, prevModified] = @@ -55,7 +47,7 @@ function getTailwindConfig(configOrPath, inputPath) { // It hasn't changed (based on timestamps) if (!modified) { - return [prevConfig, userConfigPath, prevConfigHash, prevDeps] + return [prevConfig, userConfigPath, prevConfigHash, prevDeps, postcssOptions] } // It has changed (based on timestamps), or first run @@ -66,7 +58,7 @@ function getTailwindConfig(configOrPath, inputPath) { newConfig = validateConfig(newConfig) let newHash = hash(newConfig) configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified]) - return [newConfig, userConfigPath, newHash, newDeps] + return [newConfig, userConfigPath, newHash, newDeps, postcssOptions] } // It's a plain object, not a path @@ -76,7 +68,7 @@ function getTailwindConfig(configOrPath, inputPath) { newConfig = validateConfig(newConfig) - return [newConfig, null, hash(newConfig), []] + return [newConfig, null, hash(newConfig), [], postcssOptions] } // DISABLE_TOUCH = TRUE @@ -87,7 +79,7 @@ function getTailwindConfig(configOrPath, inputPath) { export default function setupTrackingContext(configOrPath) { return ({ tailwindDirectives, registerDependency }) => { return (root, result) => { - let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = + let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies, postcssOptions] = getTailwindConfig(configOrPath, result.opts.from) let contextDependencies = new Set(configDependencies) @@ -116,7 +108,8 @@ export default function setupTrackingContext(configOrPath) { tailwindConfig, userConfigPath, tailwindConfigHash, - contextDependencies + contextDependencies, + postcssOptions ) let candidateFiles = getCandidateFiles(context, tailwindConfig) diff --git a/src/util/resolveConfigPath.js b/src/util/resolveConfigPath.js index f622f75f0..c2b8e862b 100644 --- a/src/util/resolveConfigPath.js +++ b/src/util/resolveConfigPath.js @@ -34,16 +34,10 @@ function pickResolvedPath(configPath, inputPath) { if (inputPath) { try { // Use require.resolve so we can find config file in parent directories - let resolvedPath = require.resolve(configPath, { - paths: [inputPath], + return require.resolve(configPath, { + paths: [path.dirname(inputPath)], }) - - let maybeConfig = require(resolvedPath) - - if (typeof maybeConfig === 'object' && flagEnabled(maybeConfig, 'resolveConfigRelativeToInput')) { - return resolvedPath - } - } catch (e) {} + } catch {} } return path.resolve(configPath) @@ -61,7 +55,11 @@ export default function resolveConfigPath(pathOrConfig, inputPath) { pathOrConfig.config !== undefined && isString(pathOrConfig.config) ) { - return pickResolvedPath(pathOrConfig.config, inputPath) + if (pathOrConfig.experimental?.contextualPaths) { + return pickResolvedPath(pathOrConfig.config, inputPath) + } + + return path.resolve(pathOrConfig.config) } // require('tailwindcss')({ config: { theme: ..., variants: ... } }) @@ -75,13 +73,13 @@ export default function resolveConfigPath(pathOrConfig, inputPath) { // require('tailwindcss')('custom-config.js') if (isString(pathOrConfig)) { - return pickResolvedPath(pathOrConfig, inputPath) + return path.resolve(pathOrConfig) } // require('tailwindcss') for (const configFile of ['./tailwind.config.js', './tailwind.config.cjs']) { try { - const configPath = pickResolvedPath(configFile, inputPath) + const configPath = path.resolve(configFile) fs.accessSync(configPath) return configPath } catch (err) {} From a15bee463fa44980ad248721a05eb54e490648e9 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 Sep 2022 10:18:50 -0400 Subject: [PATCH 10/16] wip --- src/cli.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/cli.js b/src/cli.js index 56eb85a8e..23121a239 100644 --- a/src/cli.js +++ b/src/cli.js @@ -20,6 +20,7 @@ import normalizePath from 'normalize-path' import micromatch from 'micromatch' import { validateConfig } from './util/validateConfig.js' import { parseCandidateFiles } from './lib/content.js' +import resolveConfigPath from './util/resolveConfigPath.js' let env = { DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0', @@ -441,9 +442,23 @@ async function build() { // So we want to use that one and only that one configPath = path.resolve(args['--config']) } else { + let postcssOptions = { + config: `./${configs.tailwind}`, + experimental: { + contextualPaths: args['--experimental-contextual-paths'], + }, + } + // The user has not specified an exact config file to use // So we want to find the closest one to the input file - configPath = `./${configs.tailwind}` + // when experimental contextual paths are enabled + let maybeConfigPath = resolveConfigPath(postcssOptions, path.resolve(input)) + + if (fs.existsSync(maybeConfigPath)) { + configPath = maybeConfigPath + } else { + configPath = null + } } async function loadPostCssPlugins() { From 9ac928b92cecb6e8ac5c67ef0bdcd3948a3057b1 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 Sep 2022 10:19:13 -0400 Subject: [PATCH 11/16] wip --- src/cli.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/cli.js b/src/cli.js index 23121a239..ad76ab0b0 100644 --- a/src/cli.js +++ b/src/cli.js @@ -631,18 +631,7 @@ async function build() { Once(root, { result }) { tailwind(({ createContext }) => { return () => { - let context = createContext(config, changedContent) - Object.assign(context, { - userConfigPath: configPath, - postcssOptions: args['--experimental-contextual-paths'] - ? { - experimental: { - contextualPaths: true, - }, - } - : {}, - }) - return context + return createContext(config, changedContent) } })(root, result) }, From 20ab1b3c64ded7f1c907610262d8373eb27ce521 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 20 Sep 2022 10:32:59 -0400 Subject: [PATCH 12/16] wip --- integrations/tailwindcss-cli/tests/cli.test.js | 1 + src/cli.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index 9ebcd3012..e23b6c36d 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -459,6 +459,7 @@ describe('Build command', () => { -m, --minify Minify the output -c, --config Path to a custom config file --no-autoprefixer Disable autoprefixer + --experimental-contextual-paths Enable experimental contextual path resolution -h, --help Display usage information `) ) diff --git a/src/cli.js b/src/cli.js index ad76ab0b0..5f4bad74a 100644 --- a/src/cli.js +++ b/src/cli.js @@ -452,7 +452,7 @@ async function build() { // The user has not specified an exact config file to use // So we want to find the closest one to the input file // when experimental contextual paths are enabled - let maybeConfigPath = resolveConfigPath(postcssOptions, path.resolve(input)) + let maybeConfigPath = resolveConfigPath(postcssOptions, input ? path.resolve(input) : null) if (fs.existsSync(maybeConfigPath)) { configPath = maybeConfigPath From 59fc32e3ad985413f2c64e06455887cf66a4037c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 21 Sep 2022 13:32:04 -0400 Subject: [PATCH 13/16] wip --- src/featureFlags.js | 1 + src/index.js | 5 +++++ src/lib/content.js | 2 +- src/lib/findAtConfigPath.js | 33 +++++++++++++++++++++++++++++++++ src/lib/setupContextUtils.js | 4 +--- src/lib/setupTrackingContext.js | 12 +++++------- src/util/normalizeConfig.js | 24 ++++++++++++++++++++++-- src/util/resolveConfigPath.js | 6 +++--- types/config.d.ts | 1 + 9 files changed, 72 insertions(+), 16 deletions(-) create mode 100644 src/lib/findAtConfigPath.js diff --git a/src/featureFlags.js b/src/featureFlags.js index bd75108ea..a03916c5b 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -10,6 +10,7 @@ let featureFlags = { 'hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity', 'disableColorOpacityUtilitiesByDefault', + 'relativeContentPathsByDefault', ], experimental: [ 'optimizeUniversalDefaults', diff --git a/src/index.js b/src/index.js index 9e9e291eb..7dc41c317 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import setupTrackingContext from './lib/setupTrackingContext' import processTailwindFeatures from './processTailwindFeatures' import { env } from './lib/sharedState' +import { findAtConfigPath } from './lib/findAtConfigPath' module.exports = function tailwindcss(configOrPath) { return { @@ -13,6 +14,10 @@ module.exports = function tailwindcss(configOrPath) { return root }, function (root, result) { + // Use the path for the `@config` directive if it exists, otherwise use the + // path for the file being processed + configOrPath = findAtConfigPath(root, result) ?? configOrPath + let context = setupTrackingContext(configOrPath) if (root.type === 'document') { diff --git a/src/lib/content.js b/src/lib/content.js index f0ceefa9f..96d03d345 100644 --- a/src/lib/content.js +++ b/src/lib/content.js @@ -116,7 +116,7 @@ function resolveRelativePaths(context, contentPaths) { let resolveFrom = [] // Resolve base paths relative to the config file (when possible) if the experimental flag is enabled - if (context.userConfigPath && context.postcssOptions?.experimental?.contextualPaths) { + if (context.userConfigPath && context.tailwindConfig.content.relative) { resolveFrom = [path.dirname(context.userConfigPath)] } diff --git a/src/lib/findAtConfigPath.js b/src/lib/findAtConfigPath.js new file mode 100644 index 000000000..067e8e312 --- /dev/null +++ b/src/lib/findAtConfigPath.js @@ -0,0 +1,33 @@ +import path from 'path' + +/** + * Find the @config at-rule in the given CSS AST and return the relative path to the config file + * + * + * @param {import('postcss').Root} root + * @param {import('postcss').Result} result + */ +export function findAtConfigPath(root, result) { + let configPath = null + let relativeTo = root.source.input.file ?? result.opts.from ?? null + + root.walkAtRules('config', (rule) => { + if (relativeTo === undefined) { + throw rule.error( + 'The `@config` at-rule cannot be used without a `from` option being set on the PostCSS config.' + ) + } + + if (configPath) { + throw rule.error('Only `@config` at-rule is allowed per file.') + } + + configPath = rule.params.replace(/^['"]|['"]$/, '') + + if (path.isAbsolute(configPath)) { + throw rule.error('The `@config` at-rule cannot be used with an absolute path.') + } + }) + + return configPath ? path.resolve(path.dirname(relativeTo), configPath) : null +} diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 050f98721..2b0fadabd 100644 --- a/src/lib/setupContextUtils.js +++ b/src/lib/setupContextUtils.js @@ -937,8 +937,7 @@ export function getContext( tailwindConfig, userConfigPath, tailwindConfigHash, - contextDependencies, - postcssOptions + contextDependencies ) { let sourcePath = result.opts.from let isConfigFile = userConfigPath !== null @@ -1000,7 +999,6 @@ export function getContext( Object.assign(context, { userConfigPath, - postcssOptions, }) trackModified([...contextDependencies], getFileModifiedMap(context)) diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index eae375e98..8c68e9f18 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -27,7 +27,6 @@ function getCandidateFiles(context, tailwindConfig) { // Get the config object based on a path function getTailwindConfig(configOrPath, inputPath) { let userConfigPath = resolveConfigPath(configOrPath, inputPath) - let postcssOptions = typeof configOrPath === 'object' && configOrPath !== null ? configOrPath : {} if (userConfigPath !== null) { let [prevConfig, prevConfigHash, prevDeps, prevModified] = @@ -47,7 +46,7 @@ function getTailwindConfig(configOrPath, inputPath) { // It hasn't changed (based on timestamps) if (!modified) { - return [prevConfig, userConfigPath, prevConfigHash, prevDeps, postcssOptions] + return [prevConfig, userConfigPath, prevConfigHash, prevDeps] } // It has changed (based on timestamps), or first run @@ -58,7 +57,7 @@ function getTailwindConfig(configOrPath, inputPath) { newConfig = validateConfig(newConfig) let newHash = hash(newConfig) configPathCache.set(userConfigPath, [newConfig, newHash, newDeps, newModified]) - return [newConfig, userConfigPath, newHash, newDeps, postcssOptions] + return [newConfig, userConfigPath, newHash, newDeps] } // It's a plain object, not a path @@ -68,7 +67,7 @@ function getTailwindConfig(configOrPath, inputPath) { newConfig = validateConfig(newConfig) - return [newConfig, null, hash(newConfig), [], postcssOptions] + return [newConfig, null, hash(newConfig), []] } // DISABLE_TOUCH = TRUE @@ -79,7 +78,7 @@ function getTailwindConfig(configOrPath, inputPath) { export default function setupTrackingContext(configOrPath) { return ({ tailwindDirectives, registerDependency }) => { return (root, result) => { - let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies, postcssOptions] = + let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = getTailwindConfig(configOrPath, result.opts.from) let contextDependencies = new Set(configDependencies) @@ -108,8 +107,7 @@ export default function setupTrackingContext(configOrPath) { tailwindConfig, userConfigPath, tailwindConfigHash, - contextDependencies, - postcssOptions + contextDependencies ) let candidateFiles = getCandidateFiles(context, tailwindConfig) diff --git a/src/util/normalizeConfig.js b/src/util/normalizeConfig.js index 2d23a864d..70ff792fb 100644 --- a/src/util/normalizeConfig.js +++ b/src/util/normalizeConfig.js @@ -56,9 +56,11 @@ export function normalizeConfig(config) { // When `config.content` is an object if (typeof config.content === 'object' && config.content !== null) { - // Only `files`, `extract` and `transform` can exist in `config.content` + // Only `files`, `relative`, `extract`, and `transform` can exist in `config.content` if ( - Object.keys(config.content).some((key) => !['files', 'extract', 'transform'].includes(key)) + Object.keys(config.content).some( + (key) => !['files', 'extract', 'transform', 'relative'].includes(key) + ) ) { return false } @@ -112,6 +114,14 @@ export function normalizeConfig(config) { ) { return false } + + // `config.content.relative` is optional and can be a boolean + if ( + typeof config.content.relative !== 'boolean' && + typeof config.content.relative !== 'undefined' + ) { + return false + } } return true @@ -154,6 +164,16 @@ export function normalizeConfig(config) { // Normalize the `content` config.content = { + relative: (() => { + let { content } = config + + if (content?.relative) { + return content.relative + } + + return config.future?.relativeContentPathsByDefault ?? false + })(), + files: (() => { let { content, purge } = config diff --git a/src/util/resolveConfigPath.js b/src/util/resolveConfigPath.js index c2b8e862b..24fda7b5e 100644 --- a/src/util/resolveConfigPath.js +++ b/src/util/resolveConfigPath.js @@ -55,9 +55,9 @@ export default function resolveConfigPath(pathOrConfig, inputPath) { pathOrConfig.config !== undefined && isString(pathOrConfig.config) ) { - if (pathOrConfig.experimental?.contextualPaths) { - return pickResolvedPath(pathOrConfig.config, inputPath) - } + // if (pathOrConfig.experimental?.contextualPaths) { + // return pickResolvedPath(pathOrConfig.config, inputPath) + // } return path.resolve(pathOrConfig.config) } diff --git a/types/config.d.ts b/types/config.d.ts index a7d5104cf..0fff33918 100644 --- a/types/config.d.ts +++ b/types/config.d.ts @@ -31,6 +31,7 @@ type ContentConfig = | (FilePath | RawFile)[] | { files: (FilePath | RawFile)[] + relative?: boolean extract?: ExtractorFn | { [extension: string]: ExtractorFn } transform?: TransformerFn | { [extension: string]: TransformerFn } } From 78eea5bee049ed267600eafd43136aec4198bb21 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 21 Sep 2022 14:20:29 -0400 Subject: [PATCH 14/16] wip --- src/lib/findAtConfigPath.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/findAtConfigPath.js b/src/lib/findAtConfigPath.js index 067e8e312..81bf9cae4 100644 --- a/src/lib/findAtConfigPath.js +++ b/src/lib/findAtConfigPath.js @@ -22,7 +22,8 @@ export function findAtConfigPath(root, result) { throw rule.error('Only `@config` at-rule is allowed per file.') } - configPath = rule.params.replace(/^['"]|['"]$/, '') + configPath = rule.params.replace(/^['"]|['"]$/g, '') + rule.remove() if (path.isAbsolute(configPath)) { throw rule.error('The `@config` at-rule cannot be used with an absolute path.') From 9735d8d82ae0b8f69421b69f426f7bc63a65a3ad Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 22 Sep 2022 09:31:19 -0400 Subject: [PATCH 15/16] cleanup --- src/cli.js | 39 ++++++--------------------------- src/lib/findAtConfigPath.js | 1 - src/lib/setupTrackingContext.js | 6 ++--- src/util/normalizeConfig.js | 2 +- src/util/resolveConfigPath.js | 36 +----------------------------- 5 files changed, 12 insertions(+), 72 deletions(-) diff --git a/src/cli.js b/src/cli.js index 5f4bad74a..c9d6ab7c0 100644 --- a/src/cli.js +++ b/src/cli.js @@ -435,31 +435,12 @@ async function build() { process.exit(9) } - let configPath - - if (args['--config']) { - // The user has specified an exact config file to use - // So we want to use that one and only that one - configPath = path.resolve(args['--config']) - } else { - let postcssOptions = { - config: `./${configs.tailwind}`, - experimental: { - contextualPaths: args['--experimental-contextual-paths'], - }, - } - - // The user has not specified an exact config file to use - // So we want to find the closest one to the input file - // when experimental contextual paths are enabled - let maybeConfigPath = resolveConfigPath(postcssOptions, input ? path.resolve(input) : null) - - if (fs.existsSync(maybeConfigPath)) { - configPath = maybeConfigPath - } else { - configPath = null - } - } + // TODO: Reference the @config path here if exists + let configPath = args['--config'] + ? args['--config'] + : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))( + path.resolve(`./${configs.tailwind}`) + ) async function loadPostCssPlugins() { let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined @@ -578,14 +559,8 @@ async function build() { function extractFileGlobs(config) { let context = { + tailwindConfig: config, userConfigPath: configPath, - postcssOptions: args['--experimental-contextual-paths'] - ? { - experimental: { - contextualPaths: true, - }, - } - : {}, } let contentPaths = parseCandidateFiles(context, config) diff --git a/src/lib/findAtConfigPath.js b/src/lib/findAtConfigPath.js index 81bf9cae4..22702bc2c 100644 --- a/src/lib/findAtConfigPath.js +++ b/src/lib/findAtConfigPath.js @@ -3,7 +3,6 @@ import path from 'path' /** * Find the @config at-rule in the given CSS AST and return the relative path to the config file * - * * @param {import('postcss').Root} root * @param {import('postcss').Result} result */ diff --git a/src/lib/setupTrackingContext.js b/src/lib/setupTrackingContext.js index 8c68e9f18..3e51bd9e1 100644 --- a/src/lib/setupTrackingContext.js +++ b/src/lib/setupTrackingContext.js @@ -25,8 +25,8 @@ function getCandidateFiles(context, tailwindConfig) { } // Get the config object based on a path -function getTailwindConfig(configOrPath, inputPath) { - let userConfigPath = resolveConfigPath(configOrPath, inputPath) +function getTailwindConfig(configOrPath) { + let userConfigPath = resolveConfigPath(configOrPath) if (userConfigPath !== null) { let [prevConfig, prevConfigHash, prevDeps, prevModified] = @@ -79,7 +79,7 @@ export default function setupTrackingContext(configOrPath) { return ({ tailwindDirectives, registerDependency }) => { return (root, result) => { let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = - getTailwindConfig(configOrPath, result.opts.from) + getTailwindConfig(configOrPath) let contextDependencies = new Set(configDependencies) diff --git a/src/util/normalizeConfig.js b/src/util/normalizeConfig.js index 70ff792fb..baee48394 100644 --- a/src/util/normalizeConfig.js +++ b/src/util/normalizeConfig.js @@ -59,7 +59,7 @@ export function normalizeConfig(config) { // Only `files`, `relative`, `extract`, and `transform` can exist in `config.content` if ( Object.keys(config.content).some( - (key) => !['files', 'extract', 'transform', 'relative'].includes(key) + (key) => !['files', 'relative', 'extract', 'transform'].includes(key) ) ) { return false diff --git a/src/util/resolveConfigPath.js b/src/util/resolveConfigPath.js index 24fda7b5e..646a46fd4 100644 --- a/src/util/resolveConfigPath.js +++ b/src/util/resolveConfigPath.js @@ -1,6 +1,5 @@ import fs from 'fs' import path from 'path' -import { flagEnabled } from '../featureFlags.js' function isObject(value) { return typeof value === 'object' && value !== null @@ -14,36 +13,7 @@ function isString(value) { return typeof value === 'string' || value instanceof String } -/** - * This will take a possibly-relative path to a config and resolve - * it relative to the input path IF that config file exists and - * has the `resolveConfigRelativeToInput` flag enabled. - * - * If that file does not exist, or the flag is disabled, it will - * resolve the path relative to the current working directory. - * - * @param {string|undefined} inputPath - * @param {string} configPath - * @returns {string} - */ -function pickResolvedPath(configPath, inputPath) { - if (path.isAbsolute(configPath)) { - return configPath - } - - if (inputPath) { - try { - // Use require.resolve so we can find config file in parent directories - return require.resolve(configPath, { - paths: [path.dirname(inputPath)], - }) - } catch {} - } - - return path.resolve(configPath) -} - -export default function resolveConfigPath(pathOrConfig, inputPath) { +export default function resolveConfigPath(pathOrConfig) { // require('tailwindcss')({ theme: ..., variants: ... }) if (isObject(pathOrConfig) && pathOrConfig.config === undefined && !isEmpty(pathOrConfig)) { return null @@ -55,10 +25,6 @@ export default function resolveConfigPath(pathOrConfig, inputPath) { pathOrConfig.config !== undefined && isString(pathOrConfig.config) ) { - // if (pathOrConfig.experimental?.contextualPaths) { - // return pickResolvedPath(pathOrConfig.config, inputPath) - // } - return path.resolve(pathOrConfig.config) } From 215e86f0f3136a97d884010b722de33607f47879 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 Sep 2022 14:01:12 -0400 Subject: [PATCH 16/16] Add prototype using `lightningcss` for minification fixup --- .../tailwindcss-cli/tests/cli.test.js | 18 ++++ package.json | 4 +- src/cli-peer-dependencies.js | 4 +- src/cli.js | 92 ++++++++++++++----- 4 files changed, 91 insertions(+), 27 deletions(-) diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index e23b6c36d..7c8200225 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -96,6 +96,24 @@ describe('Build command', () => { expect(withoutMinify.length).toBeGreaterThan(withMinify.length) }) + test('--minify applies Lightning CSS optimizations', async () => { + await writeInputFile('index.html', html`
`) + await writeInputFile( + 'index.css', + css` + .text-teal { + color: hsl(calc(360deg / 2) 50% 50%); + } + ` + ) + + await $(`${EXECUTABLE} --input ./src/index.css --output ./dist/main.css --minify`) + + let withMinify = await readOutputFile('main.css') + + expect(withMinify).toEqual(`.text-teal{color:#40bfbf}`) + }) + test('--no-autoprefixer', async () => { await writeInputFile('index.html', html`
`) diff --git a/package.json b/package.json index 5b449cc86..59f147669 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "scripts": { "preswcify": "npm run generate && rimraf lib", "swcify": "swc src --out-dir lib --copy-files", - "postswcify": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js", + "postswcify": "esbuild lib/cli-peer-dependencies.js --bundle --platform=node --outfile=peers/index.js --define:process.env.CSS_TRANSFORMER_WASM=false", "rebuild-fixtures": "npm run swcify && node -r @swc/register scripts/rebuildFixtures.js", "prepublishOnly": "npm install --force && npm run swcify", "style": "eslint .", @@ -47,13 +47,13 @@ "@swc/jest": "^0.2.22", "@swc/register": "^0.1.10", "autoprefixer": "^10.4.8", - "cssnano": "^5.1.13", "esbuild": "^0.15.7", "eslint": "^8.23.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "jest": "^28.1.3", "jest-diff": "^28.1.3", + "lightningcss": "^1.11.2", "prettier": "^2.7.1", "prettier-plugin-tailwindcss": "^0.1.13", "rimraf": "^3.0.0", diff --git a/src/cli-peer-dependencies.js b/src/cli-peer-dependencies.js index 6b9f986aa..4c9c6c339 100644 --- a/src/cli-peer-dependencies.js +++ b/src/cli-peer-dependencies.js @@ -10,6 +10,6 @@ export function lazyAutoprefixer() { return require('autoprefixer') } -export function lazyCssnano() { - return require('cssnano') +export function lazyLightningCss() { + return require('lightningcss') } diff --git a/src/cli.js b/src/cli.js index c9d6ab7c0..657321bb7 100644 --- a/src/cli.js +++ b/src/cli.js @@ -1,6 +1,11 @@ #!/usr/bin/env node -import { lazyPostcss, lazyPostcssImport, lazyCssnano, lazyAutoprefixer } from '../peers/index.js' +import { + lazyPostcss, + lazyPostcssImport, + lazyLightningCss, + lazyAutoprefixer, +} from '../peers/index.js' import chokidar from 'chokidar' import path from 'path' @@ -359,6 +364,67 @@ if (args['--help']) { run() +/// --- + +/** @type {import('lightningcss')} */ +let lightningCss + +/** @returns {import('lightningcss')} */ +function loadLightningCss() { + if (lightningCss) { + return lightningCss + } + + // Try to load a local version first + try { + return (lightningCss = require('lightningcss')) + } catch {} + + return (lightningCss = lazyLightningCss()) +} + +/** + * + * @param {boolean} shouldMinify + * @param {import('postcss').Result} result + * @returns {import('postcss').Result} + */ +async function minifyCss(shouldMinify, result) { + if (!shouldMinify) { + return result + } + + let css = loadLightningCss() + let transformed + + try { + transformed = css.transform({ + filename: result.opts.from || 'input.css', + code: Buffer.from(result.css, 'utf-8'), + minify: true, + sourceMap: true, + sourceMap: !!result.map, + inputSourceMap: result.map ? result.map.toString() : undefined, + }) + } catch (err) { + console.error('Unable to minify CSS. Using unminified version instead.') + console.error(err) + + return result + } + + return Object.assign(result, { + css: transformed.code.toString('utf8'), + map: result.map + ? Object.assign(result.map, { + toString() { + return transformed.map.toString() + }, + }) + : result.map, + }) +} + // --- function init() { @@ -633,17 +699,6 @@ async function build() { return lazyAutoprefixer() })(), - args['--minify'] && - (() => { - let options = { preset: ['default', { cssDeclarationSorter: false }] } - - // Try to load a local `cssnano` version first - try { - return require('cssnano') - } catch {} - - return lazyCssnano()(options) - })(), ].filter(Boolean) let postcss = loadPostcss() @@ -654,6 +709,7 @@ async function build() { return Promise.resolve() .then(() => (output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null)) .then(() => processor.process(css, { ...postcssOptions, from: input, to: output })) + .then((result) => minifyCss(!!args['--minify'], result)) .then((result) => { if (!output) { return process.stdout.write(result.css) @@ -735,17 +791,6 @@ async function build() { return lazyAutoprefixer() })(), - args['--minify'] && - (() => { - let options = { preset: ['default', { cssDeclarationSorter: false }] } - - // Try to load a local `cssnano` version first - try { - return require('cssnano') - } catch {} - - return lazyCssnano()(options) - })(), ].filter(Boolean) async function rebuild(config) { @@ -792,6 +837,7 @@ async function build() { output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null ) .then(() => processor.process(css, { from: input, to: output })) + .then((result) => minifyCss(!!args['--minify'], result)) .then(async (result) => { for (let message of result.messages) { if (message.type === 'dependency') {