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

Duplicate negative selectors with "-" part of prefix #9287

Closed
ryanaltvater opened this issue Sep 8, 2022 · 4 comments
Closed

Duplicate negative selectors with "-" part of prefix #9287

ryanaltvater opened this issue Sep 8, 2022 · 4 comments
Assignees

Comments

@ryanaltvater
Copy link

What version of Tailwind CSS are you using?

3.1.8

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

Gulp 4.0.2

What version of Node.js are you using?

18.4.0

What browser are you using?

Brave

What operating system are you using?

macOS

Describe your issue

I'm looking at my generated CSS output and I'm seeing duplicate negative selectors being written 2 different ways where the "-" is before and after the prefix. When I remove the prefix from my configuration or change it to a "_", the duplicates don't exist. This seems to only happen with anything that has a negative value (margin, z-index, etc), when a "-" prefix is defined. Below is an example of it happening with margin.

.dx--my-0 {
    margin-top: -0px;
    margin-bottom: -0px
}
.dx--my-1 {
    margin-top: -8px;
    margin-bottom: -8px;
}
.-dx-my-0 {
    margin-top: -0px;
    margin-bottom: -0px
}
.-dx-my-1 {
    margin-top: -8px;
    margin-bottom: -8px
}

I did find this from February, and it reads very similarly to the issue I'm experiencing.

@thecrypticace
Copy link
Contributor

Hey! 👋

Any chance you could provide a reproduction? I can't reproduce this issue on Tailwind Play. We do allow both usages for backwards compatibility purposes (the dash before and after the prefix) however we should only be outputting utilities for the ones you are actually using.

@thecrypticace thecrypticace self-assigned this Sep 8, 2022
@ryanaltvater
Copy link
Author

ryanaltvater commented Sep 9, 2022

So I just did a fresh installation with the below configuration, and got the same result of .-dx-* and .dx--* for utility classes with negative values.

module.exports = {
  content: [],
  corePlugins: [
      'backgroundColor',
      'fontFamily',
      'fontSize',
      'fontStyle',
      'fontWeight',
      'margin',
      'padding',
      'preflight',
      'textColor',
      'zIndex',
  ],
  prefix: 'dx-',
  safelist: [{
      pattern: /.*/,
  }],
}

For a little bit of context, I'm creating a CSS file filled with utilities that are always available within our CMS, to build pages on the fly. The safelist pattern tells Tailwind to include all utilities and then the corePlugins allow me to include only the utilities that I actually want. While I don't think any of that has to do with the issue of output for negative value utilities, I figured I'd provide a little context so you're not confused as to why the config is set up the way that it is. So far, it's giving me exactly what I need except for the prefix oddity. :)

@thecrypticace
Copy link
Contributor

Ah I see. So, in this case, Tailwind CSS is acting correctly. We match and generate both utilities for backwards compat purposes and your safelist pattern is telling Tailwind CSS to match absolutely everything it knows how to generate. You'll want to modify your safelist to exclude one or the other:

  • Exclude dx-- negative utilities: /^-?dx-(?!-).+$/
  • Exclude -dx- negative utilities: /^dx-.+$/

You'll note I also anchored the utilities. This is generally a better idea if you need to not match everything otherwise you could happen to match something inside the name of a utility which can lead to unexpected matches (depends on your pattern tho)

@ryanaltvater
Copy link
Author

This is exactly the help I was hoping for. Your solution worked perfectly. 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

No branches or pull requests

2 participants