WIP

packages/tailwindcss/src/index.test.ts

@@ -308,6 +308,47 @@ describe('@apply', () => {
  }"
  `)
  })
+
+ it('should be possible to apply user-defined CSS', () => {
+ expect(
+ compileCss(css`
+ @theme {
+ --spacing-2: 0.5rem;
+ --spacing-3: 0.75rem;
+ --color-red-600: #e53e3e;
+ }
+
+ .btn {
+ @apply py-2 px-3;
+ }
+
+ .btn-red {
+ @apply btn bg-red-600;
+ }
+ `),
+ ).toMatchInlineSnapshot(`
+ ":root {
+ --spacing-2: .5rem;
+ --spacing-3: .75rem;
+ --color-red-600: #e53e3e;
+ }
+
+ .btn {
+ padding-top: var(--spacing-2, .5rem);
+ padding-bottom: var(--spacing-2, .5rem);
+ padding-left: var(--spacing-3, .75rem);
+ padding-right: var(--spacing-3, .75rem);
+ }
+
+ .btn-red {
+ padding-top: var(--spacing-2, .5rem);
+ padding-bottom: var(--spacing-2, .5rem);
+ padding-left: var(--spacing-3, .75rem);
+ padding-right: var(--spacing-3, .75rem);
+ background-color: var(--color-red-600, #e53e3e);
+ }"
+ `)
+ })
 })
 
 describe('arbitrary variants', () => {

packages/tailwindcss/src/index.ts

@@ -20,6 +20,10 @@ export function compile(css: string): {
  invalidCandidates.add(candidate)
  }
 
+ // Track `@apply` information
+ let isApplyUsed = css.includes('@apply')
+ let applyables = new Map<string, AstNode[]>()
+
  // Find all `@theme` declarations
  let theme = new Theme()
  let firstThemeRule: Rule | null = null
@@ -28,6 +32,14 @@ export function compile(css: string): {
  walk(ast, (node, { replaceWith }) => {
  if (node.kind !== 'rule') return
 
+ // Track all user-defined classes for `@apply` support
+ if (isApplyUsed && node.selector[0] === '.' && !node.selector.includes(' ')) {
+ let candidate = node.selector.slice(1)
+ let existing = applyables.get(candidate) ?? []
+ existing.push(node)
+ applyables.set(candidate, existing)
+ }
+
  // Drop instances of `@media reference`
  //
  // We support `@import "tailwindcss/theme" reference` as a way to import an external theme file
@@ -143,7 +155,7 @@ export function compile(css: string): {
  })
 
  // Replace `@apply` rules with the actual utility classes.
- if (css.includes('@apply')) {
+ if (isApplyUsed) {
  walk(ast, (node, { replaceWith }) => {
  if (node.kind === 'rule' && node.selector[0] === '@' && node.selector.startsWith('@apply')) {
  let candidates = node.selector
@@ -153,6 +165,25 @@ export function compile(css: string): {
 
  // Replace the `@apply` rule with the actual utility classes
  {
+ let newNodes: AstNode[] = []
+ for (let candidate of candidates.splice(0)) {
+ if (applyables.has(candidate)) {
+ for (let candidateNode of applyables.get(candidate) ?? []) {
+ candidateNode = structuredClone(candidateNode)
+
+ if (candidateNode.kind === 'rule' && candidateNode.selector[0] !== '@') {
+ for (let child of candidateNode.nodes) {
+ newNodes.push(child)
+ }
+ } else {
+ newNodes.push(candidateNode)
+ }
+ }
+ } else {
+ candidates.push(candidate)
+ }
+ }
+
  // Parse the candidates to an AST that we can replace the `@apply` rule with.
  let candidateAst = compileCandidates(candidates, designSystem, {
  onInvalidCandidate: (candidate) => {
@@ -163,7 +194,6 @@ export function compile(css: string): {
  // 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 don't want the wrapping selector.
- let newNodes: AstNode[] = []
  for (let candidateNode of candidateAst) {
  if (candidateNode.kind === 'rule' && candidateNode.selector[0] !== '@') {
  for (let child of candidateNode.nodes) {