Skip to content

Purged attribute selectors #12

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.

Sign up for GitHub

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

Jump to bottom
Closed
ayrton opened this issue Nov 20, 2020 · 8 comments
Closed

Purged attribute selectors #12

ayrton opened this issue Nov 20, 2020 · 8 comments

Comments

@ayrton
Copy link

ayrton commented Nov 20, 2020

Looks like PurgeCSS automatically purges the attribute selectors eg [type='checkbox'].

I had to add the following rule to the safelist:

module.exports = {
  plugins: [require("@tailwindcss/forms")],
  purge: {
    options: {
      safelist: [
        "type", // [type='checkbox']
      ],
    },
    preserveHtmlElements: true,
  },
};

Should this be something that is set up out of the box? I'm happy to PR if you can point me into the right direction
@YashVadhadiya
Copy link

YashVadhadiya commented Nov 20, 2020 •
edited
Loading

Try this.

<html>
  <body>
    <div class="component"></div>
  </body>
</html>

following CSS

.component { color: black; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

Passing the above HTML and CSS through the CLI
The resulting CSS is as followed

.component { color: black; } [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

The generated CSS should be

.component { color: black; }

I found this here.

@fulljames
Copy link

I was experiencing this on a [type=password] while compiling CSS for a Shopify theme - turned out the content rules weren't looking correctly into sub-folders so it was skipping the file.

@alexbu92
Copy link

@fulljames how did you solve this?

@fulljames
Copy link

@fulljames how did you solve this?

I tweaked the content section of the purge settings tailwind.config.js, e.g. changing './templates/*.liquid' to './templates/**/*.liquid' to look into sub-directories.

  purge: {
    enabled: true,
    content: [
      './layout/*.liquid',
      './templates/**/*.liquid',
      './sections/*.liquid',
      './snippets/*.liquid',
    ],
  },

camelpunch added a commit to code-supply/code-supply that referenced this issue Dec 1, 2020
@camelpunch
Force padding on the only checkbox we have
0f0b16b 
I can't spend the rest of my life figuring out why this tailwind forms
style is being purged. Hi.

Passive-aggressive link:

tailwindlabs/tailwindcss-forms#12
@dzajic
Copy link

dzajic commented Jan 26, 2021

@fulljames how did you solve this?

I tweaked the content section of the purge settings tailwind.config.js, e.g. changing './templates/*.liquid' to './templates/**/*.liquid' to look into sub-directories.

  purge: {
    enabled: true,
    content: [
      './layout/*.liquid',
      './templates/**/*.liquid',
      './sections/*.liquid',
      './snippets/*.liquid',
    ],
  },

@fulljames We're already doing this and are still experiencing the issue with a password field not getting the same styles applied as other input types. 😕

@ayrton
Copy link
Author

ayrton commented Jan 26, 2021

@fulljames how did you solve this?

I tweaked the content section of the purge settings tailwind.config.js, e.g. changing './templates/*.liquid' to './templates/**/*.liquid' to look into sub-directories.

purge: {

enabled: true,

content: [

  './layout/*.liquid',

  './templates/**/*.liquid',

  './sections/*.liquid',

  './snippets/*.liquid',

],

},

@fulljames We're already doing this and are still experiencing the issue with a password field not getting the same styles applied as other input types. 😕

Did you try adding "type" to the allowlist? (See snippet of the description above)

@dzajic
Copy link

dzajic commented Jan 27, 2021

We've decided to go and update all our dependencies first (a bit of a nightmare). Once we achieve that, we'll see where we stand (it could be a while), but we'll try the allowlist if we need to.
For now, this isn't a major problem as it only affects one infrequently used form in our back office web app.

@iv-mexx iv-mexx mentioned this issue Feb 19, 2021
Closed
@RobinMalfait
Copy link
Member

Hey! Thank you for your bug report!
Much appreciated! 🙏

Make sure that you provide all the paths to your files/content in purge: [] or purge: { content: [] }, otherwise purge will indeed purge these styles.
https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@dzajic @ayrton @fulljames @RobinMalfait @alexbu92 @YashVadhadiya