Important Selector Strategy - Apply styles to wrapper component as well

[nickfujita]

Problem

While using the Important Selector Strategy in the config, tailwind styles are not also applied to the wrapper component. Only the child components to the specified selector element can utilize tailwind styles. This issue becomes most pronounced when created a UI module of different components. There is no root level component like an in application, but rather each top level component exported from the module needs to carry the selector class name on a container element, with no additional styles on it.

In the bese case it's a minor annoyance which required a extra wrapper div with no styles. But in the worst case there are cases that can not be implemented with a wrapper div with just the class name. For a specific example, take the Drawer UI module Vaul. In the case that we want to create a premade Drawer UI with Vaul, it can take class names as argument, but doesn't work very well when a wrapper div is required on every component it creates.

In this case if the output tailwind styles were also applied to the element which contains the important selector class name, we can simply pass in the class name to the top level elements, and the tailwind styles would be applied to it and it's child elements.

Issues with using prefix only

Issue 1 - @layer directive from inside custom ui module

Adding a prefix helps, but there are still cases where using the important selector strategy is still desired. For example, if you would like set a base style for the h1 tags in your components, you can set the following:

@layer base {
  h1, .h1 {
    @apply myprefix-text-4xl;
  }
}

This works, but will also impact the client app using the ui library. So we are back to needing to scope to a per component class wrapper:

@layer base {
  .my-ui-module h1, .my-ui-module  .h1 {
    @apply myprefix-text-4xl;
  }
}

the problem here is that since the specificity is now greater than all other styles applied using just the prefix and not the important selector, it overrides any classnames placed directly on h1 elements. So we are again back to needed to use the important selector even though we already have the class name prefixes, and require styles being applied to the top level wrapper component with the specified class name in addition to it's children.

Issue 2 - @layer directive or general global styles from client app consuming custom ui module

There is also the case that we use prefix class names only, and our class names do not conflict with the client app class names which also uses tailwind. However if the client app defines any global styles, they may also impact the ui in our ui module. For this reason it would be great to be able to use the important selector so that the specificity of the styles we applied in our module are greater than any global styles set by the client app.

Proposed solution

Update applyImportantSelector to apply the the important selector to both elements that have the selector and child elements under the selector element. An example output would look like:

Config:

const config = {
  important: '.my-ui-module',
  content: [{ raw: html`<div class="my-ui-module p-2"><div class="p-2"></div></div>` }],
  plugins: [],
}

Current output:

.my-ui-module .p-2 {
  padding: 0.5rem;
}

Desired output:

.my-ui-module.p-2
.my-ui-module .p-2 {
  padding: 0.5rem;
}

Started on a PR to make the code change (one test still not passing, see ticket for details):
#14734

Questions

• Spent a bunch of time to see if there was possibly some other hack to get around this, using a custom plugin or something from postcss side, but haven't found anything aside from the code change above. Anyone else have ideas on how to accomplish this w/o making an update to tailwind?
• Not a question, but yes I've also looked into using the prefix, but would rather not since you have to write all styles from then on in your code with the prefix.