Understanding circular dependency failure with @apply

[Poimen]

We mostly work with web components using the StencilJS framework, which we have integrated Tailwind into (version 3.1.2). On some occasions we find that tailwind reports a circular dependency when using @apply that doesn't make much sense.

In the examples below, I have reduced the html/css to make it fit 👍

In the example we have a web component (omds-input-field-wrapper) that is used as a sub-component of a bigger web component. The upper component uses inline classes to define some behaviour for the sub component:

render() {
    const { isDisabled } = this;

    return (
      <Host>
        <omds-input-field-wrapper
          class={{
            'cursor-pointer': true,
            'cursor-auto pointer-events-none': isDisabled,
          }}
        />
      </Host>
    );
}

In order to affect some styling in the component omds-input-field-wrapper we use the ::part selector in the upper components css:

omds-input-field-wrapper::part(input-field) {
  @apply cursor-pointer;
}

omds-input-field-wrapper:not(.is-open)::part(input-field) {
  @apply cursor-pointer;
}

When the Stencil compiler runs, it generates a bunch of css (I have removed all the functional css and left the errant css):

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

/*!@omds-input-field-wrapper::part(input-field)*/
omds-input-field-wrapper.sc-omds-dropdown-field::part(input-field) {
  @apply cursor-pointer;
}

/*!@omds-input-field-wrapper:not(.is-open)::part(input-field)*/
omds-input-field-wrapper.sc-omds-dropdown-field:not(.is-open)::part(input-field) {
  @apply cursor-pointer;
}

/*!@.cursor-pointer*/
.cursor-pointer.sc-omds-dropdown-field {
  cursor: pointer
}

Here, the inline html classes have been created, and the @apply classes will be processed by Tailwind.

If you run this through the tailwind cli, it generates the error:

npx tailwindcss -i .\input.css -o .\output.css
C:\git\node_modules\.pnpm\postcss@8.4.14\node_modules\postcss\lib\input.js:148
      result = new CssSyntaxError(
               ^

CssSyntaxError: tailwindcss: C:\git\input.css:16:1: You cannot `@apply` the `cursor-pointer` utility here because it creates a circular dependency.

In this case it is pretty simple to revert to normal css, but I'm trying to understand the circular dependency reason. If I remove:

.cursor-pointer.sc-omds-dropdown-field {
  cursor: pointer
}

then all works fine.

Is there any reason why Tailwind throws a circular dependency for this?

Thanks.

[rohmann]

So a circular dependency would be using @apply cursor-pointer in a block with a selector that is also attached to what is being applied like this (https://play.tailwindcss.com/rZSdTtLrto?file=css):

.cursor-pointer.target {
  cursor: pointer
}

.target {
  @apply cursor-pointer;
}

The circularity error is triggered simply by checking if the selectors contain each other somehow. Because @apply cursor-pointer is inside .target it doesn't allow connected those selectors like .cursor-pointer.target You can see that logic happening in Tailwind here:

tailwindcss/src/lib/expandApplyAtRules.js

Line 419 in 96a8353

let intersects = parentClasses.some((selector) => nodeClasses.includes(selector))

I'm not overly familiar with Stencil but perhaps it would help of tailwind processed the CSS first, then Stencil ran afterwards to expand their selectors.

[Poimen]

Unfortunately the Stencil compiler does tsx files then CSS files, and this is not configurable.

What I'm not seeing is how that target of the selector is doubly connected. The cursor is being applied to 3 different areas that are not seemingly connected - 1 to the base element and 2 in places inside the web component.

If I understand the circular dependency, I would be accessing a target that was shared, so in theory you can drop one of them and will have the same functionality. In my case, I don't see how it is possible?

[adamwathan]

I think this comment from a previous discussion should help:

https://twitter.com/adamwathan/status/1483480291532587011

TL;DR, when you create a new CSS rule that also has .cursor-pointer in the selector, that rule will be included anywhere you @apply cursor-pointer. It's the right behavior as explained in that comment but it's surprising when you run into it from certain angles admittedly.

[Poimen]

Thanks for the great details and the effort, much appreciated 👍