diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4437abaeb7aa..d0ddea97ce15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Upgrade: Automatically convert candidates with arbitrary values to their utilities ([#17831](https://github.com/tailwindlabs/tailwindcss/pull/17831), [#17854](https://github.com/tailwindlabs/tailwindcss/pull/17854))
- Write to log file when using `DEBUG=*` ([#17906](https://github.com/tailwindlabs/tailwindcss/pull/17906))
+- Add support for source maps in development ([#17775](https://github.com/tailwindlabs/tailwindcss/pull/17775))
### Fixed
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index d30f6e24bb37..5c5cd1b29036 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -23,7 +23,7 @@ describe.each([
'Standalone CLI',
path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`),
],
-])('%s', (_, command) => {
+])('%s', (kind, command) => {
test(
'production build',
{
@@ -628,6 +628,194 @@ describe.each([
])
},
)
+
+ test(
+ 'production build + inline source maps',
+ {
+ fs: {
+ 'package.json': json`
+ {
+ "dependencies": {
+ "tailwindcss": "workspace:^",
+ "@tailwindcss/cli": "workspace:^"
+ }
+ }
+ `,
+ 'ssrc/index.html': html`
+
+ `,
+ 'src/index.css': css`
+ @import 'tailwindcss/utilities';
+ /* */
+ `,
+ },
+ },
+ async ({ exec, expect, fs, parseSourceMap }) => {
+ await exec(`${command} --input src/index.css --output dist/out.css --map`)
+
+ await fs.expectFileToContain('dist/out.css', [candidate`flex`])
+
+ // Make sure we can find a source map
+ let map = parseSourceMap(await fs.read('dist/out.css'))
+
+ expect(map.at(1, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '/*! tailwi...',
+ })
+
+ expect(map.at(2, 0)).toMatchObject({
+ source:
+ kind === 'CLI'
+ ? expect.stringContaining('node_modules/tailwindcss/utilities.css')
+ : expect.stringMatching(/\/utilities-\w+\.css$/),
+ original: '@tailwind...',
+ generated: '.flex {...',
+ })
+
+ expect(map.at(3, 2)).toMatchObject({
+ source:
+ kind === 'CLI'
+ ? expect.stringContaining('node_modules/tailwindcss/utilities.css')
+ : expect.stringMatching(/\/utilities-\w+\.css$/),
+ original: '@tailwind...',
+ generated: 'display: f...',
+ })
+
+ expect(map.at(4, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '}...',
+ })
+ },
+ )
+
+ test(
+ 'production build + separate source maps',
+ {
+ fs: {
+ 'package.json': json`
+ {
+ "dependencies": {
+ "tailwindcss": "workspace:^",
+ "@tailwindcss/cli": "workspace:^"
+ }
+ }
+ `,
+ 'ssrc/index.html': html`
+
+ `,
+ 'src/index.css': css`
+ @import 'tailwindcss/utilities';
+ /* */
+ `,
+ },
+ },
+ async ({ exec, expect, fs, parseSourceMap }) => {
+ await exec(`${command} --input src/index.css --output dist/out.css --map dist/out.css.map`)
+
+ await fs.expectFileToContain('dist/out.css', [candidate`flex`])
+
+ // Make sure we can find a source map
+ let map = parseSourceMap({
+ map: await fs.read('dist/out.css.map'),
+ content: await fs.read('dist/out.css'),
+ })
+
+ expect(map.at(1, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '/*! tailwi...',
+ })
+
+ expect(map.at(2, 0)).toMatchObject({
+ source:
+ kind === 'CLI'
+ ? expect.stringContaining('node_modules/tailwindcss/utilities.css')
+ : expect.stringMatching(/\/utilities-\w+\.css$/),
+ original: '@tailwind...',
+ generated: '.flex {...',
+ })
+
+ expect(map.at(3, 2)).toMatchObject({
+ source:
+ kind === 'CLI'
+ ? expect.stringContaining('node_modules/tailwindcss/utilities.css')
+ : expect.stringMatching(/\/utilities-\w+\.css$/),
+ original: '@tailwind...',
+ generated: 'display: f...',
+ })
+
+ expect(map.at(4, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '}...',
+ })
+ },
+ )
+
+ // Skipped because Lightning CSS has a bug with source maps containing
+ // license comments and it breaks stuff.
+ test.skip(
+ 'production build + minify + source maps',
+ {
+ fs: {
+ 'package.json': json`
+ {
+ "dependencies": {
+ "tailwindcss": "workspace:^",
+ "@tailwindcss/cli": "workspace:^"
+ }
+ }
+ `,
+ 'ssrc/index.html': html`
+
+ `,
+ 'src/index.css': css`
+ @import 'tailwindcss/utilities';
+ /* */
+ `,
+ },
+ },
+ async ({ exec, expect, fs, parseSourceMap }) => {
+ await exec(`${command} --input src/index.css --output dist/out.css --minify --map`)
+
+ await fs.expectFileToContain('dist/out.css', [candidate`flex`])
+
+ // Make sure we can find a source map
+ let map = parseSourceMap(await fs.read('dist/out.css'))
+
+ expect(map.at(1, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '/*! tailwi...',
+ })
+
+ expect(map.at(2, 0)).toMatchObject({
+ source:
+ kind === 'CLI'
+ ? expect.stringContaining('node_modules/tailwindcss/utilities.css')
+ : expect.stringMatching(/\/utilities-\w+\.css$/),
+ original: '@tailwind...',
+ generated: '.flex {...',
+ })
+
+ expect(map.at(3, 2)).toMatchObject({
+ source:
+ kind === 'CLI'
+ ? expect.stringContaining('node_modules/tailwindcss/utilities.css')
+ : expect.stringMatching(/\/utilities-\w+\.css$/),
+ original: '@tailwind...',
+ generated: 'display: f...',
+ })
+
+ expect(map.at(4, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '}...',
+ })
+ },
+ )
})
test(
diff --git a/integrations/package.json b/integrations/package.json
index 62f458c77480..a3c1025f916e 100644
--- a/integrations/package.json
+++ b/integrations/package.json
@@ -4,6 +4,7 @@
"private": true,
"devDependencies": {
"dedent": "1.5.3",
- "fast-glob": "^3.3.3"
+ "fast-glob": "^3.3.3",
+ "source-map-js": "^1.2.1"
}
}
diff --git a/integrations/postcss/index.test.ts b/integrations/postcss/index.test.ts
index 7a263ba92d51..3e81195eef80 100644
--- a/integrations/postcss/index.test.ts
+++ b/integrations/postcss/index.test.ts
@@ -712,3 +712,68 @@ test(
await retryAssertion(async () => expect(await fs.read('dist/out.css')).toEqual(''))
},
)
+
+test(
+ 'dev mode + source maps',
+ {
+ fs: {
+ 'package.json': json`
+ {
+ "dependencies": {
+ "postcss": "^8",
+ "postcss-cli": "^11",
+ "tailwindcss": "workspace:^",
+ "@tailwindcss/postcss": "workspace:^"
+ }
+ }
+ `,
+ 'postcss.config.js': js`
+ module.exports = {
+ map: { inline: true },
+ plugins: {
+ '@tailwindcss/postcss': {},
+ },
+ }
+ `,
+ 'src/index.html': html`
+
+ `,
+ 'src/index.css': css`
+ @import 'tailwindcss/utilities';
+ @source not inline("inline");
+ /* */
+ `,
+ },
+ },
+ async ({ fs, exec, expect, parseSourceMap }) => {
+ await exec('pnpm postcss src/index.css --output dist/out.css')
+
+ await fs.expectFileToContain('dist/out.css', [candidate`flex`])
+
+ let map = parseSourceMap(await fs.read('dist/out.css'))
+
+ expect(map.at(1, 0)).toMatchObject({
+ source: '',
+ original: '(none)',
+ generated: '/*! tailwi...',
+ })
+
+ expect(map.at(2, 0)).toMatchObject({
+ source: expect.stringContaining('node_modules/tailwindcss/utilities.css'),
+ original: '@tailwind...',
+ generated: '.flex {...',
+ })
+
+ expect(map.at(3, 2)).toMatchObject({
+ source: expect.stringContaining('node_modules/tailwindcss/utilities.css'),
+ original: '@tailwind...',
+ generated: 'display: f...',
+ })
+
+ expect(map.at(4, 0)).toMatchObject({
+ source: expect.stringContaining('node_modules/tailwindcss/utilities.css'),
+ original: ';...',
+ generated: '}...',
+ })
+ },
+)
diff --git a/integrations/utils.ts b/integrations/utils.ts
index 8affff3b4a83..f13e8581eafb 100644
--- a/integrations/utils.ts
+++ b/integrations/utils.ts
@@ -5,7 +5,9 @@ import fs from 'node:fs/promises'
import { platform, tmpdir } from 'node:os'
import path from 'node:path'
import { stripVTControlCharacters } from 'node:util'
+import { RawSourceMap, SourceMapConsumer } from 'source-map-js'
import { test as defaultTest, type ExpectStatic } from 'vitest'
+import { createLineTable } from '../packages/tailwindcss/src/source-maps/line-table'
import { escape } from '../packages/tailwindcss/src/utils/escape'
const REPO_ROOT = path.join(__dirname, '..')
@@ -42,6 +44,7 @@ interface TestContext {
expect: ExpectStatic
exec(command: string, options?: ChildProcessOptions, execOptions?: ExecOptions): Promise
spawn(command: string, options?: ChildProcessOptions): Promise
+ parseSourceMap(opts: string | SourceMapOptions): SourceMap
fs: {
write(filePath: string, content: string, encoding?: BufferEncoding): Promise
create(filePaths: string[]): Promise
@@ -104,6 +107,7 @@ export function test(
let context = {
root,
expect: options.expect,
+ parseSourceMap,
async exec(
command: string,
childProcessOptions: ChildProcessOptions = {},
@@ -591,7 +595,9 @@ export async function fetchStyles(base: string, path = '/'): Promise {
}
return stylesheets.reduce((acc, css) => {
- return acc + '\n' + css
+ if (acc.length > 0) acc += '\n'
+ acc += css
+ return acc
}, '')
}
@@ -603,3 +609,82 @@ async function gracefullyRemove(dir: string) {
})
}
}
+
+const SOURCE_MAP_COMMENT = /^\/\*# sourceMappingURL=data:application\/json;base64,(.*) \*\/$/
+
+export interface SourceMap {
+ at(
+ line: number,
+ column: number,
+ ): {
+ source: string | null
+ original: string
+ generated: string
+ }
+}
+
+interface SourceMapOptions {
+ /**
+ * A raw source map
+ *
+ * This may be a string or an object. Strings will be decoded.
+ */
+ map: string | object
+
+ /**
+ * The content of the generated file the source map is for
+ */
+ content: string
+
+ /**
+ * The encoding of the source map
+ *
+ * Can be used to decode a base64 map (e.g. an inline source map URI)
+ */
+ encoding?: BufferEncoding
+}
+
+function parseSourceMap(opts: string | SourceMapOptions): SourceMap {
+ if (typeof opts === 'string') {
+ let lines = opts.trimEnd().split('\n')
+ let comment = lines.at(-1) ?? ''
+ let map = String(comment).match(SOURCE_MAP_COMMENT)?.[1] ?? null
+ if (!map) throw new Error('No source map comment found')
+
+ return parseSourceMap({
+ map,
+ content: lines.slice(0, -1).join('\n'),
+ encoding: 'base64',
+ })
+ }
+
+ let rawMap: RawSourceMap
+ let content = opts.content
+
+ if (typeof opts.map === 'object') {
+ rawMap = opts.map as RawSourceMap
+ } else {
+ rawMap = JSON.parse(Buffer.from(opts.map, opts.encoding ?? 'utf-8').toString())
+ }
+
+ let map = new SourceMapConsumer(rawMap)
+ let generatedTable = createLineTable(content)
+
+ return {
+ at(line: number, column: number) {
+ let pos = map.originalPositionFor({ line, column })
+ let source = pos.source ? map.sourceContentFor(pos.source) : null
+ let originalTable = createLineTable(source ?? '')
+ let originalOffset = originalTable.findOffset(pos)
+ let generatedOffset = generatedTable.findOffset({ line, column })
+
+ return {
+ source: pos.source,
+ original: source
+ ? source.slice(originalOffset, originalOffset + 10).trim() + '...'
+ : '(none)',
+ generated: content.slice(generatedOffset, generatedOffset + 10).trim() + '...',
+ }
+ },
+ }
+}
diff --git a/integrations/vite/source-maps.test.ts b/integrations/vite/source-maps.test.ts
new file mode 100644
index 000000000000..5a4b4ab79bb4
--- /dev/null
+++ b/integrations/vite/source-maps.test.ts
@@ -0,0 +1,93 @@
+import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
+
+test(
+ `dev build`,
+ {
+ fs: {
+ 'package.json': json`
+ {
+ "type": "module",
+ "dependencies": {
+ "@tailwindcss/vite": "workspace:^",
+ "tailwindcss": "workspace:^"
+ },
+ "devDependencies": {
+ "lightningcss": "^1.26.0",
+ "vite": "^6"
+ }
+ }
+ `,
+ 'vite.config.ts': ts`
+ import tailwindcss from '@tailwindcss/vite'
+ import { defineConfig } from 'vite'
+
+ export default defineConfig({
+ plugins: [tailwindcss()],
+ css: {
+ devSourcemap: true,
+ },
+ })
+ `,
+ 'index.html': html`
+
+
+
+
+ Hello, world!
+
+ `,
+ 'src/index.css': css`
+ @import 'tailwindcss/utilities';
+ /* */
+ `,
+ },
+ },
+ async ({ fs, spawn, expect, parseSourceMap }) => {
+ // Source maps only work in development mode in Vite
+ let process = await spawn('pnpm vite dev')
+ await process.onStdout((m) => m.includes('ready in'))
+
+ let url = ''
+ await process.onStdout((m) => {
+ let match = /Local:\s*(http.*)\//.exec(m)
+ if (match) url = match[1]
+ return Boolean(url)
+ })
+
+ let styles = await retryAssertion(async () => {
+ let styles = await fetchStyles(url, '/index.html')
+
+ // Wait until we have the right CSS
+ expect(styles).toContain(candidate`flex`)
+
+ return styles
+ })
+
+ // Make sure we can find a source map
+ let map = parseSourceMap(styles)
+
+ expect(map.at(1, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '/*! tailwi...',
+ })
+
+ expect(map.at(2, 0)).toMatchObject({
+ source: expect.stringContaining('node_modules/tailwindcss/utilities.css'),
+ original: '@tailwind...',
+ generated: '.flex {...',
+ })
+
+ expect(map.at(3, 2)).toMatchObject({
+ source: expect.stringContaining('node_modules/tailwindcss/utilities.css'),
+ original: '@tailwind...',
+ generated: 'display: f...',
+ })
+
+ expect(map.at(4, 0)).toMatchObject({
+ source: null,
+ original: '(none)',
+ generated: '}...',
+ })
+ },
+)
diff --git a/packages/@tailwindcss-browser/src/index.ts b/packages/@tailwindcss-browser/src/index.ts
index e7688a1219e7..74992157f5d5 100644
--- a/packages/@tailwindcss-browser/src/index.ts
+++ b/packages/@tailwindcss-browser/src/index.ts
@@ -116,6 +116,7 @@ async function loadStylesheet(id: string, base: string) {
function load() {
if (id === 'tailwindcss') {
return {
+ path: 'virtual:tailwindcss/index.css',
base,
content: assets.css.index,
}
@@ -125,6 +126,7 @@ async function loadStylesheet(id: string, base: string) {
id === './preflight.css'
) {
return {
+ path: 'virtual:tailwindcss/preflight.css',
base,
content: assets.css.preflight,
}
@@ -134,6 +136,7 @@ async function loadStylesheet(id: string, base: string) {
id === './theme.css'
) {
return {
+ path: 'virtual:tailwindcss/theme.css',
base,
content: assets.css.theme,
}
@@ -143,6 +146,7 @@ async function loadStylesheet(id: string, base: string) {
id === './utilities.css'
) {
return {
+ path: 'virtual:tailwindcss/utilities.css',
base,
content: assets.css.utilities,
}
diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts
index 8c840c666167..8babb5654671 100644
--- a/packages/@tailwindcss-cli/src/commands/build/index.ts
+++ b/packages/@tailwindcss-cli/src/commands/build/index.ts
@@ -1,5 +1,12 @@
import watcher from '@parcel/watcher'
-import { compile, env, Instrumentation, optimize } from '@tailwindcss/node'
+import {
+ compile,
+ env,
+ Instrumentation,
+ optimize,
+ toSourceMap,
+ type SourceMap,
+} from '@tailwindcss/node'
import { clearRequireCache } from '@tailwindcss/node/require-cache'
import { Scanner, type ChangedContent } from '@tailwindcss/oxide'
import { existsSync, type Stats } from 'node:fs'
@@ -52,6 +59,11 @@ export function options() {
description: 'The current working directory',
default: '.',
},
+ '--map': {
+ type: 'boolean | string',
+ description: 'Generate a source map',
+ default: false,
+ },
} satisfies Arg
}
@@ -104,6 +116,19 @@ export async function handle(args: Result>) {
process.exit(1)
}
+ // If the user passes `{bin} build --map -` then this likely means they want to output the map inline
+ // this is the default behavior of `{bin build} --map` to inform the user of that
+ if (args['--map'] === '-') {
+ eprintln(`Use --map without a value to inline the source map`)
+ process.exit(1)
+ }
+
+ // Resolve the map as an absolute path. If the output is true then we
+ // don't need to resolve it because it'll be an inline source map
+ if (args['--map'] && args['--map'] !== true) {
+ args['--map'] = path.resolve(base, args['--map'])
+ }
+
let start = process.hrtime.bigint()
let input = args['--input']
@@ -119,27 +144,48 @@ export async function handle(args: Result>) {
optimizedCss: '',
}
- async function write(css: string, args: Result>, I: Instrumentation) {
+ async function write(
+ css: string,
+ map: SourceMap | null,
+ args: Result>,
+ I: Instrumentation,
+ ) {
let output = css
// Optimize the output
if (args['--minify'] || args['--optimize']) {
if (css !== previous.css) {
DEBUG && I.start('Optimize CSS')
- let optimizedCss = optimize(css, {
+ let optimized = optimize(css, {
file: args['--input'] ?? 'input.css',
minify: args['--minify'] ?? false,
+ map: map?.raw ?? undefined,
})
DEBUG && I.end('Optimize CSS')
previous.css = css
- previous.optimizedCss = optimizedCss
- output = optimizedCss
+ previous.optimizedCss = optimized.code
+ if (optimized.map) {
+ map = toSourceMap(optimized.map)
+ }
+ output = optimized.code
} else {
output = previous.optimizedCss
}
}
// Write the output
+ if (map) {
+ // Inline the source map
+ if (args['--map'] === true) {
+ output += `\n`
+ output += map.inline
+ } else if (typeof args['--map'] === 'string') {
+ DEBUG && I.start('Write source map')
+ await outputFile(args['--map'], map.raw)
+ DEBUG && I.end('Write source map')
+ }
+ }
+
DEBUG && I.start('Write output')
if (args['--output'] && args['--output'] !== '-') {
await outputFile(args['--output'], output)
@@ -159,6 +205,7 @@ export async function handle(args: Result>) {
async function createCompiler(css: string, I: Instrumentation) {
DEBUG && I.start('Setup compiler')
let compiler = await compile(css, {
+ from: args['--output'] ? (inputFilePath ?? 'stdin.css') : undefined,
base: inputBasePath,
onDependency(path) {
fullRebuildPaths.push(path)
@@ -230,6 +277,7 @@ export async function handle(args: Result>) {
// Track the compiled CSS
let compiledCss = ''
+ let compiledMap: SourceMap | null = null
// Scan the entire `base` directory for full rebuilds.
if (rebuildStrategy === 'full') {
@@ -268,6 +316,12 @@ export async function handle(args: Result>) {
DEBUG && I.start('Build CSS')
compiledCss = compiler.build(candidates)
DEBUG && I.end('Build CSS')
+
+ if (args['--map']) {
+ DEBUG && I.start('Build Source Map')
+ compiledMap = compiler.buildSourceMap() as any
+ DEBUG && I.end('Build Source Map')
+ }
}
// Scan changed files only for incremental rebuilds.
@@ -287,9 +341,15 @@ export async function handle(args: Result>) {
DEBUG && I.start('Build CSS')
compiledCss = compiler.build(newCandidates)
DEBUG && I.end('Build CSS')
+
+ if (args['--map']) {
+ DEBUG && I.start('Build Source Map')
+ compiledMap = compiler.buildSourceMap() as any
+ DEBUG && I.end('Build Source Map')
+ }
}
- await write(compiledCss, args, I)
+ await write(compiledCss, compiledMap, args, I)
let end = process.hrtime.bigint()
eprintln(`Done in ${formatDuration(end - start)}`)
@@ -324,7 +384,16 @@ export async function handle(args: Result>) {
DEBUG && I.start('Build CSS')
let output = await handleError(() => compiler.build(candidates))
DEBUG && I.end('Build CSS')
- await write(output, args, I)
+
+ let map: SourceMap | null = null
+
+ if (args['--map']) {
+ DEBUG && I.start('Build Source Map')
+ map = await handleError(() => toSourceMap(compiler.buildSourceMap()))
+ DEBUG && I.end('Build Source Map')
+ }
+
+ await write(output, map, args, I)
let end = process.hrtime.bigint()
eprintln(`Done in ${formatDuration(end - start)}`)
diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json
index d3631b758b24..a7c867013202 100644
--- a/packages/@tailwindcss-node/package.json
+++ b/packages/@tailwindcss-node/package.json
@@ -37,9 +37,12 @@
}
},
"dependencies": {
+ "@ampproject/remapping": "^2.3.0",
"enhanced-resolve": "^5.18.1",
"jiti": "^2.4.2",
- "tailwindcss": "workspace:*",
- "lightningcss": "catalog:"
+ "lightningcss": "catalog:",
+ "magic-string": "^0.30.17",
+ "source-map-js": "^1.2.1",
+ "tailwindcss": "workspace:*"
}
}
diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts
index ef9dfbcba57d..5ce6299af6a2 100644
--- a/packages/@tailwindcss-node/src/compile.ts
+++ b/packages/@tailwindcss-node/src/compile.ts
@@ -2,7 +2,7 @@ import EnhancedResolve from 'enhanced-resolve'
import { createJiti, type Jiti } from 'jiti'
import fs from 'node:fs'
import fsPromises from 'node:fs/promises'
-import path, { dirname } from 'node:path'
+import path from 'node:path'
import { pathToFileURL } from 'node:url'
import {
__unstable__loadDesignSystem as ___unstable__loadDesignSystem,
@@ -21,6 +21,7 @@ export type Resolver = (id: string, base: string) => Promise void
shouldRewriteUrls?: boolean
polyfills?: Polyfills
@@ -31,6 +32,7 @@ export interface CompileOptions {
function createCompileOptions({
base,
+ from,
polyfills,
onDependency,
shouldRewriteUrls,
@@ -41,6 +43,7 @@ function createCompileOptions({
return {
base,
polyfills,
+ from,
async loadModule(id: string, base: string) {
return loadModule(id, base, onDependency, customJsResolver)
},
@@ -125,7 +128,8 @@ export async function loadModule(
let module = await importModule(pathToFileURL(resolvedPath).href)
return {
- base: dirname(resolvedPath),
+ path: resolvedPath,
+ base: path.dirname(resolvedPath),
module: module.default ?? module,
}
}
@@ -144,7 +148,8 @@ export async function loadModule(
onDependency(file)
}
return {
- base: dirname(resolvedPath),
+ path: resolvedPath,
+ base: path.dirname(resolvedPath),
module: module.default ?? module,
}
}
@@ -164,6 +169,7 @@ async function loadStylesheet(
let file = await globalThis.__tw_readFile(resolvedPath, 'utf-8')
if (file) {
return {
+ path: resolvedPath,
base: path.dirname(resolvedPath),
content: file,
}
@@ -172,6 +178,7 @@ async function loadStylesheet(
let file = await fsPromises.readFile(resolvedPath, 'utf-8')
return {
+ path: resolvedPath,
base: path.dirname(resolvedPath),
content: file,
}
diff --git a/packages/@tailwindcss-node/src/index.cts b/packages/@tailwindcss-node/src/index.cts
index b9284a0c8628..4bca0a5e11de 100644
--- a/packages/@tailwindcss-node/src/index.cts
+++ b/packages/@tailwindcss-node/src/index.cts
@@ -5,6 +5,7 @@ export * from './compile'
export * from './instrumentation'
export * from './normalize-path'
export * from './optimize'
+export * from './source-maps'
export { env }
// In Bun, ESM modules will also populate `require.cache`, so the module hook is
diff --git a/packages/@tailwindcss-node/src/index.ts b/packages/@tailwindcss-node/src/index.ts
index 83d603429388..a5e7bf5b4bc3 100644
--- a/packages/@tailwindcss-node/src/index.ts
+++ b/packages/@tailwindcss-node/src/index.ts
@@ -5,6 +5,7 @@ export * from './compile'
export * from './instrumentation'
export * from './normalize-path'
export * from './optimize'
+export * from './source-maps'
export { env }
// In Bun, ESM modules will also populate `require.cache`, so the module hook is
diff --git a/packages/@tailwindcss-node/src/optimize.ts b/packages/@tailwindcss-node/src/optimize.ts
index bf7ab674a4f8..4024d15b8e0a 100644
--- a/packages/@tailwindcss-node/src/optimize.ts
+++ b/packages/@tailwindcss-node/src/optimize.ts
@@ -1,15 +1,42 @@
+import remapping from '@ampproject/remapping'
import { Features, transform } from 'lightningcss'
+import MagicString from 'magic-string'
+
+export interface OptimizeOptions {
+ /**
+ * The file being transformed
+ */
+ file?: string
+
+ /**
+ * Enabled minified output
+ */
+ minify?: boolean
+
+ /**
+ * The output source map before optimization
+ *
+ * If omitted a resulting source map will not be available
+ */
+ map?: string
+}
+
+export interface TransformResult {
+ code: string
+ map: string | undefined
+}
export function optimize(
input: string,
- { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
-): string {
- function optimize(code: Buffer | Uint8Array) {
+ { file = 'input.css', minify = false, map }: OptimizeOptions = {},
+): TransformResult {
+ function optimize(code: Buffer | Uint8Array, map: string | undefined) {
return transform({
filename: file,
- code: code as any,
+ code,
minify,
- sourceMap: false,
+ sourceMap: typeof map !== 'undefined',
+ inputSourceMap: map,
drafts: {
customMedia: true,
},
@@ -25,16 +52,39 @@ export function optimize(
chrome: 111 << 16,
},
errorRecovery: true,
- }).code
+ })
}
// Running Lightning CSS twice to ensure that adjacent rules are merged after
// nesting is applied. This creates a more optimized output.
- let out = optimize(optimize(Buffer.from(input))).toString()
+ let result = optimize(Buffer.from(input), map)
+ map = result.map?.toString()
+
+ result = optimize(result.code, map)
+ map = result.map?.toString()
+
+ let code = result.code.toString()
// Work around an issue where the media query range syntax transpilation
// generates code that is invalid with `@media` queries level 3.
- out = out.replaceAll('@media not (', '@media not all and (')
+ let magic = new MagicString(code)
+ magic.replaceAll('@media not (', '@media not all and (')
+
+ // We have to use a source-map-preserving method of replacing the content
+ // which requires the use of Magic String + remapping(…) to make sure
+ // the resulting map is correct
+ if (map !== undefined && magic.hasChanged()) {
+ let magicMap = magic.generateMap({ source: 'original', hires: 'boundary' }).toString()
- return out
+ let remapped = remapping([magicMap, map], () => null)
+
+ map = remapped.toString()
+ }
+
+ code = magic.toString()
+
+ return {
+ code,
+ map,
+ }
}
diff --git a/packages/@tailwindcss-node/src/source-maps.ts b/packages/@tailwindcss-node/src/source-maps.ts
new file mode 100644
index 000000000000..3f02efb24c00
--- /dev/null
+++ b/packages/@tailwindcss-node/src/source-maps.ts
@@ -0,0 +1,59 @@
+import { SourceMapGenerator } from 'source-map-js'
+import type { DecodedSource, DecodedSourceMap } from '../../tailwindcss/src/source-maps/source-map'
+import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
+
+export type { DecodedSource, DecodedSourceMap }
+export interface SourceMap {
+ readonly raw: string
+ readonly inline: string
+}
+
+function serializeSourceMap(map: DecodedSourceMap): string {
+ let generator = new SourceMapGenerator()
+
+ let id = 1
+ let sourceTable = new DefaultMap<
+ DecodedSource | null,
+ {
+ url: string
+ content: string
+ }
+ >((src) => {
+ return {
+ url: src?.url ?? ``,
+ content: src?.content ?? '',
+ }
+ })
+
+ for (let mapping of map.mappings) {
+ let original = sourceTable.get(mapping.originalPosition?.source ?? null)
+
+ generator.addMapping({
+ generated: mapping.generatedPosition,
+ original: mapping.originalPosition,
+ source: original.url,
+ name: mapping.name,
+ })
+
+ generator.setSourceContent(original.url, original.content)
+ }
+
+ return generator.toString()
+}
+
+export function toSourceMap(map: DecodedSourceMap | string): SourceMap {
+ let raw = typeof map === 'string' ? map : serializeSourceMap(map)
+
+ return {
+ raw,
+ get inline() {
+ let tmp = ''
+
+ tmp += '/*# sourceMappingURL=data:application/json;base64,'
+ tmp += Buffer.from(raw, 'utf-8').toString('base64')
+ tmp += ' */\n'
+
+ return tmp
+ },
+ }
+}
diff --git a/packages/@tailwindcss-postcss/src/ast.ts b/packages/@tailwindcss-postcss/src/ast.ts
index 201dd4bf8ac9..a2e1535e8cec 100644
--- a/packages/@tailwindcss-postcss/src/ast.ts
+++ b/packages/@tailwindcss-postcss/src/ast.ts
@@ -1,17 +1,54 @@
import postcss, {
+ Input,
type ChildNode as PostCssChildNode,
type Container as PostCssContainerNode,
type Root as PostCssRoot,
type Source as PostcssSource,
} from 'postcss'
import { atRule, comment, decl, rule, type AstNode } from '../../tailwindcss/src/ast'
+import { createLineTable, type LineTable } from '../../tailwindcss/src/source-maps/line-table'
+import type { Source, SourceLocation } from '../../tailwindcss/src/source-maps/source'
+import { DefaultMap } from '../../tailwindcss/src/utils/default-map'
const EXCLAMATION_MARK = 0x21
export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undefined): PostCssRoot {
+ let inputMap = new DefaultMap((src) => {
+ return new Input(src.code, {
+ map: source?.input.map,
+ from: src.file ?? undefined,
+ })
+ })
+
+ let lineTables = new DefaultMap((src) => createLineTable(src.code))
+
let root = postcss.root()
root.source = source
+ function toSource(loc: SourceLocation | undefined): PostcssSource | undefined {
+ // Use the fallback if this node has no location info in the AST
+ if (!loc) return
+ if (!loc[0]) return
+
+ let table = lineTables.get(loc[0])
+ let start = table.find(loc[1])
+ let end = table.find(loc[2])
+
+ return {
+ input: inputMap.get(loc[0]),
+ start: {
+ line: start.line,
+ column: start.column + 1,
+ offset: loc[1],
+ },
+ end: {
+ line: end.line,
+ column: end.column + 1,
+ offset: loc[2],
+ },
+ }
+ }
+
function transform(node: AstNode, parent: PostCssContainerNode) {
// Declaration
if (node.kind === 'declaration') {
@@ -20,14 +57,14 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
value: node.value ?? '',
important: node.important,
})
- astNode.source = source
+ astNode.source = toSource(node.src)
parent.append(astNode)
}
// Rule
else if (node.kind === 'rule') {
let astNode = postcss.rule({ selector: node.selector })
- astNode.source = source
+ astNode.source = toSource(node.src)
astNode.raws.semicolon = true
parent.append(astNode)
for (let child of node.nodes) {
@@ -38,7 +75,7 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
// AtRule
else if (node.kind === 'at-rule') {
let astNode = postcss.atRule({ name: node.name.slice(1), params: node.params })
- astNode.source = source
+ astNode.source = toSource(node.src)
astNode.raws.semicolon = true
parent.append(astNode)
for (let child of node.nodes) {
@@ -53,7 +90,7 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
// spaces.
astNode.raws.left = ''
astNode.raws.right = ''
- astNode.source = source
+ astNode.source = toSource(node.src)
parent.append(astNode)
}
@@ -75,18 +112,38 @@ export function cssAstToPostCssAst(ast: AstNode[], source: PostcssSource | undef
}
export function postCssAstToCssAst(root: PostCssRoot): AstNode[] {
+ let inputMap = new DefaultMap((input) => ({
+ file: input.file ?? input.id ?? null,
+ code: input.css,
+ }))
+
+ function toSource(node: PostCssChildNode): SourceLocation | undefined {
+ let source = node.source
+ if (!source) return
+
+ let input = source.input
+ if (!input) return
+ if (source.start === undefined) return
+ if (source.end === undefined) return
+
+ return [inputMap.get(input), source.start.offset, source.end.offset]
+ }
+
function transform(
node: PostCssChildNode,
parent: Extract['nodes'],
) {
// Declaration
if (node.type === 'decl') {
- parent.push(decl(node.prop, node.value, node.important))
+ let astNode = decl(node.prop, node.value, node.important)
+ astNode.src = toSource(node)
+ parent.push(astNode)
}
// Rule
else if (node.type === 'rule') {
let astNode = rule(node.selector)
+ astNode.src = toSource(node)
node.each((child) => transform(child, astNode.nodes))
parent.push(astNode)
}
@@ -94,6 +151,7 @@ export function postCssAstToCssAst(root: PostCssRoot): AstNode[] {
// AtRule
else if (node.type === 'atrule') {
let astNode = atRule(`@${node.name}`, node.params)
+ astNode.src = toSource(node)
node.each((child) => transform(child, astNode.nodes))
parent.push(astNode)
}
@@ -101,7 +159,9 @@ export function postCssAstToCssAst(root: PostCssRoot): AstNode[] {
// Comment
else if (node.type === 'comment') {
if (node.text.charCodeAt(0) !== EXCLAMATION_MARK) return
- parent.push(comment(node.text))
+ let astNode = comment(node.text)
+ astNode.src = toSource(node)
+ parent.push(astNode)
}
// Unknown
diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts
index b06c15cb237b..8a37f542c94f 100644
--- a/packages/@tailwindcss-postcss/src/index.ts
+++ b/packages/@tailwindcss-postcss/src/index.ts
@@ -121,6 +121,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
DEBUG && I.start('Create compiler')
let compiler = await compileAst(ast, {
+ from: result.opts.from,
base: inputBasePath,
shouldRewriteUrls: true,
onDependency: (path) => context.fullRebuildPaths.push(path),
@@ -282,13 +283,13 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
DEBUG && I.end('AST -> CSS')
DEBUG && I.start('Lightning CSS')
- let ast = optimizeCss(css, {
+ let optimized = optimizeCss(css, {
minify: typeof optimize === 'object' ? optimize.minify : true,
})
DEBUG && I.end('Lightning CSS')
DEBUG && I.start('CSS -> PostCSS AST')
- context.optimizedPostCssAst = postcss.parse(ast, result.opts)
+ context.optimizedPostCssAst = postcss.parse(optimized.code, result.opts)
DEBUG && I.end('CSS -> PostCSS AST')
DEBUG && I.end('Optimization')
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index a484583a3ec3..00ba92db4c83 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -1,4 +1,12 @@
-import { compile, env, Features, Instrumentation, normalizePath, optimize } from '@tailwindcss/node'
+import {
+ compile,
+ env,
+ Features,
+ Instrumentation,
+ normalizePath,
+ optimize,
+ toSourceMap,
+} from '@tailwindcss/node'
import { clearRequireCache } from '@tailwindcss/node/require-cache'
import { Scanner } from '@tailwindcss/oxide'
import fs from 'node:fs/promises'
@@ -34,7 +42,15 @@ export default function tailwindcss(): Plugin[] {
function customJsResolver(id: string, base: string) {
return jsResolver(id, base, true, isSSR)
}
- return new Root(id, config!.root, customCssResolver, customJsResolver)
+ return new Root(
+ id,
+ config!.root,
+ // Currently, Vite only supports CSS source maps in development and they
+ // are off by default. Check to see if we need them or not.
+ config?.css.devSourcemap ?? false,
+ customCssResolver,
+ customJsResolver,
+ )
})
return [
@@ -68,14 +84,14 @@ export default function tailwindcss(): Plugin[] {
let root = roots.get(id)
- let generated = await root.generate(src, (file) => this.addWatchFile(file), I)
- if (!generated) {
+ let result = await root.generate(src, (file) => this.addWatchFile(file), I)
+ if (!result) {
roots.delete(id)
return src
}
DEBUG && I.end('[@tailwindcss/vite] Generate CSS (serve)')
- return { code: generated }
+ return result
},
},
@@ -93,18 +109,21 @@ export default function tailwindcss(): Plugin[] {
let root = roots.get(id)
- let generated = await root.generate(src, (file) => this.addWatchFile(file), I)
- if (!generated) {
+ let result = await root.generate(src, (file) => this.addWatchFile(file), I)
+ if (!result) {
roots.delete(id)
return src
}
DEBUG && I.end('[@tailwindcss/vite] Generate CSS (build)')
DEBUG && I.start('[@tailwindcss/vite] Optimize CSS')
- generated = optimize(generated, { minify })
+ result = optimize(result.code, {
+ minify,
+ map: result.map,
+ })
DEBUG && I.end('[@tailwindcss/vite] Optimize CSS')
- return { code: generated }
+ return result
},
},
] satisfies Plugin[]
@@ -173,6 +192,7 @@ class Root {
private id: string,
private base: string,
+ private enableSourceMaps: boolean,
private customCssResolver: (id: string, base: string) => Promise,
private customJsResolver: (id: string, base: string) => Promise,
) {}
@@ -183,7 +203,13 @@ class Root {
content: string,
_addWatchFile: (file: string) => void,
I: Instrumentation,
- ): Promise {
+ ): Promise<
+ | {
+ code: string
+ map: string | undefined
+ }
+ | false
+ > {
let inputPath = idToPath(this.id)
function addWatchFile(file: string) {
@@ -215,6 +241,7 @@ class Root {
DEBUG && I.start('Setup compiler')
let addBuildDependenciesPromises: Promise[] = []
this.compiler = await compile(content, {
+ from: this.enableSourceMaps ? this.id : undefined,
base: inputBase,
shouldRewriteUrls: true,
onDependency: (path) => {
@@ -313,10 +340,17 @@ class Root {
}
DEBUG && I.start('Build CSS')
- let result = this.compiler.build([...this.candidates])
+ let code = this.compiler.build([...this.candidates])
DEBUG && I.end('Build CSS')
- return result
+ DEBUG && I.start('Build Source Map')
+ let map = this.enableSourceMaps ? toSourceMap(this.compiler.buildSourceMap()).raw : undefined
+ DEBUG && I.end('Build Source Map')
+
+ return {
+ code,
+ map,
+ }
}
private async addBuildDependency(path: string) {
diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json
index 92110f1ca2c3..91c05a22b5dc 100644
--- a/packages/tailwindcss/package.json
+++ b/packages/tailwindcss/package.json
@@ -127,9 +127,12 @@
"utilities.css"
],
"devDependencies": {
+ "@ampproject/remapping": "^2.3.0",
"@tailwindcss/oxide": "workspace:^",
"@types/node": "catalog:",
+ "dedent": "1.5.3",
"lightningcss": "catalog:",
- "dedent": "1.5.3"
+ "magic-string": "^0.30.17",
+ "source-map-js": "^1.2.1"
}
}
diff --git a/packages/tailwindcss/src/apply.ts b/packages/tailwindcss/src/apply.ts
index a9316d184fd8..87361804f7ae 100644
--- a/packages/tailwindcss/src/apply.ts
+++ b/packages/tailwindcss/src/apply.ts
@@ -2,6 +2,7 @@ import { Features } from '.'
import { rule, toCss, walk, WalkAction, type AstNode } from './ast'
import { compileCandidates } from './compile'
import type { DesignSystem } from './design-system'
+import type { SourceLocation } from './source-maps/source'
import { DefaultMap } from './utils/default-map'
export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
@@ -159,17 +160,59 @@ export function substituteAtApply(ast: AstNode[], designSystem: DesignSystem) {
walk(parent.nodes, (child, { replaceWith }) => {
if (child.kind !== 'at-rule' || child.name !== '@apply') return
- let candidates = child.params.split(/\s+/g)
+ let parts = child.params.split(/(\s+)/g)
+ let candidateOffsets: Record = {}
+
+ let offset = 0
+ for (let [idx, part] of parts.entries()) {
+ if (idx % 2 === 0) candidateOffsets[part] = offset
+ offset += part.length
+ }
// Replace the `@apply` rule with the actual utility classes
{
// Parse the candidates to an AST that we can replace the `@apply` rule
// with.
- let candidateAst = compileCandidates(candidates, designSystem, {
+ let candidates = Object.keys(candidateOffsets)
+ let compiled = compileCandidates(candidates, designSystem, {
onInvalidCandidate: (candidate) => {
throw new Error(`Cannot apply unknown utility class: ${candidate}`)
},
- }).astNodes
+ })
+
+ let src = child.src
+
+ let candidateAst = compiled.astNodes.map((node) => {
+ let candidate = compiled.nodeSorting.get(node)?.candidate
+ let candidateOffset = candidate ? candidateOffsets[candidate] : undefined
+
+ node = structuredClone(node)
+
+ if (!src || !candidate || candidateOffset === undefined) {
+ // While the original nodes may have come from an `@utility` we still
+ // want to replace the source because the `@apply` is ultimately the
+ // reason the node was emitted into the AST.
+ walk([node], (node) => {
+ node.src = src
+ })
+
+ return node
+ }
+
+ let candidateSrc: SourceLocation = [src[0], src[1], src[2]]
+
+ candidateSrc[1] += 7 /* '@apply '.length */ + candidateOffset
+ candidateSrc[2] = candidateSrc[1] + candidate.length
+
+ // While the original nodes may have come from an `@utility` we still
+ // want to replace the source because the `@apply` is ultimately the
+ // reason the node was emitted into the AST.
+ walk([node], (node) => {
+ node.src = candidateSrc
+ })
+
+ return node
+ })
// Collect the nodes to insert in place of the `@apply` rule. When a rule
// was used, we want to insert its children instead of the rule because we
diff --git a/packages/tailwindcss/src/ast.bench.ts b/packages/tailwindcss/src/ast.bench.ts
new file mode 100644
index 000000000000..a2d8b28920f2
--- /dev/null
+++ b/packages/tailwindcss/src/ast.bench.ts
@@ -0,0 +1,28 @@
+import { bench } from 'vitest'
+import { toCss } from './ast'
+import * as CSS from './css-parser'
+
+const css = String.raw
+const input = css`
+ @theme {
+ --color-primary: #333;
+ }
+ @tailwind utilities;
+ .foo {
+ color: red;
+ /* comment */
+ &:hover {
+ color: blue;
+ @apply font-bold;
+ }
+ }
+`
+const ast = CSS.parse(input)
+
+bench('toCss', () => {
+ toCss(ast)
+})
+
+bench('toCss with source maps', () => {
+ toCss(ast, true)
+})
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 3db0432dd3a9..e4b5d5a9ab52 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -1,6 +1,7 @@
import { Polyfills } from '.'
import { parseAtRule } from './css-parser'
import type { DesignSystem } from './design-system'
+import type { Source, SourceLocation } from './source-maps/source'
import { Theme, ThemeOptions } from './theme'
import { DefaultMap } from './utils/default-map'
import { extractUsedVariables } from './utils/variables'
@@ -12,6 +13,9 @@ export type StyleRule = {
kind: 'rule'
selector: string
nodes: AstNode[]
+
+ src?: SourceLocation
+ dst?: SourceLocation
}
export type AtRule = {
@@ -19,6 +23,9 @@ export type AtRule = {
name: string
params: string
nodes: AstNode[]
+
+ src?: SourceLocation
+ dst?: SourceLocation
}
export type Declaration = {
@@ -26,22 +33,34 @@ export type Declaration = {
property: string
value: string | undefined
important: boolean
+
+ src?: SourceLocation
+ dst?: SourceLocation
}
export type Comment = {
kind: 'comment'
value: string
+
+ src?: SourceLocation
+ dst?: SourceLocation
}
export type Context = {
kind: 'context'
context: Record
nodes: AstNode[]
+
+ src?: undefined
+ dst?: undefined
}
export type AtRoot = {
kind: 'at-root'
nodes: AstNode[]
+
+ src?: undefined
+ dst?: undefined
}
export type Rule = StyleRule | AtRule
@@ -378,10 +397,13 @@ export function optimizeAst(
}
}
+ let fallback = decl(property, initialValue ?? 'initial')
+ fallback.src = node.src
+
if (inherits) {
- propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
+ propertyFallbacksRoot.push(fallback)
} else {
- propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
+ propertyFallbacksUniversal.push(fallback)
}
}
@@ -623,6 +645,7 @@ export function optimizeAst(
value: ValueParser.toCss(ast),
}
let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [declaration])
+ colorMixQuery.src = declaration.src
parent.splice(idx, 1, fallback, colorMixQuery)
}
}
@@ -632,11 +655,15 @@ export function optimizeAst(
let fallbackAst = []
if (propertyFallbacksRoot.length > 0) {
- fallbackAst.push(rule(':root, :host', propertyFallbacksRoot))
+ let wrapper = rule(':root, :host', propertyFallbacksRoot)
+ wrapper.src = propertyFallbacksRoot[0].src
+ fallbackAst.push(wrapper)
}
if (propertyFallbacksUniversal.length > 0) {
- fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
+ let wrapper = rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal)
+ wrapper.src = propertyFallbacksUniversal[0].src
+ fallbackAst.push(wrapper)
}
if (fallbackAst.length > 0) {
@@ -658,30 +685,43 @@ export function optimizeAst(
return true
})
+ let layerPropertiesStatement = atRule('@layer', 'properties', [])
+ layerPropertiesStatement.src = fallbackAst[0].src
+
newAst.splice(
firstValidNodeIndex < 0 ? newAst.length : firstValidNodeIndex,
0,
- atRule('@layer', 'properties', []),
+ layerPropertiesStatement,
)
- newAst.push(
- rule('@layer properties', [
- atRule(
- '@supports',
- // We can't write a supports query for `@property` directly so we have to test for
- // features that are added around the same time in Mozilla and Safari.
- '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
- fallbackAst,
- ),
- ]),
- )
+ let block = rule('@layer properties', [
+ atRule(
+ '@supports',
+ // We can't write a supports query for `@property` directly so we have to test for
+ // features that are added around the same time in Mozilla and Safari.
+ '((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b))))',
+ fallbackAst,
+ ),
+ ])
+
+ block.src = fallbackAst[0].src
+ block.nodes[0].src = fallbackAst[0].src
+
+ newAst.push(block)
}
}
return newAst
}
-export function toCss(ast: AstNode[]) {
+export function toCss(ast: AstNode[], track?: boolean) {
+ let pos = 0
+
+ let source: Source = {
+ file: null,
+ code: '',
+ }
+
function stringify(node: AstNode, depth = 0): string {
let css = ''
let indent = ' '.repeat(depth)
@@ -689,15 +729,70 @@ export function toCss(ast: AstNode[]) {
// Declaration
if (node.kind === 'declaration') {
css += `${indent}${node.property}: ${node.value}${node.important ? ' !important' : ''};\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // node.property
+ let start = pos
+ pos += node.property.length
+
+ // `: `
+ pos += 2
+
+ // node.value
+ pos += node.value?.length ?? 0
+
+ // !important
+ if (node.important) {
+ pos += 11
+ }
+
+ let end = pos
+
+ // `;\n`
+ pos += 2
+
+ node.dst = [source, start, end]
+ }
}
// Rule
else if (node.kind === 'rule') {
css += `${indent}${node.selector} {\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // node.selector
+ let start = pos
+ pos += node.selector.length
+
+ // ` `
+ pos += 1
+
+ let end = pos
+ node.dst = [source, start, end]
+
+ // `{\n`
+ pos += 2
+ }
+
for (let child of node.nodes) {
css += stringify(child, depth + 1)
}
+
css += `${indent}}\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // `}\n`
+ pos += 2
+ }
}
// AtRule
@@ -710,22 +805,97 @@ export function toCss(ast: AstNode[]) {
// @layer base, components, utilities;
// ```
if (node.nodes.length === 0) {
- return `${indent}${node.name} ${node.params};\n`
+ let css = `${indent}${node.name} ${node.params};\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // node.name
+ let start = pos
+ pos += node.name.length
+
+ // ` `
+ pos += 1
+
+ // node.params
+ pos += node.params.length
+ let end = pos
+
+ // `;\n`
+ pos += 2
+
+ node.dst = [source, start, end]
+ }
+
+ return css
}
css += `${indent}${node.name}${node.params ? ` ${node.params} ` : ' '}{\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // node.name
+ let start = pos
+ pos += node.name.length
+
+ if (node.params) {
+ // ` `
+ pos += 1
+
+ // node.params
+ pos += node.params.length
+ }
+
+ // ` `
+ pos += 1
+
+ let end = pos
+ node.dst = [source, start, end]
+
+ // `{\n`
+ pos += 2
+ }
+
for (let child of node.nodes) {
css += stringify(child, depth + 1)
}
+
css += `${indent}}\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // `}\n`
+ pos += 2
+ }
}
// Comment
else if (node.kind === 'comment') {
css += `${indent}/*${node.value}*/\n`
+
+ if (track) {
+ // indent
+ pos += indent.length
+
+ // The comment itself. We do this instead of just the inside because
+ // it seems more useful to have the entire comment span tracked.
+ let start = pos
+ pos += 2 + node.value.length + 2
+ let end = pos
+
+ node.dst = [source, start, end]
+
+ // `\n`
+ pos += 1
+ }
}
- // These should've been handled already by `prepareAstForPrinting` which
+ // These should've been handled already by `optimizeAst` which
// means we can safely ignore them here. We return an empty string
// immediately to signal that something went wrong.
else if (node.kind === 'context' || node.kind === 'at-root') {
@@ -743,12 +913,11 @@ export function toCss(ast: AstNode[]) {
let css = ''
for (let node of ast) {
- let result = stringify(node)
- if (result !== '') {
- css += result
- }
+ css += stringify(node, 0)
}
+ source.code = css
+
return css
}
diff --git a/packages/tailwindcss/src/at-import.ts b/packages/tailwindcss/src/at-import.ts
index effd33e5b203..5f13cce99c51 100644
--- a/packages/tailwindcss/src/at-import.ts
+++ b/packages/tailwindcss/src/at-import.ts
@@ -3,13 +3,21 @@ import { atRule, context, walk, WalkAction, type AstNode } from './ast'
import * as CSS from './css-parser'
import * as ValueParser from './value-parser'
-type LoadStylesheet = (id: string, basedir: string) => Promise<{ base: string; content: string }>
+type LoadStylesheet = (
+ id: string,
+ basedir: string,
+) => Promise<{
+ path: string
+ base: string
+ content: string
+}>
export async function substituteAtImports(
ast: AstNode[],
base: string,
loadStylesheet: LoadStylesheet,
recurseCount = 0,
+ track = false,
) {
let features = Features.None
let promises: Promise[] = []
@@ -45,10 +53,11 @@ export async function substituteAtImports(
}
let loaded = await loadStylesheet(uri, base)
- let ast = CSS.parse(loaded.content)
- await substituteAtImports(ast, loaded.base, loadStylesheet, recurseCount + 1)
+ let ast = CSS.parse(loaded.content, { from: track ? loaded.path : undefined })
+ await substituteAtImports(ast, loaded.base, loadStylesheet, recurseCount + 1, track)
contextNode.nodes = buildImportNodes(
+ node,
[context({ base: loaded.base }, ast)],
layer,
media,
@@ -140,6 +149,7 @@ export function parseImportParams(params: ValueParser.ValueAstNode[]) {
}
function buildImportNodes(
+ importNode: AstNode,
importedAst: AstNode[],
layer: string | null,
media: string | null,
@@ -148,15 +158,21 @@ function buildImportNodes(
let root = importedAst
if (layer !== null) {
- root = [atRule('@layer', layer, root)]
+ let node = atRule('@layer', layer, root)
+ node.src = importNode.src
+ root = [node]
}
if (media !== null) {
- root = [atRule('@media', media, root)]
+ let node = atRule('@media', media, root)
+ node.src = importNode.src
+ root = [node]
}
if (supports !== null) {
- root = [atRule('@supports', supports[0] === '(' ? supports : `(${supports})`, root)]
+ let node = atRule('@supports', supports[0] === '(' ? supports : `(${supports})`, root)
+ node.src = importNode.src
+ root = [node]
}
return root
diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
index a781cdcb0c78..fb619561bc13 100644
--- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts
+++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts
@@ -30,7 +30,11 @@ export async function applyCompatibilityHooks({
path: string,
base: string,
resourceHint: 'plugin' | 'config',
- ) => Promise<{ module: any; base: string }>
+ ) => Promise<{
+ path: string
+ base: string
+ module: any
+ }>
sources: { base: string; pattern: string; negated: boolean }[]
}) {
let features = Features.None
diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
index 9e6c3b58a389..ea64fe3a1239 100644
--- a/packages/tailwindcss/src/compat/config.test.ts
+++ b/packages/tailwindcss/src/compat/config.test.ts
@@ -1156,6 +1156,7 @@ test('utilities must be prefixed', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => ({
+ path: '',
base,
module: { prefix: 'tw' },
}),
@@ -1183,6 +1184,7 @@ test('utilities must be prefixed', async () => {
// Non-prefixed utilities are ignored
compiler = await compile(input, {
loadModule: async (id, base) => ({
+ path: '',
base,
module: { prefix: 'tw' },
}),
@@ -1202,6 +1204,7 @@ test('utilities used in @apply must be prefixed', async () => {
`,
{
loadModule: async (id, base) => ({
+ path: '',
base,
module: { prefix: 'tw' },
}),
@@ -1228,6 +1231,7 @@ test('utilities used in @apply must be prefixed', async () => {
`,
{
loadModule: async (id, base) => ({
+ path: '',
base,
module: { prefix: 'tw' },
}),
@@ -1258,6 +1262,7 @@ test('Prefixes configured in CSS take precedence over those defined in JS config
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: { prefix: 'tw' },
}
@@ -1282,6 +1287,7 @@ test('a prefix must be letters only', async () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: { prefix: '__' },
}
@@ -1305,6 +1311,7 @@ test('important: `#app`', async () => {
let compiler = await compile(input, {
loadModule: async (_, base) => ({
+ path: '',
base,
module: { important: '#app' },
}),
@@ -1342,6 +1349,7 @@ test('important: true', async () => {
let compiler = await compile(input, {
loadModule: async (_, base) => ({
+ path: '',
base,
module: { important: true },
}),
@@ -1378,6 +1386,7 @@ test('blocklisted candidates are not generated', async () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: {
blocklist: ['bg-white'],
@@ -1421,6 +1430,7 @@ test('blocklisted candidates cannot be used with `@apply`', async () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: {
blocklist: ['bg-white'],
@@ -1473,6 +1483,7 @@ test('old theme values are merged with their renamed counterparts in the CSS the
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: plugin(function ({ theme }) {
didCallPluginFn()
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index ca7d96dee648..465974679646 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -17,6 +17,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ addBase, theme }) {
@@ -80,6 +81,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(function ({ addUtilities, theme }) {
addUtilities({
@@ -116,6 +118,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -164,6 +167,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -211,6 +215,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -265,6 +270,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(function ({ addUtilities, theme }) {
addUtilities({
@@ -313,6 +319,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ addUtilities, theme }) {
@@ -398,6 +405,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -452,6 +460,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -499,6 +508,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(function ({ matchUtilities, theme }) {
matchUtilities(
@@ -557,6 +567,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -611,6 +622,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -660,6 +672,7 @@ describe('theme', async () => {
await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ theme }) {
@@ -695,6 +708,7 @@ describe('theme', async () => {
let { build } = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(function ({ matchUtilities, theme }) {
function utility(name: string, themeKey: string) {
@@ -942,6 +956,7 @@ describe('theme', async () => {
await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
({ theme }) => {
@@ -984,6 +999,7 @@ describe('theme', async () => {
await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(({ theme }) => {
fn(theme('transitionTimingFunction.DEFAULT'))
@@ -1015,6 +1031,7 @@ describe('theme', async () => {
await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(({ theme }) => {
fn(theme('color.red.100'))
@@ -1043,6 +1060,7 @@ describe('theme', async () => {
await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(({ theme }) => {
fn(theme('i.do.not.exist'))
@@ -1069,6 +1087,7 @@ describe('theme', async () => {
let { build } = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(({ addUtilities, matchUtilities }) => {
addUtilities({
@@ -1124,6 +1143,7 @@ describe('theme', async () => {
let { build } = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(function ({ matchUtilities }) {
function utility(name: string, themeKey: string) {
@@ -1342,6 +1362,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -1400,6 +1421,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(function ({ matchUtilities, theme }) {
matchUtilities(
@@ -1446,6 +1468,7 @@ describe('theme', async () => {
let compiler = await compile(input, {
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: plugin(
function ({ matchUtilities, theme }) {
@@ -1493,6 +1516,7 @@ describe('addBase', () => {
loadModule: async (id, base) => {
if (id === 'inside') {
return {
+ path: '',
base,
module: plugin(function ({ addBase }) {
addBase({ inside: { color: 'red' } })
@@ -1500,6 +1524,7 @@ describe('addBase', () => {
}
}
return {
+ path: '',
base,
module: plugin(function ({ addBase }) {
addBase({ outside: { color: 'red' } })
@@ -1508,10 +1533,11 @@ describe('addBase', () => {
},
async loadStylesheet() {
return {
+ path: '',
+ base: '',
content: css`
@plugin "inside";
`,
- base: '',
}
},
})
@@ -1533,6 +1559,8 @@ describe('addBase', () => {
let compiler = await compile(input, {
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: plugin(function ({ addBase }) {
addBase({
':root': {
@@ -1542,7 +1570,6 @@ describe('addBase', () => {
},
})
}),
- base: '/root',
}),
})
@@ -1571,6 +1598,7 @@ describe('addVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', '&:hover, &:focus')
@@ -1605,6 +1633,7 @@ describe('addVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', ['&:hover', '&:focus'])
@@ -1640,6 +1669,7 @@ describe('addVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', {
@@ -1677,6 +1707,7 @@ describe('addVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', {
@@ -1728,6 +1759,7 @@ describe('addVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ addVariant }: PluginAPI) => {
addVariant(
@@ -1769,6 +1801,7 @@ describe('addVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', {
@@ -1811,6 +1844,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('potato', (flavor) => `.potato-${flavor} &`)
@@ -1845,6 +1879,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('potato', (flavor) => `@media (potato: ${flavor})`)
@@ -1883,6 +1918,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant(
@@ -1929,6 +1965,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('tooltip', (side) => `&${side}`, {
@@ -1968,6 +2005,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('alphabet', (side) => `&${side}`, {
@@ -2010,6 +2048,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('test', (selector) =>
@@ -2042,6 +2081,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2094,6 +2134,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2149,6 +2190,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2221,6 +2263,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2275,6 +2318,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2347,6 +2391,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2415,6 +2460,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('testmin', (value) => `@media (min-width: ${value})`, {
@@ -2495,6 +2541,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('foo', (value) => `.foo${value} &`, {
@@ -2529,6 +2576,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('foo', (value) => `.foo${value} &`)
@@ -2553,6 +2601,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('foo', (value) => `.foo${value === null ? '-good' : '-bad'} &`, {
@@ -2585,6 +2634,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('foo', (value) => `.foo${value === undefined ? '-good' : '-bad'} &`, {
@@ -2615,6 +2665,7 @@ describe('matchVariant', () => {
{
loadModule: async (id, base) => {
return {
+ path: '',
base,
module: ({ matchVariant }: PluginAPI) => {
matchVariant('my-container', (value, { modifier }) => {
@@ -2669,6 +2720,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -2710,6 +2762,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities([
@@ -2743,6 +2796,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities([
@@ -2782,6 +2836,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities([
@@ -2816,6 +2871,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -2857,6 +2913,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -2913,6 +2970,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -2942,6 +3000,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -2985,6 +3044,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -3026,6 +3086,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -3122,6 +3183,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -3175,6 +3237,7 @@ describe('addUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addUtilities }: PluginAPI) => {
addUtilities({
@@ -3240,6 +3303,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3320,6 +3384,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3361,6 +3426,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3410,6 +3476,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3480,6 +3547,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3554,6 +3622,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3609,6 +3678,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3647,6 +3717,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3691,6 +3762,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3818,6 +3890,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3903,6 +3976,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -3961,6 +4035,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -4028,6 +4103,7 @@ describe('matchUtilities()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities({
@@ -4056,6 +4132,7 @@ describe('matchUtilities()', () => {
{
async loadModule(base) {
return {
+ path: '',
base,
module: ({ matchUtilities }: PluginAPI) => {
matchUtilities(
@@ -4122,6 +4199,7 @@ describe('addComponents()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ addComponents }: PluginAPI) => {
addComponents({
@@ -4190,6 +4268,7 @@ describe('matchComponents()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ matchComponents }: PluginAPI) => {
matchComponents(
@@ -4235,6 +4314,7 @@ describe('prefix()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ prefix }: PluginAPI) => {
fn(prefix('btn'))
@@ -4258,6 +4338,7 @@ describe('config()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ config }: PluginAPI) => {
fn(config())
@@ -4285,6 +4366,7 @@ describe('config()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ config }: PluginAPI) => {
fn(config('theme'))
@@ -4310,6 +4392,7 @@ describe('config()', () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: ({ config }: PluginAPI) => {
fn(config('somekey', 'defaultvalue'))
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index f63682f63e01..9c7502b8d4e5 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -412,8 +412,9 @@ describe('--theme(…)', () => {
[],
{
loadModule: async () => ({
- module: () => {},
+ path: '',
base: '/root',
+ module: () => {},
}),
},
),
@@ -771,7 +772,11 @@ describe('theme(…)', () => {
}
`,
{
- loadModule: async () => ({ module: {}, base: '/root' }),
+ loadModule: async () => ({
+ path: '',
+ base: '/root',
+ module: {},
+ }),
},
)
@@ -1196,6 +1201,8 @@ describe('in plugins', () => {
{
async loadModule() {
return {
+ path: '',
+ base: '/root',
module: plugin(({ addBase, addUtilities }) => {
addBase({
'.my-base-rule': {
@@ -1212,7 +1219,6 @@ describe('in plugins', () => {
},
})
}),
- base: '/root',
}
},
},
@@ -1253,6 +1259,8 @@ describe('in JS config files', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: {
theme: {
extend: {
@@ -1279,7 +1287,6 @@ describe('in JS config files', () => {
}),
],
},
- base: '/root',
}),
},
)
@@ -1314,6 +1321,7 @@ test('replaces CSS theme() function with values inside imported stylesheets', as
{
async loadStylesheet() {
return {
+ path: '',
base: '/bar.css',
content: css`
.red {
diff --git a/packages/tailwindcss/src/css-parser.bench.ts b/packages/tailwindcss/src/css-parser.bench.ts
index ab490e103849..d48f88ab3841 100644
--- a/packages/tailwindcss/src/css-parser.bench.ts
+++ b/packages/tailwindcss/src/css-parser.bench.ts
@@ -10,3 +10,7 @@ const cssFile = readFileSync(currentFolder + './preflight.css', 'utf-8')
bench('css-parser on preflight.css', () => {
CSS.parse(cssFile)
})
+
+bench('CSS with sourcemaps', () => {
+ CSS.parse(cssFile, { from: 'input.css' })
+})
diff --git a/packages/tailwindcss/src/css-parser.test.ts b/packages/tailwindcss/src/css-parser.test.ts
index 379b4b942793..f7ee47a61145 100644
--- a/packages/tailwindcss/src/css-parser.test.ts
+++ b/packages/tailwindcss/src/css-parser.test.ts
@@ -86,7 +86,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
kind: 'comment',
value: `!
* License #2
- `,
+ `.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
},
])
})
@@ -368,7 +368,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
background-color: red;
/* A comment */
content: 'Hello, world!';
- }`,
+ }`.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
important: false,
},
])
@@ -396,7 +396,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
background-color: red;
/* A comment ; */
content: 'Hello, world!';
- }`,
+ }`.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
important: false,
},
{
@@ -406,7 +406,7 @@ describe.each(['Unix', 'Windows'])('Line endings: %s', (lineEndings) => {
background-color: red;
/* A comment } */
content: 'Hello, world!';
- }`,
+ }`.replaceAll(/\r?\n/g, lineEndings === 'Windows' ? '\r\n' : '\n'),
important: false,
},
])
diff --git a/packages/tailwindcss/src/css-parser.ts b/packages/tailwindcss/src/css-parser.ts
index df10fa850035..6a5ce83204bd 100644
--- a/packages/tailwindcss/src/css-parser.ts
+++ b/packages/tailwindcss/src/css-parser.ts
@@ -9,6 +9,7 @@ import {
type Declaration,
type Rule,
} from './ast'
+import type { Source } from './source-maps/source'
const BACKSLASH = 0x5c
const SLASH = 0x2f
@@ -18,6 +19,7 @@ const SINGLE_QUOTE = 0x27
const COLON = 0x3a
const SEMICOLON = 0x3b
const LINE_BREAK = 0x0a
+const CARRIAGE_RETURN = 0xd
const SPACE = 0x20
const TAB = 0x09
const OPEN_CURLY = 0x7b
@@ -30,9 +32,17 @@ const DASH = 0x2d
const AT_SIGN = 0x40
const EXCLAMATION_MARK = 0x21
-export function parse(input: string) {
- if (input[0] === '\uFEFF') input = input.slice(1)
- input = input.replaceAll('\r\n', '\n')
+export interface ParseOptions {
+ from?: string
+}
+
+export function parse(input: string, opts?: ParseOptions) {
+ let source: Source | null = opts?.from ? { file: opts.from, code: input } : null
+
+ // Note: it is important that any transformations of the input string
+ // *before* processing do NOT change the length of the string. This
+ // would invalidate the mechanism used to track source locations.
+ if (input[0] === '\uFEFF') input = ' ' + input.slice(1)
let ast: AstNode[] = []
let licenseComments: Comment[] = []
@@ -45,11 +55,22 @@ export function parse(input: string) {
let buffer = ''
let closingBracketStack = ''
+ // The start of the first non-whitespace character in the buffer
+ let bufferStart = 0
+
let peekChar
for (let i = 0; i < input.length; i++) {
let currentChar = input.charCodeAt(i)
+ // Skip over the CR in CRLF. This allows code below to only check for a line
+ // break even if we're looking at a Windows newline. Peeking the input still
+ // has to check for CRLF but that happens less often.
+ if (currentChar === CARRIAGE_RETURN) {
+ peekChar = input.charCodeAt(i + 1)
+ if (peekChar === LINE_BREAK) continue
+ }
+
// Current character is a `\` therefore the next character is escaped,
// consume it together with the next character and continue.
//
@@ -61,6 +82,7 @@ export function parse(input: string) {
// ```
//
if (currentChar === BACKSLASH) {
+ if (buffer === '') bufferStart = i
buffer += input.slice(i, i + 2)
i += 1
}
@@ -104,7 +126,13 @@ export function parse(input: string) {
// Collect all license comments so that we can hoist them to the top of
// the AST.
if (commentString.charCodeAt(2) === EXCLAMATION_MARK) {
- licenseComments.push(comment(commentString.slice(2, -2)))
+ let node = comment(commentString.slice(2, -2))
+ licenseComments.push(node)
+
+ if (source) {
+ node.src = [source, start, i + 1]
+ node.dst = [source, start, i + 1]
+ }
}
}
@@ -146,7 +174,11 @@ export function parse(input: string) {
// ^ Missing "
// }
// ```
- else if (peekChar === SEMICOLON && input.charCodeAt(j + 1) === LINE_BREAK) {
+ else if (
+ peekChar === SEMICOLON &&
+ (input.charCodeAt(j + 1) === LINE_BREAK ||
+ (input.charCodeAt(j + 1) === CARRIAGE_RETURN && input.charCodeAt(j + 2) === LINE_BREAK))
+ ) {
throw new Error(
`Unterminated string: ${input.slice(start, j + 1) + String.fromCharCode(currentChar)}`,
)
@@ -162,7 +194,10 @@ export function parse(input: string) {
// ^ Missing "
// }
// ```
- else if (peekChar === LINE_BREAK) {
+ else if (
+ peekChar === LINE_BREAK ||
+ (peekChar === CARRIAGE_RETURN && input.charCodeAt(j + 1) === LINE_BREAK)
+ ) {
throw new Error(
`Unterminated string: ${input.slice(start, j) + String.fromCharCode(currentChar)}`,
)
@@ -178,7 +213,12 @@ export function parse(input: string) {
else if (
(currentChar === SPACE || currentChar === LINE_BREAK || currentChar === TAB) &&
(peekChar = input.charCodeAt(i + 1)) &&
- (peekChar === SPACE || peekChar === LINE_BREAK || peekChar === TAB)
+ (peekChar === SPACE ||
+ peekChar === LINE_BREAK ||
+ peekChar === TAB ||
+ (peekChar === CARRIAGE_RETURN &&
+ (peekChar = input.charCodeAt(i + 2)) &&
+ peekChar == LINE_BREAK))
) {
continue
}
@@ -289,6 +329,11 @@ export function parse(input: string) {
let declaration = parseDeclaration(buffer, colonIdx)
if (!declaration) throw new Error(`Invalid custom property, expected a value`)
+ if (source) {
+ declaration.src = [source, start, i]
+ declaration.dst = [source, start, i]
+ }
+
if (parent) {
parent.nodes.push(declaration)
} else {
@@ -309,6 +354,11 @@ export function parse(input: string) {
else if (currentChar === SEMICOLON && buffer.charCodeAt(0) === AT_SIGN) {
node = parseAtRule(buffer)
+ if (source) {
+ node.src = [source, bufferStart, i]
+ node.dst = [source, bufferStart, i]
+ }
+
// At-rule is nested inside of a rule, attach it to the parent.
if (parent) {
parent.nodes.push(node)
@@ -345,6 +395,11 @@ export function parse(input: string) {
throw new Error(`Invalid declaration: \`${buffer.trim()}\``)
}
+ if (source) {
+ declaration.src = [source, bufferStart, i]
+ declaration.dst = [source, bufferStart, i]
+ }
+
if (parent) {
parent.nodes.push(declaration)
} else {
@@ -364,6 +419,12 @@ export function parse(input: string) {
// At this point `buffer` should resemble a selector or an at-rule.
node = rule(buffer.trim())
+ // Track the source location for source maps
+ if (source) {
+ node.src = [source, bufferStart, i]
+ node.dst = [source, bufferStart, i]
+ }
+
// Attach the rule to the parent in case it's nested.
if (parent) {
parent.nodes.push(node)
@@ -410,6 +471,12 @@ export function parse(input: string) {
if (buffer.charCodeAt(0) === AT_SIGN) {
node = parseAtRule(buffer)
+ // Track the source location for source maps
+ if (source) {
+ node.src = [source, bufferStart, i]
+ node.dst = [source, bufferStart, i]
+ }
+
// At-rule is nested inside of a rule, attach it to the parent.
if (parent) {
parent.nodes.push(node)
@@ -446,6 +513,11 @@ export function parse(input: string) {
let node = parseDeclaration(buffer, colonIdx)
if (!node) throw new Error(`Invalid declaration: \`${buffer.trim()}\``)
+ if (source) {
+ node.src = [source, bufferStart, i]
+ node.dst = [source, bufferStart, i]
+ }
+
parent.nodes.push(node)
}
}
@@ -495,6 +567,8 @@ export function parse(input: string) {
continue
}
+ if (buffer === '') bufferStart = i
+
buffer += String.fromCharCode(currentChar)
}
}
@@ -503,7 +577,15 @@ export function parse(input: string) {
// means that we have an at-rule that is not terminated with a semicolon at
// the end of the input.
if (buffer.charCodeAt(0) === AT_SIGN) {
- ast.push(parseAtRule(buffer))
+ let node = parseAtRule(buffer)
+
+ // Track the source location for source maps
+ if (source) {
+ node.src = [source, bufferStart, input.length]
+ node.dst = [source, bufferStart, input.length]
+ }
+
+ ast.push(node)
}
// When we are done parsing then everything should be balanced. If we still
@@ -525,6 +607,9 @@ export function parse(input: string) {
}
export function parseAtRule(buffer: string, nodes: AstNode[] = []): AtRule {
+ let name = buffer
+ let params = ''
+
// Assumption: The smallest at-rule in CSS right now is `@page`, this means
// that we can always skip the first 5 characters and start at the
// sixth (at index 5).
@@ -545,13 +630,13 @@ export function parseAtRule(buffer: string, nodes: AstNode[] = []): AtRule {
for (let i = 5 /* '@page'.length */; i < buffer.length; i++) {
let currentChar = buffer.charCodeAt(i)
if (currentChar === SPACE || currentChar === OPEN_PAREN) {
- let name = buffer.slice(0, i).trim()
- let params = buffer.slice(i).trim()
- return atRule(name, params, nodes)
+ name = buffer.slice(0, i)
+ params = buffer.slice(i)
+ break
}
}
- return atRule(buffer.trim(), '', nodes)
+ return atRule(name.trim(), params.trim(), nodes)
}
function parseDeclaration(
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 9c3fd47ed5c6..4eb7a59f0db6 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -126,11 +126,12 @@ describe('compiling CSS', () => {
{
async loadStylesheet(id) {
return {
+ path: '',
+ base: '',
content: fs.readFileSync(
path.resolve(__dirname, '..', id === 'tailwindcss' ? 'index.css' : id),
'utf-8',
),
- base: '',
}
},
},
@@ -401,6 +402,7 @@ describe('@apply', () => {
{
async loadStylesheet() {
return {
+ path: '',
base: '/bar.css',
content: css`
.foo {
@@ -2398,6 +2400,8 @@ describe('Parsing theme values from CSS', () => {
{
async loadStylesheet() {
return {
+ path: '',
+ base: '',
content: css`
@theme {
--color-tomato: #e10c04;
@@ -2407,7 +2411,6 @@ describe('Parsing theme values from CSS', () => {
@tailwind utilities;
`,
- base: '',
}
},
},
@@ -2485,6 +2488,8 @@ describe('Parsing theme values from CSS', () => {
{
async loadStylesheet() {
return {
+ path: '',
+ base: '',
content: css`
@theme {
--color-tomato: #e10c04;
@@ -2494,7 +2499,6 @@ describe('Parsing theme values from CSS', () => {
@tailwind utilities;
`,
- base: '',
}
},
},
@@ -2782,6 +2786,8 @@ describe('Parsing theme values from CSS', () => {
{
loadModule: async () => {
return {
+ path: '',
+ base: '/root',
module: plugin(({}) => {}, {
theme: {
extend: {
@@ -2792,7 +2798,6 @@ describe('Parsing theme values from CSS', () => {
},
},
}),
- base: '/root',
}
},
},
@@ -2828,6 +2833,8 @@ describe('Parsing theme values from CSS', () => {
{
loadModule: async () => {
return {
+ path: '',
+ base: '/root',
module: {
theme: {
extend: {
@@ -2838,7 +2845,6 @@ describe('Parsing theme values from CSS', () => {
},
},
},
- base: '/root',
}
},
},
@@ -2917,10 +2923,11 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', '&:hover, &:focus')
},
- base: '/root',
}),
},
),
@@ -2935,10 +2942,11 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', '&:hover, &:focus')
},
- base: '/root',
}),
},
),
@@ -2955,10 +2963,11 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', '&:hover, &:focus')
},
- base: '/root',
}),
},
),
@@ -2977,6 +2986,8 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: plugin.withOptions((options) => {
expect(options).toEqual({
color: 'red',
@@ -2990,7 +3001,6 @@ describe('plugins', () => {
})
}
}),
- base: '/root',
}),
},
)
@@ -3029,6 +3039,8 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: plugin.withOptions((options) => {
expect(options).toEqual({
'is-null': null,
@@ -3049,7 +3061,6 @@ describe('plugins', () => {
return () => {}
}),
- base: '/root',
}),
},
)
@@ -3069,6 +3080,8 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: plugin.withOptions((options) => {
return ({ addUtilities }) => {
addUtilities({
@@ -3078,7 +3091,6 @@ describe('plugins', () => {
})
}
}),
- base: '/root',
}),
},
),
@@ -3107,6 +3119,8 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: plugin(({ addUtilities }) => {
addUtilities({
'.text-primary': {
@@ -3114,7 +3128,6 @@ describe('plugins', () => {
},
})
}),
- base: '/root',
}),
},
),
@@ -3132,7 +3145,11 @@ describe('plugins', () => {
}
`,
{
- loadModule: async () => ({ module: plugin(() => {}), base: '/root' }),
+ loadModule: async () => ({
+ path: '',
+ base: '/root',
+ module: plugin(() => {}),
+ }),
},
),
).rejects.toThrowErrorMatchingInlineSnapshot(
@@ -3153,7 +3170,11 @@ describe('plugins', () => {
}
`,
{
- loadModule: async () => ({ module: plugin(() => {}), base: '/root' }),
+ loadModule: async () => ({
+ path: '',
+ base: '/root',
+ module: plugin(() => {}),
+ }),
},
),
).rejects.toThrowErrorMatchingInlineSnapshot(`
@@ -3177,10 +3198,11 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', '&:hover, &:focus')
},
- base: '/root',
}),
},
)
@@ -3209,10 +3231,11 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', ['&:hover', '&:focus'])
},
- base: '/root',
}),
},
)
@@ -3242,13 +3265,14 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', {
'&:hover': '@slot',
'&:focus': '@slot',
})
},
- base: '/root',
}),
},
)
@@ -3277,6 +3301,8 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', {
'@media (hover: hover)': {
@@ -3285,7 +3311,6 @@ describe('plugins', () => {
'&:focus': '@slot',
})
},
- base: '/root',
}),
},
)
@@ -3326,6 +3351,8 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('hocus', {
'&': {
@@ -3335,7 +3362,6 @@ describe('plugins', () => {
},
})
},
- base: '/root',
}),
},
)
@@ -3364,10 +3390,11 @@ describe('plugins', () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addVariant }: PluginAPI) => {
addVariant('dark', '&:is([data-theme=dark] *)')
},
- base: '/root',
}),
},
)
@@ -4220,6 +4247,8 @@ test('addBase', async () => {
`,
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({ addBase }: PluginAPI) => {
addBase({
body: {
@@ -4227,7 +4256,6 @@ test('addBase', async () => {
},
})
},
- base: '/root',
}),
},
)
@@ -4259,6 +4287,7 @@ it("should error when `layer(…)` is used, but it's not the first param", async
{
async loadStylesheet() {
return {
+ path: '',
base: '/bar.css',
content: css`
.foo {
@@ -4279,6 +4308,8 @@ describe('`@reference "…" imports`', () => {
let loadStylesheet = async (id: string, base: string) => {
if (id === './foo/baz.css') {
return {
+ path: '',
+ base: '/root/foo',
content: css`
.foo {
color: red;
@@ -4291,14 +4322,14 @@ describe('`@reference "…" imports`', () => {
}
@custom-variant hocus (&:hover, &:focus);
`,
- base: '/root/foo',
}
}
return {
+ path: '',
+ base: '/root/foo',
content: css`
@import './foo/baz.css';
`,
- base: '/root/foo',
}
}
@@ -4327,19 +4358,21 @@ describe('`@reference "…" imports`', () => {
let loadStylesheet = async (id: string, base: string) => {
if (id === './foo/baz.css') {
return {
+ path: '',
+ base: '/root/foo',
content: css`
@layer utilities {
@tailwind utilities;
}
`,
- base: '/root/foo',
}
}
return {
+ path: '',
+ base: '/root/foo',
content: css`
@import './foo/baz.css';
`,
- base: '/root/foo',
}
}
@@ -4389,6 +4422,8 @@ describe('`@reference "…" imports`', () => {
['animate-spin', 'match-utility-initial', 'match-components-initial'],
{
loadModule: async () => ({
+ path: '',
+ base: '/root',
module: ({
addBase,
addUtilities,
@@ -4422,7 +4457,6 @@ describe('`@reference "…" imports`', () => {
{ values: { initial: 'initial' } },
)
},
- base: '/root',
}),
},
),
@@ -4444,22 +4478,26 @@ describe('`@reference "…" imports`', () => {
switch (id) {
case './one.css': {
return {
+ path: '',
+ base: '/root',
content: css`
@import './two.css' layer(two);
`,
- base: '/root',
}
}
case './two.css': {
return {
+ path: '',
+ base: '/root',
content: css`
@import './three.css' layer(three);
`,
- base: '/root',
}
}
case './three.css': {
return {
+ path: '',
+ base: '/root',
content: css`
.foo {
color: red;
@@ -4478,10 +4516,11 @@ describe('`@reference "…" imports`', () => {
}
}
`,
- base: '/root',
}
}
}
+
+ throw new Error('unreachable')
}
await expect(
@@ -4516,6 +4555,8 @@ describe('`@reference "…" imports`', () => {
test('supports `@import "…" reference` syntax', async () => {
let loadStylesheet = async () => {
return {
+ path: '',
+ base: '/root/foo',
content: css`
.foo {
color: red;
@@ -4528,7 +4569,6 @@ describe('`@reference "…" imports`', () => {
}
@custom-variant hocus (&:hover, &:focus);
`,
- base: '/root/foo',
}
}
diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts
index e8f34e366327..6e493c3689d0 100644
--- a/packages/tailwindcss/src/index.ts
+++ b/packages/tailwindcss/src/index.ts
@@ -26,6 +26,7 @@ import { applyVariant, compileCandidates } from './compile'
import { substituteFunctions } from './css-functions'
import * as CSS from './css-parser'
import { buildDesignSystem, type DesignSystem } from './design-system'
+import { createSourceMap, type DecodedSourceMap } from './source-maps/source-map'
import { Theme, ThemeOptions } from './theme'
import { createCssUtility } from './utilities'
import { expand } from './utils/brace-expansion'
@@ -51,13 +52,25 @@ export const enum Polyfills {
type CompileOptions = {
base?: string
+ from?: string
polyfills?: Polyfills
loadModule?: (
id: string,
base: string,
resourceHint: 'plugin' | 'config',
- ) => Promise<{ module: Plugin | Config; base: string }>
- loadStylesheet?: (id: string, base: string) => Promise<{ content: string; base: string }>
+ ) => Promise<{
+ path: string
+ base: string
+ module: Plugin | Config
+ }>
+ loadStylesheet?: (
+ id: string,
+ base: string,
+ ) => Promise<{
+ path: string
+ base: string
+ content: string
+ }>
}
function throwOnLoadModule(): never {
@@ -125,6 +138,7 @@ async function parseCss(
ast: AstNode[],
{
base = '',
+ from,
loadModule = throwOnLoadModule,
loadStylesheet = throwOnLoadStylesheet,
}: CompileOptions = {},
@@ -132,7 +146,7 @@ async function parseCss(
let features = Features.None
ast = [contextNode({ base }, ast)] as AstNode[]
- features |= await substituteAtImports(ast, base, loadStylesheet)
+ features |= await substituteAtImports(ast, base, loadStylesheet, 0, from !== undefined)
let important = null as boolean | null
let theme = new Theme()
@@ -528,7 +542,7 @@ async function parseCss(
if (child.kind === 'comment') return
if (child.kind === 'declaration' && child.property.startsWith('--')) {
- theme.add(unescape(child.property), child.value ?? '', themeOptions)
+ theme.add(unescape(child.property), child.value ?? '', themeOptions, child.src)
return
}
@@ -546,6 +560,7 @@ async function parseCss(
// theme later, and delete any other `@theme` rules.
if (!firstThemeRule) {
firstThemeRule = styleRule(':root, :host', [])
+ firstThemeRule.src = node.src
replaceWith([firstThemeRule])
} else {
replaceWith([])
@@ -593,8 +608,9 @@ async function parseCss(
for (let [key, value] of designSystem.theme.entries()) {
if (value.options & ThemeOptions.REFERENCE) continue
-
- nodes.push(decl(escape(key), value.value))
+ let node = decl(escape(key), value.value)
+ node.src = value.src
+ nodes.push(node)
}
let keyframesRules = designSystem.theme.getKeyframes()
@@ -748,6 +764,16 @@ export async function compileAst(
onInvalidCandidate,
}).astNodes
+ if (opts.from) {
+ walk(newNodes, (node) => {
+ // We do this conditionally to preserve source locations from both
+ // `@utility` and `@custom-variant`. Even though generated nodes are
+ // cached this should be fine because `utilitiesNode.src` should not
+ // change without a full rebuild which destroys the cache.
+ node.src ??= utilitiesNode.src
+ })
+ }
+
// If no new ast nodes were generated, then we can return the original
// CSS. This currently assumes that we only add new ast nodes and never
// remove any.
@@ -766,6 +792,8 @@ export async function compileAst(
}
}
+export type { DecodedSourceMap }
+
export async function compile(
css: string,
opts: CompileOptions = {},
@@ -774,8 +802,9 @@ export async function compile(
root: Root
features: Features
build(candidates: string[]): string
+ buildSourceMap(): DecodedSourceMap
}> {
- let ast = CSS.parse(css)
+ let ast = CSS.parse(css, { from: opts.from })
let api = await compileAst(ast, opts)
let compiledAst = ast
let compiledCss = css
@@ -789,11 +818,17 @@ export async function compile(
return compiledCss
}
- compiledCss = toCss(newAst)
+ compiledCss = toCss(newAst, !!opts.from)
compiledAst = newAst
return compiledCss
},
+
+ buildSourceMap() {
+ return createSourceMap({
+ ast: compiledAst,
+ })
+ },
}
}
diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts
index 95d5d954d2ce..04a6ed7961b9 100644
--- a/packages/tailwindcss/src/intellisense.test.ts
+++ b/packages/tailwindcss/src/intellisense.test.ts
@@ -172,10 +172,12 @@ test('Utilities do not show wrapping selector in intellisense', async () => {
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
loadModule: async () => ({
+ path: '',
base: '',
module: {
important: '#app',
@@ -208,6 +210,7 @@ test('Utilities, when marked as important, show as important in intellisense', a
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
@@ -239,10 +242,12 @@ test('Static utilities from plugins are listed in hovers and completions', async
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
loadModule: async () => ({
+ path: '',
base: '',
module: plugin(({ addUtilities }) => {
addUtilities({
@@ -274,10 +279,12 @@ test('Functional utilities from plugins are listed in hovers and completions', a
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
loadModule: async () => ({
+ path: '',
base: '',
module: plugin(({ matchUtilities }) => {
matchUtilities(
@@ -420,10 +427,12 @@ test('Custom at-rule variants do not show up as a value under `group`', async ()
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
loadModule: async () => ({
+ path: '',
base: '',
module: plugin(({ addVariant }) => {
addVariant('variant-3', '@media baz')
@@ -510,6 +519,7 @@ test('Custom functional @utility', async () => {
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
@@ -587,6 +597,7 @@ test('Theme keys with underscores are suggested with underscores', async () => {
let design = await __unstable__loadDesignSystem(input, {
loadStylesheet: async (_, base) => ({
+ path: '',
base,
content: '@tailwind utilities;',
}),
diff --git a/packages/tailwindcss/src/prefix.test.ts b/packages/tailwindcss/src/prefix.test.ts
index 9556c34e3213..de426ab459fa 100644
--- a/packages/tailwindcss/src/prefix.test.ts
+++ b/packages/tailwindcss/src/prefix.test.ts
@@ -169,6 +169,7 @@ test('JS theme functions do not use the prefix', async () => {
{
async loadModule(id, base) {
return {
+ path: '',
base,
module: plugin(({ addUtilities, theme }) => {
addUtilities({
@@ -206,6 +207,7 @@ test('a prefix can be configured via @import theme(…)', async () => {
let compiler = await compile(input, {
async loadStylesheet(id, base) {
return {
+ path: '',
base,
content: css`
@theme {
@@ -250,6 +252,7 @@ test('a prefix can be configured via @import theme(…)', async () => {
compiler = await compile(input, {
async loadStylesheet(id, base) {
return {
+ path: '',
base,
content: css`
@theme {
@@ -275,6 +278,7 @@ test('a prefix can be configured via @import prefix(…)', async () => {
let compiler = await compile(input, {
async loadStylesheet(id, base) {
return {
+ path: '',
base,
content: css`
@theme {
@@ -314,6 +318,7 @@ test('a prefix can be configured via @import prefix(…)', async () => {
compiler = await compile(input, {
async loadStylesheet(id, base) {
return {
+ path: '',
base,
content: css`
@theme {
diff --git a/packages/tailwindcss/src/source-maps/line-table.bench.ts b/packages/tailwindcss/src/source-maps/line-table.bench.ts
new file mode 100644
index 000000000000..862e2d398297
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/line-table.bench.ts
@@ -0,0 +1,13 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { bench } from 'vitest'
+import { createLineTable } from './line-table'
+
+const currentFolder = fileURLToPath(new URL('..', import.meta.url))
+const cssFile = readFileSync(currentFolder + '../preflight.css', 'utf-8')
+const table = createLineTable(cssFile)
+
+bench('line table lookups', () => {
+ for (let i = 0; i < cssFile.length; ++i) table.find(i)
+})
diff --git a/packages/tailwindcss/src/source-maps/line-table.test.ts b/packages/tailwindcss/src/source-maps/line-table.test.ts
new file mode 100644
index 000000000000..23c46243b726
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/line-table.test.ts
@@ -0,0 +1,87 @@
+import dedent from 'dedent'
+import { expect, test } from 'vitest'
+import { createLineTable } from './line-table'
+
+const css = dedent
+
+test('line tables', () => {
+ let text = css`
+ .foo {
+ color: red;
+ }
+ `
+
+ let table = createLineTable(`${text}\n`)
+
+ // Line 1: `.foo {\n`
+ expect(table.find(0)).toEqual({ line: 1, column: 0 })
+ expect(table.find(1)).toEqual({ line: 1, column: 1 })
+ expect(table.find(2)).toEqual({ line: 1, column: 2 })
+ expect(table.find(3)).toEqual({ line: 1, column: 3 })
+ expect(table.find(4)).toEqual({ line: 1, column: 4 })
+ expect(table.find(5)).toEqual({ line: 1, column: 5 })
+ expect(table.find(6)).toEqual({ line: 1, column: 6 })
+
+ // Line 2: ` color: red;\n`
+ expect(table.find(6 + 1)).toEqual({ line: 2, column: 0 })
+ expect(table.find(6 + 2)).toEqual({ line: 2, column: 1 })
+ expect(table.find(6 + 3)).toEqual({ line: 2, column: 2 })
+ expect(table.find(6 + 4)).toEqual({ line: 2, column: 3 })
+ expect(table.find(6 + 5)).toEqual({ line: 2, column: 4 })
+ expect(table.find(6 + 6)).toEqual({ line: 2, column: 5 })
+ expect(table.find(6 + 7)).toEqual({ line: 2, column: 6 })
+ expect(table.find(6 + 8)).toEqual({ line: 2, column: 7 })
+ expect(table.find(6 + 9)).toEqual({ line: 2, column: 8 })
+ expect(table.find(6 + 10)).toEqual({ line: 2, column: 9 })
+ expect(table.find(6 + 11)).toEqual({ line: 2, column: 10 })
+ expect(table.find(6 + 12)).toEqual({ line: 2, column: 11 })
+ expect(table.find(6 + 13)).toEqual({ line: 2, column: 12 })
+
+ // Line 3: `}\n`
+ expect(table.find(20 + 1)).toEqual({ line: 3, column: 0 })
+ expect(table.find(20 + 2)).toEqual({ line: 3, column: 1 })
+
+ // After the new line
+ expect(table.find(22 + 1)).toEqual({ line: 4, column: 0 })
+})
+
+test('line tables findOffset', () => {
+ let text = css`
+ .foo {
+ color: red;
+ }
+ `
+
+ let table = createLineTable(`${text}\n`)
+
+ // Line 1: `.foo {\n`
+ expect(table.findOffset({ line: 1, column: 0 })).toEqual(0)
+ expect(table.findOffset({ line: 1, column: 1 })).toEqual(1)
+ expect(table.findOffset({ line: 1, column: 2 })).toEqual(2)
+ expect(table.findOffset({ line: 1, column: 3 })).toEqual(3)
+ expect(table.findOffset({ line: 1, column: 4 })).toEqual(4)
+ expect(table.findOffset({ line: 1, column: 5 })).toEqual(5)
+ expect(table.findOffset({ line: 1, column: 6 })).toEqual(6)
+
+ // Line 2: ` color: red;\n`
+ expect(table.findOffset({ line: 2, column: 0 })).toEqual(6 + 1)
+ expect(table.findOffset({ line: 2, column: 1 })).toEqual(6 + 2)
+ expect(table.findOffset({ line: 2, column: 2 })).toEqual(6 + 3)
+ expect(table.findOffset({ line: 2, column: 3 })).toEqual(6 + 4)
+ expect(table.findOffset({ line: 2, column: 4 })).toEqual(6 + 5)
+ expect(table.findOffset({ line: 2, column: 5 })).toEqual(6 + 6)
+ expect(table.findOffset({ line: 2, column: 6 })).toEqual(6 + 7)
+ expect(table.findOffset({ line: 2, column: 7 })).toEqual(6 + 8)
+ expect(table.findOffset({ line: 2, column: 8 })).toEqual(6 + 9)
+ expect(table.findOffset({ line: 2, column: 9 })).toEqual(6 + 10)
+ expect(table.findOffset({ line: 2, column: 10 })).toEqual(6 + 11)
+ expect(table.findOffset({ line: 2, column: 11 })).toEqual(6 + 12)
+ expect(table.findOffset({ line: 2, column: 12 })).toEqual(6 + 13)
+
+ // Line 3: `}\n`
+ expect(table.findOffset({ line: 3, column: 0 })).toEqual(20 + 1)
+ expect(table.findOffset({ line: 3, column: 1 })).toEqual(20 + 2)
+
+ // After the new line
+ expect(table.findOffset({ line: 4, column: 0 })).toEqual(22 + 1)
+})
diff --git a/packages/tailwindcss/src/source-maps/line-table.ts b/packages/tailwindcss/src/source-maps/line-table.ts
new file mode 100644
index 000000000000..e16051762786
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/line-table.ts
@@ -0,0 +1,100 @@
+/**
+ * Line offset tables are the key to generating our source maps. They allow us
+ * to store indexes with our AST nodes and later convert them into positions as
+ * when given the source that the indexes refer to.
+ */
+
+const LINE_BREAK = 0x0a
+
+/**
+ * A position in source code
+ *
+ * https://tc39.es/ecma426/#sec-position-record-type
+ */
+export interface Position {
+ /** The line number, one-based */
+ line: number
+
+ /** The column/character number, one-based */
+ column: number
+}
+
+/**
+ * A table that lets you turn an offset into a line number and column
+ */
+export interface LineTable {
+ /**
+ * Find the line/column position in the source code for a given offset
+ *
+ * Searching for a given offset takes O(log N) time where N is the number of
+ * lines of code.
+ *
+ * @param offset The index for which to find the position
+ */
+ find(offset: number): Position
+
+ /**
+ * Find the most likely byte offset for given a position
+ *
+ * @param offset The position for which to find the byte offset
+ */
+ findOffset(pos: Position): number
+}
+
+/**
+ * Compute a lookup table to allow for efficient line/column lookups based on
+ * offsets in the source code.
+ *
+ * Creating this table is an O(N) operation where N is the length of the source
+ */
+export function createLineTable(source: string): LineTable {
+ let table: number[] = [0]
+
+ // Compute the offsets for the start of each line
+ for (let i = 0; i < source.length; i++) {
+ if (source.charCodeAt(i) === LINE_BREAK) {
+ table.push(i + 1)
+ }
+ }
+
+ function find(offset: number) {
+ // Based on esbuild's binary search for line numbers
+ let line = 0
+ let count = table.length
+ while (count > 0) {
+ // `| 0` improves performance (in V8 at least)
+ let mid = (count | 0) >> 1
+ let i = line + mid
+ if (table[i] <= offset) {
+ line = i + 1
+ count = count - mid - 1
+ } else {
+ count = mid
+ }
+ }
+
+ line -= 1
+
+ let column = offset - table[line]
+
+ return {
+ line: line + 1,
+ column: column,
+ }
+ }
+
+ function findOffset({ line, column }: Position) {
+ line -= 1
+ line = Math.min(Math.max(line, 0), table.length - 1)
+
+ let offsetA = table[line]
+ let offsetB = table[line + 1] ?? offsetA
+
+ return Math.min(Math.max(offsetA + column, 0), offsetB)
+ }
+
+ return {
+ find,
+ findOffset,
+ }
+}
diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts
new file mode 100644
index 000000000000..0f5ec5483827
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/source-map.test.ts
@@ -0,0 +1,421 @@
+import remapping from '@ampproject/remapping'
+import dedent from 'dedent'
+import MagicString from 'magic-string'
+import * as fs from 'node:fs/promises'
+import * as path from 'node:path'
+import { SourceMapConsumer, SourceMapGenerator, type RawSourceMap } from 'source-map-js'
+import { test } from 'vitest'
+import { compile } from '..'
+import createPlugin from '../plugin'
+import { DefaultMap } from '../utils/default-map'
+import type { DecodedSource, DecodedSourceMap } from './source-map'
+const css = dedent
+
+interface RunOptions {
+ input: string
+ candidates?: string[]
+ options?: Parameters[1]
+}
+
+async function run({ input, candidates, options }: RunOptions) {
+ let source = new MagicString(input)
+ let root = path.resolve(__dirname, '../..')
+
+ let compiler = await compile(source.toString(), {
+ from: 'input.css',
+ async loadStylesheet(id, base) {
+ let resolvedPath = path.resolve(root, id === 'tailwindcss' ? 'index.css' : id)
+
+ return {
+ path: path.relative(root, resolvedPath),
+ base,
+ content: await fs.readFile(resolvedPath, 'utf-8'),
+ }
+ },
+ ...options,
+ })
+
+ let css = compiler.build(candidates ?? [])
+ let decoded = compiler.buildSourceMap()
+ let rawMap = toRawSourceMap(decoded)
+ let combined = remapping(rawMap, () => null)
+ let map = JSON.parse(rawMap.toString()) as RawSourceMap
+
+ let sources = combined.sources
+ let annotations = formattedMappings(map)
+
+ return { css, map, sources, annotations }
+}
+
+function toRawSourceMap(map: DecodedSourceMap): string {
+ let generator = new SourceMapGenerator()
+
+ let id = 1
+ let sourceTable = new DefaultMap<
+ DecodedSource | null,
+ {
+ url: string
+ content: string
+ }
+ >((src) => {
+ return {
+ url: src?.url ?? ``,
+ content: src?.content ?? '',
+ }
+ })
+
+ for (let mapping of map.mappings) {
+ let original = sourceTable.get(mapping.originalPosition?.source ?? null)
+
+ generator.addMapping({
+ generated: mapping.generatedPosition,
+ original: mapping.originalPosition,
+ source: original.url,
+ name: mapping.name ?? undefined,
+ })
+
+ generator.setSourceContent(original.url, original.content)
+ }
+
+ return generator.toString()
+}
+
+/**
+ * An string annotation that represents a source map
+ *
+ * It's not meant to be exhaustive just enough to
+ * verify that the source map is working and that
+ * lines are mapped back to the original source
+ *
+ * Including when using @apply with multiple classes
+ */
+function formattedMappings(map: RawSourceMap) {
+ const smc = new SourceMapConsumer(map)
+ const annotations: Record<
+ number,
+ {
+ original: { start: [number, number]; end: [number, number] }
+ generated: { start: [number, number]; end: [number, number] }
+ source: string
+ }
+ > = {}
+
+ smc.eachMapping((mapping) => {
+ let annotation = (annotations[mapping.generatedLine] = annotations[mapping.generatedLine] || {
+ ...mapping,
+
+ original: {
+ start: [mapping.originalLine, mapping.originalColumn],
+ end: [mapping.originalLine, mapping.originalColumn],
+ },
+
+ generated: {
+ start: [mapping.generatedLine, mapping.generatedColumn],
+ end: [mapping.generatedLine, mapping.generatedColumn],
+ },
+
+ source: mapping.source,
+ })
+
+ annotation.generated.end[0] = mapping.generatedLine
+ annotation.generated.end[1] = mapping.generatedColumn
+
+ annotation.original.end[0] = mapping.originalLine!
+ annotation.original.end[1] = mapping.originalColumn!
+ })
+
+ return Object.values(annotations).map((annotation) => {
+ return `${annotation.source}: ${formatRange(annotation.generated)} <- ${formatRange(annotation.original)}`
+ })
+}
+
+function formatRange(range: { start: [number, number]; end: [number, number] }) {
+ if (range.start[0] === range.end[0]) {
+ // This range is on the same line
+ // and the columns are the same
+ if (range.start[1] === range.end[1]) {
+ return `${range.start[0]}:${range.start[1]}`
+ }
+
+ // This range is on the same line
+ // but the columns are different
+ return `${range.start[0]}:${range.start[1]}-${range.end[1]}`
+ }
+
+ // This range spans multiple lines
+ return `${range.start[0]}:${range.start[1]}-${range.end[0]}:${range.end[1]}`
+}
+
+test('source maps trace back to @import location', async ({ expect }) => {
+ let { sources, annotations } = await run({
+ input: css`
+ @import 'tailwindcss';
+
+ .foo {
+ @apply underline;
+ }
+ `,
+ })
+
+ // All CSS should be mapped back to the original source file
+ expect(sources).toEqual([
+ //
+ 'index.css',
+ 'theme.css',
+ 'preflight.css',
+ 'input.css',
+ ])
+ expect(sources.length).toBe(4)
+
+ // The output CSS should include annotations linking back to:
+ // 1. The class definition `.foo`
+ // 2. The `@apply underline` line inside of it
+ expect(annotations).toEqual([
+ 'index.css: 1:0-41 <- 1:0-41',
+ 'index.css: 2:0-13 <- 3:0-34',
+ 'theme.css: 3:2-15 <- 1:0-15',
+ 'theme.css: 4:4 <- 2:2-4:0',
+ 'theme.css: 5:22 <- 4:22',
+ 'theme.css: 6:4 <- 6:2-8:0',
+ 'theme.css: 7:13 <- 8:13',
+ 'theme.css: 8:4-43 <- 446:2-54',
+ 'theme.css: 9:4-48 <- 449:2-59',
+ 'index.css: 12:0-12 <- 4:0-37',
+ 'preflight.css: 13:2-59 <- 7:0-11:23',
+ 'preflight.css: 14:4-26 <- 12:2-24',
+ 'preflight.css: 15:4-13 <- 13:2-11',
+ 'preflight.css: 16:4-14 <- 14:2-12',
+ 'preflight.css: 17:4-19 <- 15:2-17',
+ 'preflight.css: 19:2-14 <- 28:0-29:6',
+ 'preflight.css: 20:4-20 <- 30:2-18',
+ 'preflight.css: 21:4-34 <- 31:2-32',
+ 'preflight.css: 22:4-15 <- 32:2-13',
+ 'preflight.css: 23:4-159 <- 33:2-42:3',
+ 'preflight.css: 24:4-71 <- 43:2-73',
+ 'preflight.css: 25:4-75 <- 44:2-77',
+ 'preflight.css: 26:4-44 <- 45:2-42',
+ 'preflight.css: 28:2-5 <- 54:0-3',
+ 'preflight.css: 29:4-13 <- 55:2-11',
+ 'preflight.css: 30:4-18 <- 56:2-16',
+ 'preflight.css: 31:4-25 <- 57:2-23',
+ 'preflight.css: 33:2-22 <- 64:0-20',
+ 'preflight.css: 34:4-45 <- 65:2-43',
+ 'preflight.css: 35:4-37 <- 66:2-35',
+ 'preflight.css: 37:2-25 <- 73:0-78:3',
+ 'preflight.css: 38:4-22 <- 79:2-20',
+ 'preflight.css: 39:4-24 <- 80:2-22',
+ 'preflight.css: 41:2-4 <- 87:0-2',
+ 'preflight.css: 42:4-18 <- 88:2-16',
+ 'preflight.css: 43:4-36 <- 89:2-34',
+ 'preflight.css: 44:4-28 <- 90:2-26',
+ 'preflight.css: 46:2-12 <- 97:0-98:7',
+ 'preflight.css: 47:4-23 <- 99:2-21',
+ 'preflight.css: 49:2-23 <- 109:0-112:4',
+ 'preflight.css: 50:4-148 <- 113:2-123:3',
+ 'preflight.css: 51:4-76 <- 124:2-78',
+ 'preflight.css: 52:4-80 <- 125:2-82',
+ 'preflight.css: 53:4-18 <- 126:2-16',
+ 'preflight.css: 55:2-8 <- 133:0-6',
+ 'preflight.css: 56:4-18 <- 134:2-16',
+ 'preflight.css: 58:2-11 <- 141:0-142:4',
+ 'preflight.css: 59:4-18 <- 143:2-16',
+ 'preflight.css: 60:4-18 <- 144:2-16',
+ 'preflight.css: 61:4-22 <- 145:2-20',
+ 'preflight.css: 62:4-28 <- 146:2-26',
+ 'preflight.css: 64:2-6 <- 149:0-4',
+ 'preflight.css: 65:4-19 <- 150:2-17',
+ 'preflight.css: 67:2-6 <- 153:0-4',
+ 'preflight.css: 68:4-15 <- 154:2-13',
+ 'preflight.css: 70:2-8 <- 163:0-6',
+ 'preflight.css: 71:4-18 <- 164:2-16',
+ 'preflight.css: 72:4-25 <- 165:2-23',
+ 'preflight.css: 73:4-29 <- 166:2-27',
+ 'preflight.css: 75:2-18 <- 173:0-16',
+ 'preflight.css: 76:4-17 <- 174:2-15',
+ 'preflight.css: 78:2-11 <- 181:0-9',
+ 'preflight.css: 79:4-28 <- 182:2-26',
+ 'preflight.css: 81:2-10 <- 189:0-8',
+ 'preflight.css: 82:4-22 <- 190:2-20',
+ 'preflight.css: 84:2-15 <- 197:0-199:5',
+ 'preflight.css: 85:4-20 <- 200:2-18',
+ 'preflight.css: 87:2-56 <- 209:0-216:7',
+ 'preflight.css: 88:4-18 <- 217:2-16',
+ 'preflight.css: 89:4-26 <- 218:2-24',
+ 'preflight.css: 91:2-13 <- 225:0-226:6',
+ 'preflight.css: 92:4-19 <- 227:2-17',
+ 'preflight.css: 93:4-16 <- 228:2-14',
+ 'preflight.css: 95:2-68 <- 238:0-243:23',
+ 'preflight.css: 96:4-17 <- 244:2-15',
+ 'preflight.css: 97:4-34 <- 245:2-32',
+ 'preflight.css: 98:4-36 <- 246:2-34',
+ 'preflight.css: 99:4-27 <- 247:2-25',
+ 'preflight.css: 100:4-18 <- 248:2-16',
+ 'preflight.css: 101:4-20 <- 249:2-18',
+ 'preflight.css: 102:4-33 <- 250:2-31',
+ 'preflight.css: 103:4-14 <- 251:2-12',
+ 'preflight.css: 105:2-49 <- 258:0-47',
+ 'preflight.css: 106:4-23 <- 259:2-21',
+ 'preflight.css: 108:2-56 <- 266:0-54',
+ 'preflight.css: 109:4-30 <- 267:2-28',
+ 'preflight.css: 111:2-25 <- 274:0-23',
+ 'preflight.css: 112:4-26 <- 275:2-24',
+ 'preflight.css: 114:2-16 <- 282:0-14',
+ 'preflight.css: 115:4-14 <- 283:2-12',
+ 'preflight.css: 117:2-92 <- 291:0-292:49',
+ 'preflight.css: 118:4-18 <- 293:2-16',
+ 'preflight.css: 119:6-25 <- 294:4-61',
+ 'preflight.css: 120:6-53 <- 294:4-61',
+ 'preflight.css: 121:8-65 <- 294:4-61',
+ 'preflight.css: 125:2-11 <- 302:0-9',
+ 'preflight.css: 126:4-20 <- 303:2-18',
+ 'preflight.css: 128:2-30 <- 310:0-28',
+ 'preflight.css: 129:4-28 <- 311:2-26',
+ 'preflight.css: 131:2-32 <- 319:0-30',
+ 'preflight.css: 132:4-19 <- 320:2-17',
+ 'preflight.css: 133:4-23 <- 321:2-21',
+ 'preflight.css: 135:2-26 <- 328:0-24',
+ 'preflight.css: 136:4-24 <- 329:2-22',
+ 'preflight.css: 138:2-41 <- 336:0-39',
+ 'preflight.css: 139:4-14 <- 337:2-12',
+ 'preflight.css: 141:2-329 <- 340:0-348:39',
+ 'preflight.css: 142:4-20 <- 349:2-18',
+ 'preflight.css: 144:2-19 <- 356:0-17',
+ 'preflight.css: 145:4-20 <- 357:2-18',
+ 'preflight.css: 147:2-96 <- 364:0-366:23',
+ 'preflight.css: 148:4-22 <- 367:2-20',
+ 'preflight.css: 150:2-59 <- 374:0-375:28',
+ 'preflight.css: 151:4-16 <- 376:2-14',
+ 'preflight.css: 153:2-47 <- 383:0-45',
+ 'preflight.css: 154:4-28 <- 384:2-26',
+ 'index.css: 157:0-16 <- 5:0-42',
+ 'input.css: 158:0-5 <- 3:0-5',
+ 'input.css: 159:2-33 <- 4:9-18',
+ ])
+})
+
+test('source maps are generated for utilities', async ({ expect }) => {
+ let {
+ sources,
+ css: output,
+ annotations,
+ } = await run({
+ input: css`
+ @import './utilities.css';
+ @plugin "./plugin.js";
+ @utility custom {
+ color: orange;
+ }
+ `,
+ candidates: ['custom', 'custom-js', 'flex'],
+ options: {
+ loadModule: async (_, base) => ({
+ path: '',
+ base,
+ module: createPlugin(({ addUtilities }) => {
+ addUtilities({ '.custom-js': { color: 'blue' } })
+ }),
+ }),
+ },
+ })
+
+ // All CSS should be mapped back to the original source file
+ expect(sources).toEqual(['utilities.css', 'input.css'])
+ expect(sources.length).toBe(2)
+
+ // The output CSS should include annotations linking back to:
+ expect(annotations).toEqual([
+ // @tailwind utilities
+ 'utilities.css: 1:0-6 <- 1:0-19',
+ 'utilities.css: 2:2-15 <- 1:0-19',
+ 'utilities.css: 4:0-8 <- 1:0-19',
+ // color: orange
+ 'input.css: 5:2-15 <- 4:2-15',
+ // @tailwind utilities
+ 'utilities.css: 7:0-11 <- 1:0-19',
+ 'utilities.css: 8:2-13 <- 1:0-19',
+ ])
+
+ expect(output).toMatchInlineSnapshot(`
+ ".flex {
+ display: flex;
+ }
+ .custom {
+ color: orange;
+ }
+ .custom-js {
+ color: blue;
+ }
+ "
+ `)
+})
+
+test('utilities have source maps pointing to the utilities node', async ({ expect }) => {
+ let { sources, annotations } = await run({
+ input: `@tailwind utilities;`,
+ candidates: [
+ //
+ 'underline',
+ ],
+ })
+
+ expect(sources).toEqual(['input.css'])
+
+ expect(annotations).toEqual([
+ //
+ 'input.css: 1:0-11 <- 1:0-19',
+ 'input.css: 2:2-33 <- 1:0-19',
+ ])
+})
+
+test('@apply generates source maps', async ({ expect }) => {
+ let { sources, annotations } = await run({
+ input: css`
+ .foo {
+ color: blue;
+ @apply text-[#000] hover:text-[#f00];
+ @apply underline;
+ color: red;
+ }
+ `,
+ })
+
+ expect(sources).toEqual(['input.css'])
+
+ expect(annotations).toEqual([
+ 'input.css: 1:0-5 <- 1:0-5',
+ 'input.css: 2:2-13 <- 2:2-13',
+ 'input.css: 3:2-13 <- 3:9-20',
+ 'input.css: 4:2-10 <- 3:21-38',
+ 'input.css: 5:4-26 <- 3:21-38',
+ 'input.css: 6:6-17 <- 3:21-38',
+ 'input.css: 9:2-33 <- 4:9-18',
+ 'input.css: 10:2-12 <- 5:2-12',
+ ])
+})
+
+test('license comments preserve source locations', async ({ expect }) => {
+ let { sources, annotations } = await run({
+ input: `/*! some comment */`,
+ })
+
+ expect(sources).toEqual(['input.css'])
+
+ expect(annotations).toEqual([
+ //
+ 'input.css: 1:0-19 <- 1:0-19',
+ ])
+})
+
+test('license comments with new lines preserve source locations', async ({ expect }) => {
+ let { sources, annotations, css } = await run({
+ input: `/*! some \n comment */`,
+ })
+
+ expect(sources).toEqual(['input.css'])
+
+ expect(annotations).toEqual([
+ //
+ 'input.css: 1:0 <- 1:0-2:0',
+ 'input.css: 2:11 <- 2:11',
+ ])
+})
diff --git a/packages/tailwindcss/src/source-maps/source-map.ts b/packages/tailwindcss/src/source-maps/source-map.ts
new file mode 100644
index 000000000000..58f544568363
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/source-map.ts
@@ -0,0 +1,197 @@
+import { walk, type AstNode } from '../ast'
+import { DefaultMap } from '../utils/default-map'
+import { createLineTable, type LineTable, type Position } from './line-table'
+import type { Source } from './source'
+
+// https://tc39.es/ecma426/#sec-original-position-record-type
+export interface OriginalPosition extends Position {
+ source: DecodedSource
+}
+
+/**
+ * A "decoded" sourcemap
+ *
+ * @see https://tc39.es/ecma426/#decoded-source-map-record
+ */
+export interface DecodedSourceMap {
+ file: string | null
+ sources: DecodedSource[]
+ mappings: DecodedMapping[]
+}
+
+/**
+ * A "decoded" source
+ *
+ * @see https://tc39.es/ecma426/#decoded-source-record
+ */
+export interface DecodedSource {
+ url: string | null
+ content: string | null
+ ignore: boolean
+}
+
+/**
+ * A "decoded" mapping
+ *
+ * @see https://tc39.es/ecma426/#decoded-mapping-record
+ */
+export interface DecodedMapping {
+ // https://tc39.es/ecma426/#sec-original-position-record-type
+ originalPosition: OriginalPosition | null
+
+ // https://tc39.es/ecma426/#sec-position-record-type
+ generatedPosition: Position
+
+ name: string | null
+}
+
+/**
+ * Build a source map from the given AST.
+ *
+ * Our AST is build from flat CSS strings but there are many because we handle
+ * `@import`. This means that different nodes can have a different source.
+ *
+ * Instead of taking an input source map, we take the input CSS string we were
+ * originally given, as well as the source text for any imported files, and
+ * use that to generate a source map.
+ *
+ * We then require the use of other tools that can translate one or more
+ * "input" source maps into a final output source map. For example,
+ * `@ampproject/remapping` can be used to handle this.
+ *
+ * This also ensures that tools that expect "local" source maps are able to
+ * consume the source map we generate.
+ *
+ * The source map type we generate may be a bit different from "raw" source maps
+ * that the `source-map-js` package uses. It's a "decoded" source map that is
+ * represented by an object graph. It's identical to "decoded" source map from
+ * the ECMA-426 spec for source maps.
+ *
+ * Note that the spec itself is still evolving which means our implementation
+ * may need to evolve to match it.
+ *
+ * This can easily be converted to a "raw" source map by any tool that needs to.
+ **/
+export function createSourceMap({ ast }: { ast: AstNode[] }) {
+ // Compute line tables for both the original and generated source lazily so we
+ // don't have to do it during parsing or printing.
+ let lineTables = new DefaultMap((src) => createLineTable(src.code))
+ let sourceTable = new DefaultMap((src) => ({
+ url: src.file,
+ content: src.code,
+ ignore: false,
+ }))
+
+ // Convert each mapping to a set of positions
+ let map: DecodedSourceMap = {
+ file: null,
+ sources: [],
+ mappings: [],
+ }
+
+ // Get all the indexes from the mappings
+ walk(ast, (node: AstNode) => {
+ if (!node.src || !node.dst) return
+
+ let originalSource = sourceTable.get(node.src[0])
+ if (!originalSource.content) return
+
+ let originalTable = lineTables.get(node.src[0])
+ let generatedTable = lineTables.get(node.dst[0])
+
+ let originalSlice = originalSource.content.slice(node.src[1], node.src[2])
+
+ // Source maps only encode single locations — not multi-line ranges
+ // So to properly emulate this we'll scan the original text for multiple
+ // lines and create mappings for each of those lines that point to the
+ // destination node (whether it spans multiple lines or not)
+ //
+ // This is not 100% accurate if both the source and destination preserve
+ // their newlines but this only happens in the case of custom properties
+ //
+ // This is _good enough_
+ let offset = 0
+ for (let line of originalSlice.split('\n')) {
+ if (line.trim() !== '') {
+ let originalStart = originalTable.find(node.src[1] + offset)
+ let generatedStart = generatedTable.find(node.dst[1])
+
+ map.mappings.push({
+ name: null,
+ originalPosition: {
+ source: originalSource,
+ ...originalStart,
+ },
+ generatedPosition: generatedStart,
+ })
+ }
+
+ offset += line.length
+ offset += 1
+ }
+
+ let originalEnd = originalTable.find(node.src[2])
+ let generatedEnd = generatedTable.find(node.dst[2])
+
+ map.mappings.push({
+ name: null,
+ originalPosition: {
+ source: originalSource,
+ ...originalEnd,
+ },
+ generatedPosition: generatedEnd,
+ })
+ })
+
+ // Populate
+ for (let source of lineTables.keys()) {
+ map.sources.push(sourceTable.get(source))
+ }
+
+ // Sort the mappings in ascending order
+ map.mappings.sort((a, b) => {
+ return (
+ a.generatedPosition.line - b.generatedPosition.line ||
+ a.generatedPosition.column - b.generatedPosition.column ||
+ (a.originalPosition?.line ?? 0) - (b.originalPosition?.line ?? 0) ||
+ (a.originalPosition?.column ?? 0) - (b.originalPosition?.column ?? 0)
+ )
+ })
+
+ return map
+}
+
+export function createTranslationMap({
+ original,
+ generated,
+}: {
+ original: string
+ generated: string
+}) {
+ // Compute line tables for both the original and generated source lazily so we
+ // don't have to do it during parsing or printing.
+ let originalTable = createLineTable(original)
+ let generatedTable = createLineTable(generated)
+
+ type Translation = [
+ originalStart: Position,
+ originalEnd: Position,
+ generatedStart: Position | null,
+ generatedEnd: Position | null,
+ ]
+
+ return (node: AstNode) => {
+ if (!node.src) return []
+
+ let translations: Translation[] = []
+
+ translations.push([
+ originalTable.find(node.src[1]),
+ originalTable.find(node.src[2]),
+ node.dst ? generatedTable.find(node.dst[1]) : null,
+ node.dst ? generatedTable.find(node.dst[2]) : null,
+ ])
+
+ return translations
+ }
+}
diff --git a/packages/tailwindcss/src/source-maps/source.ts b/packages/tailwindcss/src/source-maps/source.ts
new file mode 100644
index 000000000000..c3a4f8988488
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/source.ts
@@ -0,0 +1,27 @@
+/**
+ * The source code for one or more nodes in the AST
+ *
+ * This generally corresponds to a stylesheet
+ */
+export interface Source {
+ /**
+ * The path to the file that contains the referenced source code
+ *
+ * If this references the *output* source code, this is `null`.
+ */
+ file: string | null
+
+ /**
+ * The referenced source code
+ */
+ code: string
+}
+
+/**
+ * The file and offsets within it that this node covers
+ *
+ * This can represent either:
+ * - A location in the original CSS which caused this node to be created
+ * - A location in the output CSS where this node resides
+ */
+export type SourceLocation = [source: Source, start: number, end: number]
diff --git a/packages/tailwindcss/src/source-maps/translation-map.test.ts b/packages/tailwindcss/src/source-maps/translation-map.test.ts
new file mode 100644
index 000000000000..ad0a9f435154
--- /dev/null
+++ b/packages/tailwindcss/src/source-maps/translation-map.test.ts
@@ -0,0 +1,279 @@
+import dedent from 'dedent'
+import { assert, expect, test } from 'vitest'
+import { toCss, type AstNode } from '../ast'
+import * as CSS from '../css-parser'
+import { createTranslationMap } from './source-map'
+
+async function analyze(input: string) {
+ let ast = CSS.parse(input, { from: 'input.css' })
+ let css = toCss(ast, true)
+ let translate = createTranslationMap({
+ original: input,
+ generated: css,
+ })
+
+ function format(node: AstNode) {
+ let lines: string[] = []
+
+ for (let [oStart, oEnd, gStart, gEnd] of translate(node)) {
+ let src = `${oStart.line}:${oStart.column}-${oEnd.line}:${oEnd.column}`
+
+ let dst = '(none)'
+
+ if (gStart && gEnd) {
+ dst = `${gStart.line}:${gStart.column}-${gEnd.line}:${gEnd.column}`
+ }
+
+ lines.push(`${dst} <- ${src}`)
+ }
+
+ return lines
+ }
+
+ return { ast, css, format }
+}
+
+test('comment, single line', async () => {
+ let { ast, css, format } = await analyze(`/*! foo */`)
+
+ assert(ast[0].kind === 'comment')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:10 <- 1:0-1:10",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ "/*! foo */
+ "
+ `)
+})
+
+test('comment, multi line', async () => {
+ let { ast, css, format } = await analyze(`/*! foo \n bar */`)
+
+ assert(ast[0].kind === 'comment')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-2:7 <- 1:0-2:7",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ "/*! foo
+ bar */
+ "
+ `)
+})
+
+test('declaration, normal property, single line', async () => {
+ let { ast, css, format } = await analyze(`.foo { color: red; }`)
+
+ assert(ast[0].kind === 'rule')
+ assert(ast[0].nodes[0].kind === 'declaration')
+ expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
+ [
+ "2:2-2:12 <- 1:7-1:17",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ ".foo {
+ color: red;
+ }
+ "
+ `)
+})
+
+test('declaration, normal property, multi line', async () => {
+ // Works, no changes needed
+ let { ast, css, format } = await analyze(dedent`
+ .foo {
+ grid-template-areas:
+ "a b c"
+ "d e f"
+ "g h i";
+ }
+ `)
+
+ assert(ast[0].kind === 'rule')
+ assert(ast[0].nodes[0].kind === 'declaration')
+ expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
+ [
+ "2:2-2:46 <- 2:2-5:11",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ ".foo {
+ grid-template-areas: "a b c" "d e f" "g h i";
+ }
+ "
+ `)
+})
+
+test('declaration, custom property, single line', async () => {
+ let { ast, css, format } = await analyze(`.foo { --foo: bar; }`)
+
+ assert(ast[0].kind === 'rule')
+ assert(ast[0].nodes[0].kind === 'declaration')
+ expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
+ [
+ "2:2-2:12 <- 1:7-1:17",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ ".foo {
+ --foo: bar;
+ }
+ "
+ `)
+})
+
+test('declaration, custom property, multi line', async () => {
+ let { ast, css, format } = await analyze(dedent`
+ .foo {
+ --foo: bar\nbaz;
+ }
+ `)
+
+ assert(ast[0].kind === 'rule')
+ assert(ast[0].nodes[0].kind === 'declaration')
+ expect(format(ast[0].nodes[0])).toMatchInlineSnapshot(`
+ [
+ "2:2-3:3 <- 2:2-3:3",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ ".foo {
+ --foo: bar
+ baz;
+ }
+ "
+ `)
+})
+
+test('at rules, bodyless, single line', async () => {
+ // This intentionally has extra spaces
+ let { ast, css, format } = await analyze(`@layer foo, bar;`)
+
+ assert(ast[0].kind === 'at-rule')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:15 <- 1:0-1:19",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ "@layer foo, bar;
+ "
+ `)
+})
+
+test('at rules, bodyless, multi line', async () => {
+ let { ast, css, format } = await analyze(dedent`
+ @layer
+ foo,
+ bar
+ ;
+ `)
+
+ assert(ast[0].kind === 'at-rule')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:15 <- 1:0-4:0",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ "@layer foo, bar;
+ "
+ `)
+})
+
+test('at rules, body, single line', async () => {
+ let { ast, css, format } = await analyze(`@layer foo { color: red; }`)
+
+ assert(ast[0].kind === 'at-rule')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:11 <- 1:0-1:11",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ "@layer foo {
+ color: red;
+ }
+ "
+ `)
+})
+
+test('at rules, body, multi line', async () => {
+ let { ast, css, format } = await analyze(dedent`
+ @layer
+ foo
+ {
+ color: baz;
+ }
+ `)
+
+ assert(ast[0].kind === 'at-rule')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:11 <- 1:0-3:0",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ "@layer foo {
+ color: baz;
+ }
+ "
+ `)
+})
+
+test('style rules, body, single line', async () => {
+ let { ast, css, format } = await analyze(`.foo:is(.bar) { color: red; }`)
+
+ assert(ast[0].kind === 'rule')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:14 <- 1:0-1:14",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ ".foo:is(.bar) {
+ color: red;
+ }
+ "
+ `)
+})
+
+test('style rules, body, multi line', async () => {
+ // Works, no changes needed
+ let { ast, css, format } = await analyze(dedent`
+ .foo:is(
+ .bar
+ ) {
+ color: red;
+ }
+ `)
+
+ assert(ast[0].kind === 'rule')
+ expect(format(ast[0])).toMatchInlineSnapshot(`
+ [
+ "1:0-1:16 <- 1:0-3:2",
+ ]
+ `)
+
+ expect(css).toMatchInlineSnapshot(`
+ ".foo:is( .bar ) {
+ color: red;
+ }
+ "
+ `)
+})
diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts
index 3ecf1a10fd36..5b4b1ca993c8 100644
--- a/packages/tailwindcss/src/test-utils/run.ts
+++ b/packages/tailwindcss/src/test-utils/run.ts
@@ -7,12 +7,14 @@ export async function compileCss(
options: Parameters[1] = {},
) {
let { build } = await compile(css, options)
- return optimize(build(candidates)).trim()
+ return optimize(build(candidates)).code.trim()
}
export async function run(candidates: string[]) {
let { build } = await compile('@tailwind utilities;')
- return optimize(build(candidates)).trim()
+ return optimize(build(candidates)).code.trim()
}
-export const optimizeCss = optimize
+export function optimizeCss(input: string) {
+ return optimize(input).code
+}
diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts
index 74375b6f723d..2928afd3bd55 100644
--- a/packages/tailwindcss/src/theme.ts
+++ b/packages/tailwindcss/src/theme.ts
@@ -1,4 +1,4 @@
-import { type AtRule } from './ast'
+import { type AtRule, type Declaration } from './ast'
import { escape, unescape } from './utils/escape'
export const enum ThemeOptions {
@@ -40,11 +40,18 @@ export class Theme {
public prefix: string | null = null
constructor(
- private values = new Map(),
+ private values = new Map<
+ string,
+ {
+ value: string
+ options: ThemeOptions
+ src: Declaration['src']
+ }
+ >(),
private keyframes = new Set([]),
) {}
- add(key: string, value: string, options = ThemeOptions.NONE): void {
+ add(key: string, value: string, options = ThemeOptions.NONE, src?: Declaration['src']): void {
if (key.endsWith('-*')) {
if (value !== 'initial') {
throw new Error(`Invalid theme value \`${value}\` for namespace \`${key}\``)
@@ -68,7 +75,7 @@ export class Theme {
if (value === 'initial') {
this.values.delete(key)
} else {
- this.values.set(key, { value, options })
+ this.values.set(key, { value, options, src })
}
}
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 5da1dcac7572..016191dac0a7 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -2526,8 +2526,9 @@ test('matchVariant sorts deterministically', async () => {
for (let classList of classLists) {
let output = await compileCss('@tailwind utilities; @plugin "./plugin.js";', classList, {
- loadModule(id: string) {
+ async loadModule(id: string) {
return {
+ path: '',
base: '/',
module: createPlugin(({ matchVariant }) => {
matchVariant('is-data', (value) => `&:is([data-${value}])`, {
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index a4efc6468ac3..0c3534efd748 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -2216,7 +2216,7 @@ async function render(page: Page, content: string, extraCss: string = '') {
let scanner = new Scanner({})
let candidates = scanner.scanFiles([{ content, extension: 'html' }])
- let styles = optimize(build(candidates))
+ let { code: styles } = optimize(build(candidates))
content = `${content}`
await page.setContent(content)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b68a70eb09e..06d53ebd37e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -188,6 +188,9 @@ importers:
fast-glob:
specifier: ^3.3.3
version: 3.3.3
+ source-map-js:
+ specifier: ^1.2.1
+ version: 1.2.1
packages/@tailwindcss-browser:
devDependencies:
@@ -227,6 +230,9 @@ importers:
packages/@tailwindcss-node:
dependencies:
+ '@ampproject/remapping':
+ specifier: ^2.3.0
+ version: 2.3.0
enhanced-resolve:
specifier: ^5.18.1
version: 5.18.1
@@ -236,6 +242,12 @@ importers:
lightningcss:
specifier: 'catalog:'
version: 1.29.2(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm)
+ magic-string:
+ specifier: ^0.30.17
+ version: 0.30.17
+ source-map-js:
+ specifier: ^1.2.1
+ version: 1.2.1
tailwindcss:
specifier: workspace:*
version: link:../tailwindcss
@@ -437,6 +449,9 @@ importers:
packages/tailwindcss:
devDependencies:
+ '@ampproject/remapping':
+ specifier: ^2.3.0
+ version: 2.3.0
'@tailwindcss/oxide':
specifier: workspace:^
version: link:../../crates/node
@@ -449,6 +464,12 @@ importers:
lightningcss:
specifier: 'catalog:'
version: 1.29.2(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm)
+ magic-string:
+ specifier: ^0.30.17
+ version: 0.30.17
+ source-map-js:
+ specifier: ^1.2.1
+ version: 1.2.1
playgrounds/nextjs:
dependencies:
@@ -2068,7 +2089,6 @@ packages:
'@parcel/watcher-darwin-arm64@2.5.1':
resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
engines: {node: '>= 10.0.0'}
- cpu: [arm64]
os: [darwin]
'@parcel/watcher-darwin-x64@2.5.0':
@@ -2080,7 +2100,6 @@ packages:
'@parcel/watcher-darwin-x64@2.5.1':
resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
engines: {node: '>= 10.0.0'}
- cpu: [x64]
os: [darwin]
'@parcel/watcher-freebsd-x64@2.5.0':
@@ -2128,7 +2147,6 @@ packages:
'@parcel/watcher-linux-arm64-glibc@2.5.1':
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
engines: {node: '>= 10.0.0'}
- cpu: [arm64]
os: [linux]
'@parcel/watcher-linux-arm64-musl@2.5.0':
@@ -2140,7 +2158,6 @@ packages:
'@parcel/watcher-linux-arm64-musl@2.5.1':
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
engines: {node: '>= 10.0.0'}
- cpu: [arm64]
os: [linux]
'@parcel/watcher-linux-x64-glibc@2.5.0':
@@ -2152,7 +2169,6 @@ packages:
'@parcel/watcher-linux-x64-glibc@2.5.1':
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
engines: {node: '>= 10.0.0'}
- cpu: [x64]
os: [linux]
'@parcel/watcher-linux-x64-musl@2.5.0':
@@ -2164,7 +2180,6 @@ packages:
'@parcel/watcher-linux-x64-musl@2.5.1':
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
engines: {node: '>= 10.0.0'}
- cpu: [x64]
os: [linux]
'@parcel/watcher-wasm@2.5.0':
@@ -2206,7 +2221,6 @@ packages:
'@parcel/watcher-win32-x64@2.5.1':
resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
engines: {node: '>= 10.0.0'}
- cpu: [x64]
os: [win32]
'@parcel/watcher@2.5.0':
@@ -2621,7 +2635,6 @@ packages:
bun@1.2.11:
resolution: {integrity: sha512-9brVfsp6/TYVsE3lCl1MUxoyKhvljqyL1MNPErgwsOaS9g4Gzi2nY+W5WtRAXGzLrgz5jzsoGHHwyH/rTeRCIg==}
- cpu: [arm64, x64, aarch64]
os: [darwin, linux, win32]
hasBin: true
@@ -3480,13 +3493,11 @@ packages:
lightningcss-darwin-arm64@1.29.2:
resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
engines: {node: '>= 12.0.0'}
- cpu: [arm64]
os: [darwin]
lightningcss-darwin-x64@1.29.2:
resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
engines: {node: '>= 12.0.0'}
- cpu: [x64]
os: [darwin]
lightningcss-freebsd-x64@1.29.2:
@@ -3504,25 +3515,21 @@ packages:
lightningcss-linux-arm64-gnu@1.29.2:
resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
engines: {node: '>= 12.0.0'}
- cpu: [arm64]
os: [linux]
lightningcss-linux-arm64-musl@1.29.2:
resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
engines: {node: '>= 12.0.0'}
- cpu: [arm64]
os: [linux]
lightningcss-linux-x64-gnu@1.29.2:
resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
engines: {node: '>= 12.0.0'}
- cpu: [x64]
os: [linux]
lightningcss-linux-x64-musl@1.29.2:
resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
engines: {node: '>= 12.0.0'}
- cpu: [x64]
os: [linux]
lightningcss-win32-arm64-msvc@1.29.2:
@@ -3534,7 +3541,6 @@ packages:
lightningcss-win32-x64-msvc@1.29.2:
resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
engines: {node: '>= 12.0.0'}
- cpu: [x64]
os: [win32]
lightningcss@1.29.2:
@@ -3592,8 +3598,8 @@ packages:
lru-cache@5.1.1:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
- magic-string@0.30.11:
- resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+ magic-string@0.30.17:
+ resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
merge-stream@2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -4113,10 +4119,6 @@ packages:
resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
engines: {node: '>=14.16'}
- source-map-js@1.2.0:
- resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
- engines: {node: '>=0.10.0'}
-
source-map-js@1.2.1:
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
engines: {node: '>=0.10.0'}
@@ -6156,7 +6158,7 @@ snapshots:
'@vitest/snapshot@2.0.5':
dependencies:
'@vitest/pretty-format': 2.0.5
- magic-string: 0.30.11
+ magic-string: 0.30.17
pathe: 1.1.2
'@vitest/spy@2.0.5':
@@ -6817,7 +6819,7 @@ snapshots:
debug: 4.4.0
enhanced-resolve: 5.18.1
eslint: 9.25.1(jiti@2.4.2)
- eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.25.1(jiti@2.4.2))
+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
fast-glob: 3.3.3
get-tsconfig: 4.8.1
is-bun-module: 1.2.1
@@ -6836,7 +6838,7 @@ snapshots:
debug: 4.4.0
enhanced-resolve: 5.18.1
eslint: 9.25.1(jiti@2.4.2)
- eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.25.1(jiti@2.4.2))
+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
fast-glob: 3.3.3
get-tsconfig: 4.8.1
is-bun-module: 1.2.1
@@ -6849,7 +6851,7 @@ snapshots:
- eslint-import-resolver-webpack
- supports-color
- eslint-module-utils@2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.25.1(jiti@2.4.2)):
+ eslint-module-utils@2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)):
dependencies:
debug: 3.2.7
optionalDependencies:
@@ -6860,7 +6862,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
- eslint-module-utils@2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.25.1(jiti@2.4.2)):
+ eslint-module-utils@2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2)):
dependencies:
debug: 3.2.7
optionalDependencies:
@@ -6882,7 +6884,7 @@ snapshots:
doctrine: 2.1.0
eslint: 9.25.1(jiti@2.4.2)
eslint-import-resolver-node: 0.3.9
- eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.25.1(jiti@2.4.2))
+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
hasown: 2.0.2
is-core-module: 2.15.1
is-glob: 4.0.3
@@ -6911,7 +6913,7 @@ snapshots:
doctrine: 2.1.0
eslint: 9.25.1(jiti@2.4.2)
eslint-import-resolver-node: 0.3.9
- eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.25.1(jiti@2.4.2))
+ eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.25.1(jiti@2.4.2))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))
hasown: 2.0.2
is-core-module: 2.15.1
is-glob: 4.0.3
@@ -7560,7 +7562,7 @@ snapshots:
dependencies:
yallist: 3.1.1
- magic-string@0.30.11:
+ magic-string@0.30.17:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.0
@@ -7865,7 +7867,7 @@ snapshots:
dependencies:
nanoid: 3.3.7
picocolors: 1.1.1
- source-map-js: 1.2.0
+ source-map-js: 1.2.1
postcss@8.4.47:
dependencies:
@@ -8087,8 +8089,6 @@ snapshots:
slash@5.1.0: {}
- source-map-js@1.2.0: {}
-
source-map-js@1.2.1: {}
source-map-support@0.5.21:
@@ -8523,7 +8523,7 @@ snapshots:
chai: 5.1.1
debug: 4.3.6
execa: 8.0.1
- magic-string: 0.30.11
+ magic-string: 0.30.17
pathe: 1.1.2
std-env: 3.7.0
tinybench: 2.9.0