archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add support for alpha values in safelist (#8774)

Browse Source 
Co-authored-by: Petr Novak <petr.nmn.novak@gmail.com>
This commit is contained in:
Jordan Pittman 2022-07-04 16:37:38 -04:00 committed by GitHub
parent f135bfa3e5
commit 102977530e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 121 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/setupContextUtils.js
View File

@ -762,6 +762,17 @@ function registerPlugins(plugins, context) {
]
}
if ([].concat(options?.type).includes('color')) {
classes = [
...classes,
...classes.flatMap((cls) =>
Object.keys(context.tailwindConfig.theme.opacity).map(
(opacity) => `${cls}/${opacity}`
)
),
]
}
return classes
})()
: [util]

23
tests/getClassList.test.js
View File

@ -59,3 +59,26 @@ it('should generate every possible class while handling negatives and prefixes',
expect(classes).not.toContain('-tw-m-DEFAULT')
})
it('should not generate utilities with opacity by default', () => {
let config = {}
let context = createContext(resolveConfig(config))
let classes = context.getClassList()
expect(classes).not.toContain('bg-red-500/50')
})
it('should not generate utilities with opacity even if safe-listed', () => {
let config = {
safelist: [
{
pattern: /^bg-red-(400|500)(\/(40|50))?$/,
},
],
}
let context = createContext(resolveConfig(config))
let classes = context.getClassList()
expect(classes).not.toContain('bg-red-500/50')
})

92
tests/safelist.test.js
View File

@ -51,7 +51,7 @@ it('should safelist based on a pattern regex', () => {
content: [{ raw: html`<div class="uppercase"></div>` }],
safelist: [
{
pattern: /bg-(red)-(100|200)/,
pattern: /^bg-(red)-(100|200)$/,
variants: ['hover'],
},
],
@ -92,15 +92,15 @@ it('should not generate duplicates', () => {
safelist: [
'uppercase',
{
pattern: /bg-(red)-(100|200)/,
pattern: /^bg-(red)-(100|200)$/,
variants: ['hover'],
},
{
pattern: /bg-(red)-(100|200)/,
pattern: /^bg-(red)-(100|200)$/,
variants: ['hover'],
},
{
pattern: /bg-(red)-(100|200)/,
pattern: /^bg-(red)-(100|200)$/,
variants: ['hover'],
},
],
@ -141,7 +141,7 @@ it('should safelist when using a custom prefix', () => {
content: [{ raw: html`<div class="tw-uppercase"></div>` }],
safelist: [
{
pattern: /tw-bg-red-(100|200)/g,
pattern: /^tw-bg-red-(100|200)$/g,
},
],
}
@ -222,3 +222,85 @@ it('should safelist negatives based on a pattern regex', () => {
`)
})
})
it('should safelist negatives based on a pattern regex', () => {
let config = {
content: [{ raw: html`<div class="uppercase"></div>` }],
safelist: [
{
pattern: /^bg-red-(400|500)(\/(40|50))?$/,
variants: ['hover'],
},
{
pattern: /^(fill|ring|text)-red-200\/50$/,
variants: ['hover'],
},
],
}
return run('@tailwind utilities', config).then((result) => {
return expect(result.css).toMatchCss(css`
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-red-400\/40 {
background-color: rgb(248 113 113 / 0.4);
}
.bg-red-400\/50 {
background-color: rgb(248 113 113 / 0.5);
}
.bg-red-500\/40 {
background-color: rgb(239 68 68 / 0.4);
}
.bg-red-500\/50 {
background-color: rgb(239 68 68 / 0.5);
}
.fill-red-200\/50 {
fill: rgb(254 202 202 / 0.5);
}
.uppercase {
text-transform: uppercase;
}
.text-red-200\/50 {
color: rgb(254 202 202 / 0.5);
}
.ring-red-200\/50 {
--tw-ring-color: rgb(254 202 202 / 0.5);
}
.hover\:bg-red-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.hover\:bg-red-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.hover\:bg-red-400\/40:hover {
background-color: rgb(248 113 113 / 0.4);
}
.hover\:bg-red-400\/50:hover {
background-color: rgb(248 113 113 / 0.5);
}
.hover\:bg-red-500\/40:hover {
background-color: rgb(239 68 68 / 0.4);
}
.hover\:bg-red-500\/50:hover {
background-color: rgb(239 68 68 / 0.5);
}
.hover\:fill-red-200\/50:hover {
fill: rgb(254 202 202 / 0.5);
}
.hover\:text-red-200\/50:hover {
color: rgb(254 202 202 / 0.5);
}
.hover\:ring-red-200\/50:hover {
--tw-ring-color: rgb(254 202 202 / 0.5);
}
`)
})
})