mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
d093dce0fb
This works around an issue in Chrome where `::selection` does not read from variables defined on `::selection` thus breaking all uses of color utilities with the selection variant. e.g. `selection::bg-red-200`. We now add a fallback value of `1` to all uses of `var(--tw-bg-opacity)`, `var(--tw-text-opacity)`, `var(--tw-border-opacity)`, etc… since Chrome treats the variable as if it did not exist because it's not defined on the parent. In Chrome 131 (until the change is rolled back) existing utilities like these will not work: - `selection:text-opacity-50` - `selection:[--tw-text-opacity:0.5]` Fixes #15000 --------- Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
108 lines
2.4 KiB
JavaScript
108 lines
2.4 KiB
JavaScript
import { run, html, css } from './util/run'
|
|
|
|
it('can block classes matched literally', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div
|
|
class="font-bold uppercase sm:hover:text-sm hover:text-sm bg-red-500/50 my-custom-class"
|
|
></div>`,
|
|
},
|
|
],
|
|
blocklist: ['font', 'uppercase', 'hover:text-sm', 'bg-red-500/50', 'my-custom-class'],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
.my-custom-class {
|
|
color: red;
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
.my-custom-class {
|
|
color: red;
|
|
}
|
|
@media (min-width: 640px) {
|
|
.sm\:hover\:text-sm:hover {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
}
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('can block classes inside @layer', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="font-bold my-custom-class"></div>`,
|
|
},
|
|
],
|
|
blocklist: ['my-custom-class'],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
@layer utilities {
|
|
.my-custom-class {
|
|
color: red;
|
|
}
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
return expect(result.css).toMatchFormattedCss(css`
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
it('blocklists do NOT support regexes', async () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="font-bold bg-[#f00d1e]"></div>` }],
|
|
blocklist: [/^bg-\[[^]+\]$/],
|
|
}
|
|
|
|
let result = await run('@tailwind utilities', config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.bg-\[\#f00d1e\] {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(240 13 30 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
|
|
expect().toHaveBeenWarnedWith(['blocklist-invalid'])
|
|
})
|
|
|
|
it('can block classes generated by the safelist', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="font-bold"></div>` }],
|
|
safelist: [{ pattern: /^bg-red-(400|500)$/ }],
|
|
blocklist: ['bg-red-500'],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.bg-red-400 {
|
|
--tw-bg-opacity: 1;
|
|
background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
|
|
}
|
|
.font-bold {
|
|
font-weight: 700;
|
|
}
|
|
`)
|
|
})
|
|
})
|