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.

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

Fix !important selectors not being classified as valid class inside safelist config #9791

Merged
merged 6 commits into from Nov 9, 2022
Merged

Fix !important selectors not being classified as valid class inside safelist config #9791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7dd5b70
fix !imp selector not safelisted as valid class
akbng Nov 9, 2022
b7b8c35
add tests for !imp selectors in safelist config
akbng Nov 9, 2022
fc69d6c
add test to check for invalid variants
akbng Nov 9, 2022
f6af5e0
Only check important utilities for patterns that include a `!`
thecrypticace Nov 9, 2022
305b366
Merge branch 'master' into patch-2
thecrypticace Nov 9, 2022
243ed9b
Update changelog
thecrypticace Nov 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fixed use of `raw` content in the CLI ([#9773](https://github.com/tailwindlabs/tailwindcss/pull/9773))
- Pick up changes from files that are both context and content deps ([#9787](https://github.com/tailwindlabs/tailwindcss/pull/9787))
- Sort pseudo-elements ONLY after classes when using variants and `@apply` ([#9765](https://github.com/tailwindlabs/tailwindcss/pull/9765))
- Support important utilities in the safelist (pattern must include a `!`) ([#9791](https://github.com/tailwindlabs/tailwindcss/pull/9791))

## [3.2.2] - 2022-11-04

Expand Down
5 changes: 5 additions & 0 deletions src/lib/setupContextUtils.js
View file
Open in desktop
Expand Up @@ -825,6 +825,7 @@ function registerPlugins(plugins, context) {
if (checks.length > 0) {
let patternMatchingCount = new Map()
let prefixLength = context.tailwindConfig.prefix.length
let checkImportantUtils = checks.some((check) => check.pattern.source.includes('!'))

for (let util of classList) {
let utils = Array.isArray(util)
Expand Down Expand Up @@ -861,6 +862,10 @@ function registerPlugins(plugins, context) {
]
}

if (checkImportantUtils && options?.respectImportant) {
classes = [...classes, ...classes.map((cls) => '!' + cls)]
}

return classes
})()
: [util]
Expand Down
228 changes: 228 additions & 0 deletions tests/safelist.test.js
View file
Open in desktop
Expand Up @@ -195,6 +195,35 @@ it('should not safelist when an sparse/holey list is provided', () => {
})
})

it('should not safelist any invalid variants if provided', () => {
let config = {
content: [{ raw: html`<div class="uppercase"></div>` }],
safelist: [
{
pattern: /^bg-(red)-(100|200)$/,
variants: ['foo', 'bar'],
},
],
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

.uppercase {
text-transform: uppercase;
}
`)
})
})

it('should safelist negatives based on a pattern regex', () => {
let config = {
content: [{ raw: html`<div class="uppercase"></div>` }],
Expand Down Expand Up @@ -304,3 +333,202 @@ it('should safelist negatives based on a pattern regex', () => {
`)
})
})

it('should safelist pattern regex with !important selector', () => {
let config = {
content: [{ raw: html`<div class="uppercase"></div>` }],
safelist: [{ pattern: /^!grid-cols-(4|5|6)$/ }],
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.\!grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.\!grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.\!grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.uppercase {
text-transform: uppercase;
}
`)
})
})

it('should safelist pattern regex with custom prefix along with !important selector', () => {
let config = {
prefix: 'tw-',
content: [{ raw: html`<div class="tw-uppercase"></div>` }],
safelist: [{ pattern: /^!tw-grid-cols-(4|5|6)$/ }],
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.\!tw-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.\!tw-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.\!tw-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.tw-uppercase {
text-transform: uppercase;
}
`)
})
})

it('should safelist pattern regex having !important selector with variants', () => {
let config = {
content: [{ raw: html`<div class="uppercase"></div>` }],
safelist: [
{
pattern: /^!bg-gray-(500|600|700|800)$/,
variants: ['hover'],
},
],
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.\!bg-gray-500 {
--tw-bg-opacity: 1 !important;
background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
}

.\!bg-gray-600 {
--tw-bg-opacity: 1 !important;
background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
}

.\!bg-gray-700 {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}

.\!bg-gray-800 {
--tw-bg-opacity: 1 !important;
background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
}

.uppercase {
text-transform: uppercase;
}

.hover\:\!bg-gray-500:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
}

.hover\:\!bg-gray-600:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
}

.hover\:\!bg-gray-700:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
}

.hover\:\!bg-gray-800:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
}
`)
})
})

it('should safelist multiple patterns with !important selector', () => {
let config = {
content: [{ raw: html`<div class="uppercase"></div>` }],
safelist: [
{
pattern: /^!text-gray-(700|800|900)$/,
variants: ['hover'],
},
{
pattern: /^!bg-gray-(200|300|400)$/,
variants: ['hover'],
},
],
}

return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.\!bg-gray-200 {
--tw-bg-opacity: 1 !important;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
}

.\!bg-gray-300 {
--tw-bg-opacity: 1 !important;
background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
}

.\!bg-gray-400 {
--tw-bg-opacity: 1 !important;
background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
}

.uppercase {
text-transform: uppercase;
}

.\!text-gray-700 {
--tw-text-opacity: 1 !important;
color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}

.\!text-gray-800 {
--tw-text-opacity: 1 !important;
color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
}

.\!text-gray-900 {
--tw-text-opacity: 1 !important;
color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
}

.hover\:\!bg-gray-200:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
}

.hover\:\!bg-gray-300:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
}

.hover\:\!bg-gray-400:hover {
--tw-bg-opacity: 1 !important;
background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
}

.hover\:\!text-gray-700:hover {
--tw-text-opacity: 1 !important;
color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}

.hover\:\!text-gray-800:hover {
--tw-text-opacity: 1 !important;
color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
}

.hover\:\!text-gray-900:hover {
--tw-text-opacity: 1 !important;
color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
}
`)
})
})