PostCSS warning for custom utility used with before:/after:

[gynekolog]

What version of Tailwind CSS are you using?

3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

Vite

What version of Node.js are you using?

v21.7.3

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/vitest-dev-vitest-cp1r2y

Describe your issue

There's a PostCSS warning in the console:

A PostCSS plugin did not pass the `from` option to `postcss.parse`. This may cause imported assets to be incorrectly transformed. If you've recently added a PostCSS plugin that raised this warning, please contact the package author to fix the issue.

It starts when you define your own CSS utility and use it with the before: or after:.
Example:

css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-own {
    background-color: red;
  }
}

Usage:

<div class="before:bg-own" />

[wongjn]

This could be related to the before variant core plugin (this would happen with after too), it adds a new Declaration without a source property:

tailwindcss/src/corePlugins.js

Line 64 in f1f419a

rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))

The vite-url-rewrite PostCSS plugin internally in Vite relies on this source property:

const importer = declaration.source?.input.file
if (!importer) {
  opts.logger.warnOnce(
    '\nA PostCSS plugin did not pass the `from` option to `postcss.parse`. ' +

As per the 2.4 of the PostCSS Plugin Guidelines:

Every node must have a relevant source so PostCSS can generate an accurate source map.

So if you add a new declaration based on some existing declaration, you should clone the existing declaration in order to save that original source.

if (needPrefix(decl.prop)) {
  decl.cloneBefore({ prop: '-webkit-' + decl.prop })
}

So perhaps we could clone a declaration inside the variant plugin, instead of creating a new one from scratch? But why only with your own declared utilities? The plot thickens!

---

It seems when we are generating the CSS:

tailwindcss/src/lib/expandTailwindAtRules.js

Lines 244 to 246 in f1f419a

	cloneNodes(variantNodes, root.source, {
	layer: 'variants',
	})

We skip setting source recursively if preserveSource is true:

tailwindcss/src/util/cloneNodes.js

Lines 22 to 25 in f1f419a

	let shouldPreserveSource = node.raws.tailwind?.preserveSource === true && node.source
	if (shouldPreserveSource) {
	return false
	}

And for @layer-defined class rules, this preserveSource is indeed set to true:

tailwindcss/src/lib/setupContextUtils.js

Lines 724 to 726 in f1f419a

	layerPlugins.push(function ({ addUtilities }) {
	addUtilities(node, { respectPrefix: false, preserveSource: true })
	})

Thus, for plugin-defined utilities, we don't have to worry about retaining source in the before/after plugin but we should do for @layer-defined class rules if seems.

---

So what would be the best way to solve this? Push the onus on to the plugins that use the PostCSS API to ensure they create appropriate source values? This would mean we could fix the core plugins to match this. Or try to fill in gaps in cloneNodes()? If we do want to fill in the gaps ourselves, should the source point to the original source of the @layer rule or the relevant @tailwind declaration?

Example test for this:

test('source maps for layer rules with injected nodes from plugins', async () => {
  let config = {
    content: [{ raw: `foo:bar` }],
    plugins: [
      function ({ addVariant }) {
        addVariant('foo', ({ container }) => {
          container.walkRules((rule) => {
            rule.prepend(postcss.decl({ prop: 'foo', value: 'baz' }))
          })
        })
      },
    ],
  }

  let input = postcss.parse(
    css`
      @tailwind utilities;

      @layer utilities {
        .bar {
          background-color: red;
        }
      }
    `,
    { from: 'input.css', map: { prev: map } }
  )

  let result = await run(input, config)

  let { sources, annotations } = parseSourceMaps(result)

  // All CSS generated by Tailwind CSS should be annotated with source maps
  // And always be able to point to the original source file
  expect(sources).not.toContain('<no source>')
})