Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combination of TW JS based config and a class causes malformed CSS #12111

Closed
robdekort opened this issue Sep 29, 2023 · 3 comments · Fixed by #12113
Closed

Combination of TW JS based config and a class causes malformed CSS #12111

robdekort opened this issue Sep 29, 2023 · 3 comments · Fixed by #12113
Assignees

Comments

@robdekort
Copy link

What version of Tailwind CSS are you using?

v3.3.3

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

Vite v4.4.9

What version of Node.js are you using?

v20.7.0

What browser are you using?

Any

What operating system are you using?

macOS 14.0

Reproduction URL

https://play.tailwindcss.com/jZXL8Axggn

Describe your issue

What I have is this:

A Tailwind config file containing the following:

'@media screen(md)': {
  '.outer-grid': {
    rowGap: theme('spacing.16'),
    paddingTop: theme('spacing.16'),
    paddingBottom: theme('spacing.16'),
  },
  '.outer-grid>*:last-child:is(.w-full)': {
    marginBottom: `-${theme('spacing.16')}`,
  },
},

A class in my templates
[&>*]:after:w-full

The combination of this JS config and this class trips up something and results in compilation warings and the following CSS in my compiled file:

@media (min-width: 768px) {
        {
        content: var(--tw-content);
        row-gap: 4rem;
        padding-top: 4rem;
        padding-bottom: 4rem
    }

    .outer-grid>*:last-child:is(.\[\&\>\*\]\:before\:w-full>*):before {
        content: var(--tw-content);
        margin-bottom: -4rem
    }
}

I noticed this because of the error npm run build produces:

warnings when minifying css:
▲ [WARNING] Unexpected "{" [css-syntax-error]

    <stdin>:2610:3:
      2610 │    {

And I can even see in VS code with the TW extension the malformed CSS when I hover over this one class:
Screenshot_2023-09-28_at_17 09 03

When I either:

  • Remove the class from my templates, or
  • Remove the '.outer-grid>*:last-child:is(.w-full)' statement from the @media sceen(md) query,

the warning and malformed CSS is gone. Note that the '.outer-grid>*:last-child:is(.w-full)' statement not in a media query compiles without issues.

A workaround is to use an attribute selector instead [class~="w-full"]. https://play.tailwindcss.com/i6OoVDdQbc?file=config

@thecrypticace
Copy link
Contributor

@robdekort I suspect the actual intention here is to have outer-grid as the actual utility.

You can use the following as a workaround which works today (or see it on Tailwind Play):

addComponents({
  '.outer-grid': {
    '@screen md': {
      '&>*:last-child:is([class~="w-full"])': {
        marginBottom: `-${theme('spacing.16')}`,
      },

      rowGap: theme('spacing.16'),
      paddingTop: theme('spacing.16'),
      paddingBottom: theme('spacing.16'),
    },
  },
})

A few things to note:

  1. I'm using @screen md instead of @media screen(md) — they're functionally equivalent but the first one is a bit shorter.
  2. I'm using [class~="w-full"] instead of .w-full so none of these utilities are generated when using w-full and instead only when outer-grid is used.
  3. I'm treating the top-level component as a single class — not a selector.
  4. I'm using CSS nesting

In general, you're less likely to run into issues when you only ever have a single class for a utility or component to target. This is why I'm using nesting and making sure other classes use [class~="…"] syntax because otherwise Tailwind CSS will treat that as something to output when finding w-full, md:w-full, etc…

@thecrypticace
Copy link
Contributor

This should be fixed by #12113, and will be available in the next release.

You can already try it by using the insiders build — may take 15–20m to become available:

npm install tailwindcss@insiders

@robdekort
Copy link
Author

Hey @thecrypticace. This is amazing. The bug is resolved and I learned. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants