Repository: tailwindlabs/tailwindcss
File: packages/tailwindcss/src/index.ts (TypeScript)

Code before:
      replaceWith([])
      return
    }

    // Collect custom `@utility` at-rules
    if (node.selector.startsWith('@utility ')) {
      let name = node.selector.slice(9).trim()

      if (!IS_VALID_UTILITY_NAME.test(name)) {
        throw new Error(
          `\`@utility ${name}\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.`,
        )
      }

      if (node.nodes.length === 0) {
        throw new Error(
          `\`@utility ${name}\` is empty. Utilities should include at least one property.`,
        )
      }

      customUtilities.push((designSystem) => {
        designSystem.utilities.static(name, (candidate) => {
          if (candidate.negative) return
          let ast = structuredClone(node.nodes)

          substituteAtApply(ast, designSystem)

          return ast
        })
      })

      replaceWith([])
      return
    }

    // Collect paths from `@source` at-rules
    if (node.selector.startsWith('@source ')) {
      if (node.nodes.length > 0) {
        throw new Error('`@source` cannot have a body.')
      }

      if (parent !== null) {
        throw new Error('`@source` cannot be nested.')
      }

      let path = node.selector.slice(8)
      if (
        (path[0] === '"' && path[path.length - 1] !== '"') ||
        (path[0] === "'" && path[path.length - 1] !== "'") ||
        (path[0] !== "'" && path[0] !== '"')
      ) {

Review comment (refactor):
Feels a bit weird to me to make this the responsibility of the actual plugin/matcher/whatever 🤔

Should we maybe just handle all of the `@apply` stuff in a separate pass at the end? Or perhaps we could replace it in the CSS up front, so we take this:

```css
@utility foo {
  @apply flex
}
```

...and turn that into:

```css
@utility foo {
  & {
    display: flex
  }
}
```

...before the plugin is even registered with the design system?

Code after:
      pluginLoaders.push(loadPlugin(node.selector.slice(9, -1)))
      replaceWith([])
      return
    }

    // Collect custom `@utility` at-rules
    if (node.selector.startsWith('@utility ')) {
      let name = node.selector.slice(9).trim()

      if (!IS_VALID_UTILITY_NAME.test(name)) {
        throw new Error(
          `\`@utility ${name}\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.`,
        )
      }

      if (node.nodes.length === 0) {
        throw new Error(
          `\`@utility ${name}\` is empty. Utilities should include at least one property.`,
        )
      }

      customUtilities.push((designSystem) => {
        designSystem.utilities.static(name, (candidate) => {
          if (candidate.negative) return
          return structuredClone(node.nodes)
        })
      })

      return
    }

    // Collect paths from `@source` at-rules
    if (node.selector.startsWith('@source ')) {
      if (node.nodes.length > 0) {
        throw new Error('`@source` cannot have a body.')
      }

      if (parent !== null) {
        throw new Error('`@source` cannot be nested.')
      }

      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('`@source` paths must be quoted.')
      }
      globs.push(path.slice(1, -1))
      replaceWith([])