wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add gradient color stop position utilities (#10886)

Browse source 
* add gradient color stop positions

* update tests to include gradient position color stop reset values

* add dedicated color stop position tests

* use `%` sign in the name of the uility

* update changelog

* ensure `length` values and css variables work
This commit is contained in:
Robin Malfait 2023-03-28 15:38:30 +02:00
parent 0bfee99ed3
commit 51157717da
No known key found for this signature in database
GPG key ID: 92F53D68B9041AFE
14 changed files with 359 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

155
tests/plugins/gradientColorStops.test.js
View file

@ -34,28 +34,40 @@ crosscheck(({ stable, oxide }) => {
return run('@tailwind utilities', config).then((result) => {
stable.expect(result.css).toMatchFormattedCss(css`
.from-primary {
--tw-gradient-from: #1f1f1f;
--tw-gradient-to: #1f1f1f00;
--tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
--tw-gradient-from-position: ;
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-from-position);
--tw-gradient-to-position: ;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary {
--tw-gradient-from: #bf5540;
--tw-gradient-to: #bf554000;
--tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
--tw-gradient-from-position: ;
--tw-gradient-to: #bf554000 var(--tw-gradient-from-position);
--tw-gradient-to-position: ;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-primary {
--tw-gradient-to: #1f1f1f00;
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f, var(--tw-gradient-to);
--tw-gradient-via-position: ;
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
--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;
--tw-gradient-stops: var(--tw-gradient-from), #bf5540, var(--tw-gradient-to);
--tw-gradient-via-position: ;
--tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
--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;
--tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
--tw-gradient-to-position: ;
}
.to-secondary {
--tw-gradient-to: #bf5540;
--tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
--tw-gradient-to-position: ;
}
.text-primary {
--tw-text-opacity: 1;
@ -71,28 +83,40 @@ crosscheck(({ stable, oxide }) => {
`)
oxide.expect(result.css).toMatchFormattedCss(css`
.from-primary {
--tw-gradient-from: #1f1f1f;
--tw-gradient-to: #1f1f1f00;
--tw-gradient-from: #1f1f1f var(--tw-gradient-from-position);
--tw-gradient-from-position: ;
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-from-position);
--tw-gradient-to-position: ;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary {
--tw-gradient-from: #bf5540;
--tw-gradient-to: #bf554000;
--tw-gradient-from: #bf5540 var(--tw-gradient-from-position);
--tw-gradient-from-position: ;
--tw-gradient-to: #bf554000 var(--tw-gradient-from-position);
--tw-gradient-to-position: ;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-primary {
--tw-gradient-to: #1f1f1f00;
--tw-gradient-stops: var(--tw-gradient-from), #1f1f1f, var(--tw-gradient-to);
--tw-gradient-via-position: ;
--tw-gradient-to: #1f1f1f00 var(--tw-gradient-to-position);
--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;
--tw-gradient-stops: var(--tw-gradient-from), #bf5540, var(--tw-gradient-to);
--tw-gradient-via-position: ;
--tw-gradient-to: #bf554000 var(--tw-gradient-to-position);
--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;
--tw-gradient-to: #1f1f1f var(--tw-gradient-to-position);
--tw-gradient-to-position: ;
}
.to-secondary {
--tw-gradient-to: #bf5540;
--tw-gradient-to: #bf5540 var(--tw-gradient-to-position);
--tw-gradient-to-position: ;
}
.text-primary {
color: #1f1f1f;
@ -103,4 +127,95 @@ crosscheck(({ stable, oxide }) => {
`)
})
})
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-from-position: ;
--tw-gradient-to: #fff0 var(--tw-gradient-from-position);
--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-from-position: ;
--tw-gradient-to: #ef444400 var(--tw-gradient-from-position);
--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-via-position: ;
--tw-gradient-to: #fff0 var(--tw-gradient-to-position);
--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-via-position: ;
--tw-gradient-to: #ec489900 var(--tw-gradient-to-position);
--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);
--tw-gradient-to-position: ;
}
.to-violet-400 {
--tw-gradient-to: #a78bfa var(--tw-gradient-to-position);
--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;
}
`)
})
})
})