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

Purge layers by default, deprecate conservative mode #2288

Merged
merged 3 commits into from
Sep 2, 2020

Conversation

adamwathan
Copy link
Member

This PR introduces a new layers mode to the PurgeCSS configuration, and makes it the default, deprecating the existing conservative mode.

When configured manually, it looks like this:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'layers',
    layers: ['base', 'components', 'utilities'],
    content: [
      // Paths...
    ]
  }
}

It allows you to tell Tailwind which layers it should purge (base, components, and/or utilities). The old conservative mode was the equivalent of this:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'layers',
    layers: ['utilities'],
    content: [
      // Paths...
    ]
  }
}

Now that we've added the preserveHtmlElements option and default it to true, I feel like it's safe to purge all layers by default.

It's important to note that this will only purge rules that are explicitly stored in a layer, which is rules that are added by a plugin, or rules that are added via custom CSS but explicitly wrapped in a @layer at-rule:

/* Won't be purged, not in a layer */
.foo {
  color: blue
}

/* Will be purged, explicitly given a layer */
@layer utilities {
  .bar {
    color: red
  }
}

This PR makes @layer a real public API, whereas before it was sort of private.

You can still use mode: 'all' to purge all of your CSS, including custom CSS and any third party CSS:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'all',
    content: [
      // Paths...
    ]
  }
}

Overall, the goal of this PR is to standardize on some fundamental terminology and core concepts, as well as to purge more aggressively now that it's safe to do thanks to preserveHtmlElements.

Purging using the new layers mode by default is behind a future flag called purgeLayersByDefault. Without enabling that flag, the mode will be conservative by default, and the user will see a warning that that mode has been deprecated.

// tailwind.config.js
module.exports = {
  future: {
    purgeLayersByDefault: true
  },
  // ...
}

One other thing worth noting (that will affect nobody really) is that prior to this PR, any custom CSS wrapped in a @responsive at-rule was automatically considered part of the utilities layer. This is no longer the case — anything without an explicit layer simply has no layer and won't be considered for purging without setting mode to all. The only side effect of this is that you might have a slightly larger production CSS file by default now, because your custom utilities that used @responsive were being purged by the "conservative" mode before and are not being purged by the "conservative" mode now.

You can fix this by just wrapping any custom utilities in @layer utilities { ... }:

/* Before this was automatically in the "utilities" layer */
@responsive {
  .foo {
    color: blue
  }
}

/* Now need to be explicit */
@layer utilities {
  @responsive {
    .foo {
      color: blue
    }
  }
}

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 this pull request may close these issues.

None yet

1 participant