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

14
tests/apply.test.css
View file

@ -1,7 +1,7 @@
.basic-example {
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
@ -94,7 +94,7 @@
.selectors {
border-radius: 0.375rem;
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
@ -142,12 +142,12 @@
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
--tw-ordinal: ordinal;
--tw-numeric-spacing: tabular-nums;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.complex-utilities:hover {
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
@ -192,13 +192,13 @@
padding-right: 1rem;
font-weight: 700;
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.btn-blue:hover {
--tw-bg-opacity: 1;
background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.recursive-apply-a {
font-weight: 900;