When defining dash-prefixed utility classes in a @layer, using them in an @apply statement throws a build error

[innoscience]

What version of Tailwind CSS are you using?

Tailwind v3.1.7

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

Tailwindcss CLI tool

What version of Node.js are you using?

Node v16.6.2

What browser are you using?

N/A, CLI issue

What operating system are you using?

macOS

Reproduction URL

Repo with basic demo code: https://github.com/lform/tailwind-dash-demo

Describe your issue

We're creating some utility classes in a @layer utilities layer that extend each other using @apply statements to create a simple header font-sizing system that utilizes modular scale.

The classes work fine except if you try to use a dash-prefixed class thats been defined in the utilites layer in one of the @apply statements. There are workarounds but they would break the consistency of using the dash-prefix for negative values that tailwind employs uniformly. We're building out some re-usable components and want to utilize those font-sizing classes in them so this is a bit of a hindrence. We've temporarily changed the syntax to h-ms--1 to work around this but its not ideal as it doesnt obey the consistency.

The above repo has the full code demo but basically the following is the problem:

@layer utilities {
	.h-ms {
		/* Works fine */
		@apply font-header leading-tight;
	}

	.h-ms-1 {
		/* Works fine */
		@apply h-ms text-ms-1 font-bold;
	}

	.-h-ms-1 {
		/* Works fine, `-text-ms-1` is defined in the tailwind config */
		@apply h-ms -text-ms-1 font-bold;
	}

	.new-class {
		/* This throws the below error */
		@apply -h-ms-1 italic;
	}
}

Which then throws the following error (the error goes away if you remove the offending dash-prefixed item in question from the apply statement):

TypeError: Cannot read property 'parent' of undefined
    at Root.normalize (/Users/bmf/sites/tailwind-dash-test/node_modules/postcss/lib/container.js:292:15)
    at Root.normalize (/Users/bmf/sites/tailwind-dash-test/node_modules/postcss/lib/root.js:25:23)
    at Root.insertAfter (/Users/bmf/sites/tailwind-dash-test/node_modules/postcss/lib/container.js:201:22)
    at Rule.after (/Users/bmf/sites/tailwind-dash-test/node_modules/postcss/lib/node.js:161:17)
    at processApply (/Users/bmf/sites/tailwind-dash-test/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:453:16)
    at /Users/bmf/sites/tailwind-dash-test/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:471:9
    at /Users/bmf/sites/tailwind-dash-test/node_modules/tailwindcss/lib/processTailwindFeatures.js:55:50
    at Object.Once (/Users/bmf/sites/tailwind-dash-test/node_modules/tailwindcss/lib/cli.js:682:27)
    at LazyResult.runOnRoot (/Users/bmf/sites/tailwind-dash-test/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/Users/bmf/sites/tailwind-dash-test/node_modules/postcss/lib/lazy-result.js:393:26)

Is there another way to approach this that would work? Not sure if this is a bug, expected or the wrong way to create these utility classes. Open to suggestions if there's a more correct approach, was unable to find any help when searching this issue online.

[thecrypticace]

Hey! This was definitely a bug! It comes from the fact that you have both h-ms-1 and -h-ms-1 defined as utilities. Internally we consider h-ms-1 to be a possible match when looking for -h-ms-1 because some utilities handle negatives automatically.

I've merged the fix for this and it should be in our insiders build soon (npm install tailwindcss@insiders). I'm gonna try to fix a few more bugs and tag a release today hopefully.

[innoscience]

@thecrypticace Super appreciate that you got on this so quickly, was up til 3am last night wrestling with this figuring we were doing something wrong, thanks! 👑