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

Update color parsing and formatting (#5442)

Browse source 
* Replace `culori` with simple color parser

* Use space-separated color syntax

* Update default color values to use space-separated syntax

* Update separator regex

* Fix tests

* add tests for the new `color` util

Also slightly modified the `color` util itself to take `transparent`
into account and also format every value as a string for consistency.

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Brad Cornes 2021-09-09 15:15:53 +01:00 • committed by GitHub
parent 12fa78b9ca
commit 4919cbfbb8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 409 additions and 302 deletions
Download patch file Download diff file Expand all files Collapse all files

10
tests/plugins/divide.test.js
View file

@ -12,7 +12,7 @@ it('should add the divide styles for divide-y and a default border color', () =>
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
@ -36,7 +36,7 @@ it('should add the divide styles for divide-x and a default border color', () =>
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
@ -60,7 +60,7 @@ it('should add the divide styles for divide-y-reverse and a default border color
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
@ -82,7 +82,7 @@ it('should add the divide styles for divide-x-reverse and a default border color
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
@ -104,7 +104,7 @@ it('should only inject the base styles once if we use divide and border at the s
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {

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

@ -38,7 +38,7 @@ test('opacity variables are given to colors defined as closures', () => {
}
.from-secondary {
--tw-gradient-from: hsl(10, 50%, 50%);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(10 50% 50% / 0));
}
.via-primary {
--tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31),
@ -46,7 +46,7 @@ test('opacity variables are given to colors defined as closures', () => {
}
.via-secondary {
--tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%),
var(--tw-gradient-to, hsla(10, 50%, 50%, 0));
var(--tw-gradient-to, hsl(10 50% 50% / 0));
}
.to-primary {
--tw-gradient-to: rgb(31, 31, 31);
@ -60,7 +60,7 @@ test('opacity variables are given to colors defined as closures', () => {
}
.text-secondary {
--tw-text-opacity: 1;
color: hsla(10, 50%, 50%, var(--tw-text-opacity));
color: hsl(10 50% 50% / var(--tw-text-opacity));
}
.text-opacity-50 {
--tw-text-opacity: 0.5;