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

39
tests/basic-usage.test.css
View file

@ -12,14 +12,14 @@
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-color: rgb(229 231 235 / var(--tw-border-opacity));
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
@ -409,7 +409,7 @@
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}
.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 0.5;
@ -463,30 +463,30 @@
}
.border-black {
--tw-border-opacity: 1;
border-color: rgba(0, 0, 0, var(--tw-border-opacity));
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-t-black {
--tw-border-opacity: 1;
border-top-color: rgba(0, 0, 0, var(--tw-border-opacity));
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-r-black {
--tw-border-opacity: 1;
border-right-color: rgba(0, 0, 0, var(--tw-border-opacity));
border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-b-black {
--tw-border-opacity: 1;
border-bottom-color: rgba(0, 0, 0, var(--tw-border-opacity));
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-l-black {
--tw-border-opacity: 1;
border-left-color: rgba(0, 0, 0, var(--tw-border-opacity));
border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-opacity-10 {
--tw-border-opacity: 0.1;
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
@ -496,11 +496,10 @@
}
.from-red-300 {
--tw-gradient-from: #fca5a5;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0));
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0));
}
.via-purple-200 {
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff,
var(--tw-gradient-to, rgba(233, 213, 255, 0));
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0));
}
.to-blue-400 {
--tw-gradient-to: #60a5fa;
@ -639,7 +638,7 @@
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgba(99, 102, 241, var(--tw-text-opacity));
color: rgb(99 102 241 / var(--tw-text-opacity));
}
.text-opacity-10 {
--tw-text-opacity: 0.1;
@ -653,7 +652,7 @@
}
.placeholder-green-300::placeholder {
--tw-placeholder-opacity: 1;
color: rgba(134, 239, 172, var(--tw-placeholder-opacity));
color: rgb(134 239 172 / var(--tw-placeholder-opacity));
}
.placeholder-opacity-60::placeholder {
--tw-placeholder-opacity: 0.6;
@ -680,17 +679,17 @@
mix-blend-mode: saturation;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.shadow-lg {
--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);
}
@ -718,7 +717,7 @@
}
.ring-white {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}
.ring-opacity-40 {
--tw-ring-opacity: 0.4;
@ -742,8 +741,8 @@
filter: var(--tw-filter);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
filter: var(--tw-filter);
}
.grayscale {