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>
156 lines
4.9 KiB
JavaScript
156 lines
4.9 KiB
JavaScript
import { run, html, css } from '../util/run'
|
|
|
|
test('opacity variables are given to colors defined as closures', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div
|
|
class="text-primary text-secondary from-primary from-secondary via-primary via-secondary to-primary to-secondary text-opacity-50"
|
|
></div>`,
|
|
},
|
|
],
|
|
theme: {
|
|
colors: {
|
|
primary: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(31,31,31,${opacityValue})`
|
|
}
|
|
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(31,31,31,var(${opacityVariable},1))`
|
|
}
|
|
|
|
return `rgb(31,31,31)`
|
|
},
|
|
secondary: 'hsl(10, 50%, 50%)',
|
|
},
|
|
opacity: {
|
|
50: '0.5',
|
|
},
|
|
},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.from-primary {
|
|
--tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
|
|
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.from-secondary {
|
|
--tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
|
|
--tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.via-primary {
|
|
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f var(--tw-gradient-via-position),
|
|
var(--tw-gradient-to);
|
|
}
|
|
.via-secondary {
|
|
--tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), #bf5540 var(--tw-gradient-via-position),
|
|
var(--tw-gradient-to);
|
|
}
|
|
.to-primary {
|
|
--tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
|
|
}
|
|
.to-secondary {
|
|
--tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
|
|
}
|
|
.text-primary {
|
|
--tw-text-opacity: 1;
|
|
color: rgba(31, 31, 31, var(--tw-text-opacity, 1));
|
|
}
|
|
.text-secondary {
|
|
--tw-text-opacity: 1;
|
|
color: hsl(10 50% 50% / var(--tw-text-opacity, 1));
|
|
}
|
|
.text-opacity-50 {
|
|
--tw-text-opacity: 0.5;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('gradient color stop position', () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`
|
|
<div>
|
|
<div
|
|
class="bg-gradient-to-r from-red-500 from-50 via-pink-500 via-75 to-violet-400 to-80"
|
|
></div>
|
|
<div class="from-10% from-[11%] from-[12px] from-[--from-value]"></div>
|
|
<div class="via-20% via-[12%] via-[123px] via-[--via-value]"></div>
|
|
<div class="to-30% to-[13%] to-[14px] to-[--to-value]"></div>
|
|
</div>
|
|
`,
|
|
},
|
|
],
|
|
theme: {},
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.bg-gradient-to-r {
|
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
}
|
|
.from-\[--from-value\] {
|
|
--tw-gradient-from: var(--from-value) var(--tw-gradient-from-position);
|
|
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.from-red-500 {
|
|
--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
|
|
--tw-gradient-to: #ef444400 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
.from-10\% {
|
|
--tw-gradient-from-position: 10%;
|
|
}
|
|
.from-\[11\%\] {
|
|
--tw-gradient-from-position: 11%;
|
|
}
|
|
.from-\[12px\] {
|
|
--tw-gradient-from-position: 12px;
|
|
}
|
|
.via-\[--via-value\] {
|
|
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from),
|
|
var(--via-value) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
}
|
|
.via-pink-500 {
|
|
--tw-gradient-to: #ec489900 var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position),
|
|
var(--tw-gradient-to);
|
|
}
|
|
.via-20\% {
|
|
--tw-gradient-via-position: 20%;
|
|
}
|
|
.via-\[12\%\] {
|
|
--tw-gradient-via-position: 12%;
|
|
}
|
|
.via-\[123px\] {
|
|
--tw-gradient-via-position: 123px;
|
|
}
|
|
.to-\[--to-value\] {
|
|
--tw-gradient-to: var(--to-value) var(--tw-gradient-to-position);
|
|
}
|
|
.to-violet-400 {
|
|
--tw-gradient-to: #a78bfa var(--tw-gradient-to-position);
|
|
}
|
|
.to-30\% {
|
|
--tw-gradient-to-position: 30%;
|
|
}
|
|
.to-\[13\%\] {
|
|
--tw-gradient-to-position: 13%;
|
|
}
|
|
.to-\[14px\] {
|
|
--tw-gradient-to-position: 14px;
|
|
}
|
|
`)
|
|
})
|
|
})
|