Rename @content to @source (#14127)

This PR renames the `@content` directive to `@source`.

integrations/cli/index.test.ts

@@ -32,7 +32,7 @@ test(
       `,
       'project-a/src/index.css': css`
         @import 'tailwindcss/utilities';
-        @content '../../project-b/src/**/*.js';
+        @source '../../project-b/src/**/*.js';
         @plugin '../plugin.js';
       `,
       'project-a/src/index.js': js`
@@ -91,7 +91,7 @@ test(
       `,
       'project-a/src/index.css': css`
         @import 'tailwindcss/utilities';
-        @content '../../project-b/src/**/*.js';
+        @source '../../project-b/src/**/*.js';
         @plugin '../plugin.js';
       `,
       'project-a/src/index.js': js`

integrations/postcss/index.test.ts

@@ -41,7 +41,7 @@ test(
       `,
       'project-a/src/index.css': css`
         @import 'tailwindcss/utilities';
-        @content '../../project-b/src/**/*.js';
+        @source '../../project-b/src/**/*.js';
         @plugin '../plugin.js';
       `,
       'project-a/src/index.js': js`
@@ -109,7 +109,7 @@ test(
       `,
       'project-a/src/index.css': css`
         @import 'tailwindcss/utilities';
-        @content '../../project-b/src/**/*.js';
+        @source '../../project-b/src/**/*.js';
         @plugin '../plugin.js';
       `,
       'project-a/src/index.js': js`

integrations/vite/index.test.ts

@@ -59,7 +59,7 @@ test(
       'project-a/src/index.css': css`
         @import 'tailwindcss/theme' theme(reference);
         @import 'tailwindcss/utilities';
-        @content '../../project-b/src/**/*.js';
+        @source '../../project-b/src/**/*.js';
       `,
       'project-b/src/index.js': js`
         const className = "content-['project-b/src/index.js']"
@@ -124,7 +124,7 @@ test(
       'project-a/src/index.css': css`
         @import 'tailwindcss/theme' theme(reference);
         @import 'tailwindcss/utilities';
-        @content '../../project-b/src/**/*.js';
+        @source '../../project-b/src/**/*.js';
       `,
       'project-b/src/index.js': js`
         const className = "content-['project-b/src/index.js']"

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -376,7 +376,7 @@ function handleImports(
   // Relevant specification:
   //   - CSS Import Resolve: https://csstools.github.io/css-import-resolve/
 
-  if (!input.includes('@import') && !input.includes('@plugin') && !input.includes('@content')) {
+  if (!input.includes('@import') && !input.includes('@plugin') && !input.includes('@source')) {
     return [input, [file]]
   }
 

packages/internal-postcss-fix-relative-paths/src/fixtures/example-project/src/index.css

@@ -1,4 +1,4 @@
-@content "./**/*.ts";
-@content "!./**/*.ts";
+@source "./**/*.ts";
+@source "!./**/*.ts";
 @plugin "./plugin.js";
 @plugin "./what\"s-this.js";

packages/internal-postcss-fix-relative-paths/src/index.test.ts

@@ -6,7 +6,7 @@ import { describe, expect, test } from 'vitest'
 import fixRelativePathsPlugin from '.'
 
 describe('fixRelativePathsPlugin', () => {
-  test('rewrites @content and @plugin to be relative to the initial css file', async () => {
+  test('rewrites @source and @plugin to be relative to the initial css file', async () => {
     let cssPath = path.join(__dirname, 'fixtures', 'external-import', 'src', 'index.css')
     let css = fs.readFileSync(cssPath, 'utf-8')
 
@@ -15,8 +15,8 @@ describe('fixRelativePathsPlugin', () => {
     let result = await processor.process(css, { from: cssPath })
 
     expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@content "../../example-project/src/**/*.ts";
-      @content "!../../example-project/src/**/*.ts";
+      "@source "../../example-project/src/**/*.ts";
+      @source "!../../example-project/src/**/*.ts";
       @plugin "../../example-project/src/plugin.js";
       @plugin "../../example-project/src/what\\"s-this.js";"
     `)

packages/internal-postcss-fix-relative-paths/src/index.ts

@@ -70,7 +70,7 @@ export default function fixRelativePathsPlugin(): Plugin {
   return {
     postcssPlugin: 'tailwindcss-postcss-fix-relative-paths',
     AtRule: {
-      content: fixRelativePath,
+      source: fixRelativePath,
       plugin: fixRelativePath,
     },
   }

packages/tailwindcss/src/index.test.ts

@@ -1514,19 +1514,19 @@ describe('plugins', () => {
   })
 })
 
-describe('@content', () => {
-  test('emits @content files', () => {
+describe('@source', () => {
+  test('emits @source files', () => {
     let { globs } = compile(css`
-      @content "./foo/bar/*.ts";
+      @source "./foo/bar/*.ts";
     `)
 
     expect(globs).toEqual(['./foo/bar/*.ts'])
   })
 
-  test('emits multiple @content files', () => {
+  test('emits multiple @source files', () => {
     let { globs } = compile(css`
-      @content "./foo/**/*.ts";
-      @content "./php/secr3t/smarty.php";
+      @source "./foo/**/*.ts";
+      @source "./php/secr3t/smarty.php";
     `)
 
     expect(globs).toEqual(['./foo/**/*.ts', './php/secr3t/smarty.php'])

packages/tailwindcss/src/index.ts

@@ -121,23 +121,23 @@ export function compile(
       return
     }
 
-    // Collect paths from `@content` at-rules
-    if (node.selector.startsWith('@content ')) {
+    // Collect paths from `@source` at-rules
+    if (node.selector.startsWith('@source ')) {
       if (node.nodes.length > 0) {
-        throw new Error('`@content` cannot have a body.')
+        throw new Error('`@source` cannot have a body.')
       }
 
       if (parent !== null) {
-        throw new Error('`@content` cannot be nested.')
+        throw new Error('`@source` cannot be nested.')
       }
 
-      let path = node.selector.slice(9)
+      let path = node.selector.slice(8)
       if (
         (path[0] === '"' && path[path.length - 1] !== '"') ||
         (path[0] === "'" && path[path.length - 1] !== "'") ||
         (path[0] !== "'" && path[0] !== '"')
       ) {
-        throw new Error('`@content` paths must be quoted.')
+        throw new Error('`@source` paths must be quoted.')
       }
       globs.push(path.slice(1, -1))
       replaceWith([])