From 2558618a940e2910df72c239de715fcb264bee0e Mon Sep 17 00:00:00 2001 From: Philipp Bosch Date: Thu, 12 Mar 2020 11:31:26 +0100 Subject: [PATCH 1/2] Add `current` to default color palette as discussed in #998 --- stubs/defaultConfig.stub.js | 1 + 1 file changed, 1 insertion(+) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 1a1c81894..810bddd0c 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -11,6 +11,7 @@ module.exports = { }, colors: { transparent: 'transparent', + current: 'currentColor', black: '#000', white: '#fff', From 59c8e111c2604e3adf40ad5430bfabdf4a4e3b8e Mon Sep 17 00:00:00 2001 From: Philipp Bosch Date: Sat, 14 Mar 2020 10:29:22 +0100 Subject: [PATCH 2/2] Adjust test fixture for currentColor --- .../fixtures/tailwind-output-important.css | 220 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 220 ++++++++++++++++++ 2 files changed, 440 insertions(+) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index f27919397..498410ff9 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -672,6 +672,10 @@ video { background-color: transparent !important; } +.bg-current { + background-color: currentColor !important; +} + .bg-black { background-color: #000 !important; } @@ -1044,6 +1048,10 @@ video { background-color: transparent !important; } +.hover\:bg-current:hover { + background-color: currentColor !important; +} + .hover\:bg-black:hover { background-color: #000 !important; } @@ -1416,6 +1424,10 @@ video { background-color: transparent !important; } +.focus\:bg-current:focus { + background-color: currentColor !important; +} + .focus\:bg-black:focus { background-color: #000 !important; } @@ -1868,6 +1880,10 @@ video { border-color: transparent !important; } +.border-current { + border-color: currentColor !important; +} + .border-black { border-color: #000 !important; } @@ -2240,6 +2256,10 @@ video { border-color: transparent !important; } +.hover\:border-current:hover { + border-color: currentColor !important; +} + .hover\:border-black:hover { border-color: #000 !important; } @@ -2612,6 +2632,10 @@ video { border-color: transparent !important; } +.focus\:border-current:focus { + border-color: currentColor !important; +} + .focus\:border-black:focus { border-color: #000 !important; } @@ -5952,6 +5976,10 @@ video { color: transparent !important; } +.placeholder-current::placeholder { + color: currentColor !important; +} + .placeholder-black::placeholder { color: #000 !important; } @@ -6324,6 +6352,10 @@ video { color: transparent !important; } +.focus\:placeholder-current:focus::placeholder { + color: currentColor !important; +} + .focus\:placeholder-black:focus::placeholder { color: #000 !important; } @@ -6970,6 +7002,10 @@ video { color: transparent !important; } +.text-current { + color: currentColor !important; +} + .text-black { color: #000 !important; } @@ -7342,6 +7378,10 @@ video { color: transparent !important; } +.hover\:text-current:hover { + color: currentColor !important; +} + .hover\:text-black:hover { color: #000 !important; } @@ -7714,6 +7754,10 @@ video { color: transparent !important; } +.focus\:text-current:focus { + color: currentColor !important; +} + .focus\:text-black:focus { color: #000 !important; } @@ -10985,6 +11029,10 @@ video { background-color: transparent !important; } + .sm\:bg-current { + background-color: currentColor !important; + } + .sm\:bg-black { background-color: #000 !important; } @@ -11357,6 +11405,10 @@ video { background-color: transparent !important; } + .sm\:hover\:bg-current:hover { + background-color: currentColor !important; + } + .sm\:hover\:bg-black:hover { background-color: #000 !important; } @@ -11729,6 +11781,10 @@ video { background-color: transparent !important; } + .sm\:focus\:bg-current:focus { + background-color: currentColor !important; + } + .sm\:focus\:bg-black:focus { background-color: #000 !important; } @@ -12181,6 +12237,10 @@ video { border-color: transparent !important; } + .sm\:border-current { + border-color: currentColor !important; + } + .sm\:border-black { border-color: #000 !important; } @@ -12553,6 +12613,10 @@ video { border-color: transparent !important; } + .sm\:hover\:border-current:hover { + border-color: currentColor !important; + } + .sm\:hover\:border-black:hover { border-color: #000 !important; } @@ -12925,6 +12989,10 @@ video { border-color: transparent !important; } + .sm\:focus\:border-current:focus { + border-color: currentColor !important; + } + .sm\:focus\:border-black:focus { border-color: #000 !important; } @@ -16265,6 +16333,10 @@ video { color: transparent !important; } + .sm\:placeholder-current::placeholder { + color: currentColor !important; + } + .sm\:placeholder-black::placeholder { color: #000 !important; } @@ -16637,6 +16709,10 @@ video { color: transparent !important; } + .sm\:focus\:placeholder-current:focus::placeholder { + color: currentColor !important; + } + .sm\:focus\:placeholder-black:focus::placeholder { color: #000 !important; } @@ -17283,6 +17359,10 @@ video { color: transparent !important; } + .sm\:text-current { + color: currentColor !important; + } + .sm\:text-black { color: #000 !important; } @@ -17655,6 +17735,10 @@ video { color: transparent !important; } + .sm\:hover\:text-current:hover { + color: currentColor !important; + } + .sm\:hover\:text-black:hover { color: #000 !important; } @@ -18027,6 +18111,10 @@ video { color: transparent !important; } + .sm\:focus\:text-current:focus { + color: currentColor !important; + } + .sm\:focus\:text-black:focus { color: #000 !important; } @@ -21299,6 +21387,10 @@ video { background-color: transparent !important; } + .md\:bg-current { + background-color: currentColor !important; + } + .md\:bg-black { background-color: #000 !important; } @@ -21671,6 +21763,10 @@ video { background-color: transparent !important; } + .md\:hover\:bg-current:hover { + background-color: currentColor !important; + } + .md\:hover\:bg-black:hover { background-color: #000 !important; } @@ -22043,6 +22139,10 @@ video { background-color: transparent !important; } + .md\:focus\:bg-current:focus { + background-color: currentColor !important; + } + .md\:focus\:bg-black:focus { background-color: #000 !important; } @@ -22495,6 +22595,10 @@ video { border-color: transparent !important; } + .md\:border-current { + border-color: currentColor !important; + } + .md\:border-black { border-color: #000 !important; } @@ -22867,6 +22971,10 @@ video { border-color: transparent !important; } + .md\:hover\:border-current:hover { + border-color: currentColor !important; + } + .md\:hover\:border-black:hover { border-color: #000 !important; } @@ -23239,6 +23347,10 @@ video { border-color: transparent !important; } + .md\:focus\:border-current:focus { + border-color: currentColor !important; + } + .md\:focus\:border-black:focus { border-color: #000 !important; } @@ -26579,6 +26691,10 @@ video { color: transparent !important; } + .md\:placeholder-current::placeholder { + color: currentColor !important; + } + .md\:placeholder-black::placeholder { color: #000 !important; } @@ -26951,6 +27067,10 @@ video { color: transparent !important; } + .md\:focus\:placeholder-current:focus::placeholder { + color: currentColor !important; + } + .md\:focus\:placeholder-black:focus::placeholder { color: #000 !important; } @@ -27597,6 +27717,10 @@ video { color: transparent !important; } + .md\:text-current { + color: currentColor !important; + } + .md\:text-black { color: #000 !important; } @@ -27969,6 +28093,10 @@ video { color: transparent !important; } + .md\:hover\:text-current:hover { + color: currentColor !important; + } + .md\:hover\:text-black:hover { color: #000 !important; } @@ -28341,6 +28469,10 @@ video { color: transparent !important; } + .md\:focus\:text-current:focus { + color: currentColor !important; + } + .md\:focus\:text-black:focus { color: #000 !important; } @@ -31613,6 +31745,10 @@ video { background-color: transparent !important; } + .lg\:bg-current { + background-color: currentColor !important; + } + .lg\:bg-black { background-color: #000 !important; } @@ -31985,6 +32121,10 @@ video { background-color: transparent !important; } + .lg\:hover\:bg-current:hover { + background-color: currentColor !important; + } + .lg\:hover\:bg-black:hover { background-color: #000 !important; } @@ -32357,6 +32497,10 @@ video { background-color: transparent !important; } + .lg\:focus\:bg-current:focus { + background-color: currentColor !important; + } + .lg\:focus\:bg-black:focus { background-color: #000 !important; } @@ -32809,6 +32953,10 @@ video { border-color: transparent !important; } + .lg\:border-current { + border-color: currentColor !important; + } + .lg\:border-black { border-color: #000 !important; } @@ -33181,6 +33329,10 @@ video { border-color: transparent !important; } + .lg\:hover\:border-current:hover { + border-color: currentColor !important; + } + .lg\:hover\:border-black:hover { border-color: #000 !important; } @@ -33553,6 +33705,10 @@ video { border-color: transparent !important; } + .lg\:focus\:border-current:focus { + border-color: currentColor !important; + } + .lg\:focus\:border-black:focus { border-color: #000 !important; } @@ -36893,6 +37049,10 @@ video { color: transparent !important; } + .lg\:placeholder-current::placeholder { + color: currentColor !important; + } + .lg\:placeholder-black::placeholder { color: #000 !important; } @@ -37265,6 +37425,10 @@ video { color: transparent !important; } + .lg\:focus\:placeholder-current:focus::placeholder { + color: currentColor !important; + } + .lg\:focus\:placeholder-black:focus::placeholder { color: #000 !important; } @@ -37911,6 +38075,10 @@ video { color: transparent !important; } + .lg\:text-current { + color: currentColor !important; + } + .lg\:text-black { color: #000 !important; } @@ -38283,6 +38451,10 @@ video { color: transparent !important; } + .lg\:hover\:text-current:hover { + color: currentColor !important; + } + .lg\:hover\:text-black:hover { color: #000 !important; } @@ -38655,6 +38827,10 @@ video { color: transparent !important; } + .lg\:focus\:text-current:focus { + color: currentColor !important; + } + .lg\:focus\:text-black:focus { color: #000 !important; } @@ -41927,6 +42103,10 @@ video { background-color: transparent !important; } + .xl\:bg-current { + background-color: currentColor !important; + } + .xl\:bg-black { background-color: #000 !important; } @@ -42299,6 +42479,10 @@ video { background-color: transparent !important; } + .xl\:hover\:bg-current:hover { + background-color: currentColor !important; + } + .xl\:hover\:bg-black:hover { background-color: #000 !important; } @@ -42671,6 +42855,10 @@ video { background-color: transparent !important; } + .xl\:focus\:bg-current:focus { + background-color: currentColor !important; + } + .xl\:focus\:bg-black:focus { background-color: #000 !important; } @@ -43123,6 +43311,10 @@ video { border-color: transparent !important; } + .xl\:border-current { + border-color: currentColor !important; + } + .xl\:border-black { border-color: #000 !important; } @@ -43495,6 +43687,10 @@ video { border-color: transparent !important; } + .xl\:hover\:border-current:hover { + border-color: currentColor !important; + } + .xl\:hover\:border-black:hover { border-color: #000 !important; } @@ -43867,6 +44063,10 @@ video { border-color: transparent !important; } + .xl\:focus\:border-current:focus { + border-color: currentColor !important; + } + .xl\:focus\:border-black:focus { border-color: #000 !important; } @@ -47207,6 +47407,10 @@ video { color: transparent !important; } + .xl\:placeholder-current::placeholder { + color: currentColor !important; + } + .xl\:placeholder-black::placeholder { color: #000 !important; } @@ -47579,6 +47783,10 @@ video { color: transparent !important; } + .xl\:focus\:placeholder-current:focus::placeholder { + color: currentColor !important; + } + .xl\:focus\:placeholder-black:focus::placeholder { color: #000 !important; } @@ -48225,6 +48433,10 @@ video { color: transparent !important; } + .xl\:text-current { + color: currentColor !important; + } + .xl\:text-black { color: #000 !important; } @@ -48597,6 +48809,10 @@ video { color: transparent !important; } + .xl\:hover\:text-current:hover { + color: currentColor !important; + } + .xl\:hover\:text-black:hover { color: #000 !important; } @@ -48969,6 +49185,10 @@ video { color: transparent !important; } + .xl\:focus\:text-current:focus { + color: currentColor !important; + } + .xl\:focus\:text-black:focus { color: #000 !important; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index e459a84fb..8bc6e243c 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -672,6 +672,10 @@ video { background-color: transparent; } +.bg-current { + background-color: currentColor; +} + .bg-black { background-color: #000; } @@ -1044,6 +1048,10 @@ video { background-color: transparent; } +.hover\:bg-current:hover { + background-color: currentColor; +} + .hover\:bg-black:hover { background-color: #000; } @@ -1416,6 +1424,10 @@ video { background-color: transparent; } +.focus\:bg-current:focus { + background-color: currentColor; +} + .focus\:bg-black:focus { background-color: #000; } @@ -1868,6 +1880,10 @@ video { border-color: transparent; } +.border-current { + border-color: currentColor; +} + .border-black { border-color: #000; } @@ -2240,6 +2256,10 @@ video { border-color: transparent; } +.hover\:border-current:hover { + border-color: currentColor; +} + .hover\:border-black:hover { border-color: #000; } @@ -2612,6 +2632,10 @@ video { border-color: transparent; } +.focus\:border-current:focus { + border-color: currentColor; +} + .focus\:border-black:focus { border-color: #000; } @@ -5952,6 +5976,10 @@ video { color: transparent; } +.placeholder-current::placeholder { + color: currentColor; +} + .placeholder-black::placeholder { color: #000; } @@ -6324,6 +6352,10 @@ video { color: transparent; } +.focus\:placeholder-current:focus::placeholder { + color: currentColor; +} + .focus\:placeholder-black:focus::placeholder { color: #000; } @@ -6970,6 +7002,10 @@ video { color: transparent; } +.text-current { + color: currentColor; +} + .text-black { color: #000; } @@ -7342,6 +7378,10 @@ video { color: transparent; } +.hover\:text-current:hover { + color: currentColor; +} + .hover\:text-black:hover { color: #000; } @@ -7714,6 +7754,10 @@ video { color: transparent; } +.focus\:text-current:focus { + color: currentColor; +} + .focus\:text-black:focus { color: #000; } @@ -10985,6 +11029,10 @@ video { background-color: transparent; } + .sm\:bg-current { + background-color: currentColor; + } + .sm\:bg-black { background-color: #000; } @@ -11357,6 +11405,10 @@ video { background-color: transparent; } + .sm\:hover\:bg-current:hover { + background-color: currentColor; + } + .sm\:hover\:bg-black:hover { background-color: #000; } @@ -11729,6 +11781,10 @@ video { background-color: transparent; } + .sm\:focus\:bg-current:focus { + background-color: currentColor; + } + .sm\:focus\:bg-black:focus { background-color: #000; } @@ -12181,6 +12237,10 @@ video { border-color: transparent; } + .sm\:border-current { + border-color: currentColor; + } + .sm\:border-black { border-color: #000; } @@ -12553,6 +12613,10 @@ video { border-color: transparent; } + .sm\:hover\:border-current:hover { + border-color: currentColor; + } + .sm\:hover\:border-black:hover { border-color: #000; } @@ -12925,6 +12989,10 @@ video { border-color: transparent; } + .sm\:focus\:border-current:focus { + border-color: currentColor; + } + .sm\:focus\:border-black:focus { border-color: #000; } @@ -16265,6 +16333,10 @@ video { color: transparent; } + .sm\:placeholder-current::placeholder { + color: currentColor; + } + .sm\:placeholder-black::placeholder { color: #000; } @@ -16637,6 +16709,10 @@ video { color: transparent; } + .sm\:focus\:placeholder-current:focus::placeholder { + color: currentColor; + } + .sm\:focus\:placeholder-black:focus::placeholder { color: #000; } @@ -17283,6 +17359,10 @@ video { color: transparent; } + .sm\:text-current { + color: currentColor; + } + .sm\:text-black { color: #000; } @@ -17655,6 +17735,10 @@ video { color: transparent; } + .sm\:hover\:text-current:hover { + color: currentColor; + } + .sm\:hover\:text-black:hover { color: #000; } @@ -18027,6 +18111,10 @@ video { color: transparent; } + .sm\:focus\:text-current:focus { + color: currentColor; + } + .sm\:focus\:text-black:focus { color: #000; } @@ -21299,6 +21387,10 @@ video { background-color: transparent; } + .md\:bg-current { + background-color: currentColor; + } + .md\:bg-black { background-color: #000; } @@ -21671,6 +21763,10 @@ video { background-color: transparent; } + .md\:hover\:bg-current:hover { + background-color: currentColor; + } + .md\:hover\:bg-black:hover { background-color: #000; } @@ -22043,6 +22139,10 @@ video { background-color: transparent; } + .md\:focus\:bg-current:focus { + background-color: currentColor; + } + .md\:focus\:bg-black:focus { background-color: #000; } @@ -22495,6 +22595,10 @@ video { border-color: transparent; } + .md\:border-current { + border-color: currentColor; + } + .md\:border-black { border-color: #000; } @@ -22867,6 +22971,10 @@ video { border-color: transparent; } + .md\:hover\:border-current:hover { + border-color: currentColor; + } + .md\:hover\:border-black:hover { border-color: #000; } @@ -23239,6 +23347,10 @@ video { border-color: transparent; } + .md\:focus\:border-current:focus { + border-color: currentColor; + } + .md\:focus\:border-black:focus { border-color: #000; } @@ -26579,6 +26691,10 @@ video { color: transparent; } + .md\:placeholder-current::placeholder { + color: currentColor; + } + .md\:placeholder-black::placeholder { color: #000; } @@ -26951,6 +27067,10 @@ video { color: transparent; } + .md\:focus\:placeholder-current:focus::placeholder { + color: currentColor; + } + .md\:focus\:placeholder-black:focus::placeholder { color: #000; } @@ -27597,6 +27717,10 @@ video { color: transparent; } + .md\:text-current { + color: currentColor; + } + .md\:text-black { color: #000; } @@ -27969,6 +28093,10 @@ video { color: transparent; } + .md\:hover\:text-current:hover { + color: currentColor; + } + .md\:hover\:text-black:hover { color: #000; } @@ -28341,6 +28469,10 @@ video { color: transparent; } + .md\:focus\:text-current:focus { + color: currentColor; + } + .md\:focus\:text-black:focus { color: #000; } @@ -31613,6 +31745,10 @@ video { background-color: transparent; } + .lg\:bg-current { + background-color: currentColor; + } + .lg\:bg-black { background-color: #000; } @@ -31985,6 +32121,10 @@ video { background-color: transparent; } + .lg\:hover\:bg-current:hover { + background-color: currentColor; + } + .lg\:hover\:bg-black:hover { background-color: #000; } @@ -32357,6 +32497,10 @@ video { background-color: transparent; } + .lg\:focus\:bg-current:focus { + background-color: currentColor; + } + .lg\:focus\:bg-black:focus { background-color: #000; } @@ -32809,6 +32953,10 @@ video { border-color: transparent; } + .lg\:border-current { + border-color: currentColor; + } + .lg\:border-black { border-color: #000; } @@ -33181,6 +33329,10 @@ video { border-color: transparent; } + .lg\:hover\:border-current:hover { + border-color: currentColor; + } + .lg\:hover\:border-black:hover { border-color: #000; } @@ -33553,6 +33705,10 @@ video { border-color: transparent; } + .lg\:focus\:border-current:focus { + border-color: currentColor; + } + .lg\:focus\:border-black:focus { border-color: #000; } @@ -36893,6 +37049,10 @@ video { color: transparent; } + .lg\:placeholder-current::placeholder { + color: currentColor; + } + .lg\:placeholder-black::placeholder { color: #000; } @@ -37265,6 +37425,10 @@ video { color: transparent; } + .lg\:focus\:placeholder-current:focus::placeholder { + color: currentColor; + } + .lg\:focus\:placeholder-black:focus::placeholder { color: #000; } @@ -37911,6 +38075,10 @@ video { color: transparent; } + .lg\:text-current { + color: currentColor; + } + .lg\:text-black { color: #000; } @@ -38283,6 +38451,10 @@ video { color: transparent; } + .lg\:hover\:text-current:hover { + color: currentColor; + } + .lg\:hover\:text-black:hover { color: #000; } @@ -38655,6 +38827,10 @@ video { color: transparent; } + .lg\:focus\:text-current:focus { + color: currentColor; + } + .lg\:focus\:text-black:focus { color: #000; } @@ -41927,6 +42103,10 @@ video { background-color: transparent; } + .xl\:bg-current { + background-color: currentColor; + } + .xl\:bg-black { background-color: #000; } @@ -42299,6 +42479,10 @@ video { background-color: transparent; } + .xl\:hover\:bg-current:hover { + background-color: currentColor; + } + .xl\:hover\:bg-black:hover { background-color: #000; } @@ -42671,6 +42855,10 @@ video { background-color: transparent; } + .xl\:focus\:bg-current:focus { + background-color: currentColor; + } + .xl\:focus\:bg-black:focus { background-color: #000; } @@ -43123,6 +43311,10 @@ video { border-color: transparent; } + .xl\:border-current { + border-color: currentColor; + } + .xl\:border-black { border-color: #000; } @@ -43495,6 +43687,10 @@ video { border-color: transparent; } + .xl\:hover\:border-current:hover { + border-color: currentColor; + } + .xl\:hover\:border-black:hover { border-color: #000; } @@ -43867,6 +44063,10 @@ video { border-color: transparent; } + .xl\:focus\:border-current:focus { + border-color: currentColor; + } + .xl\:focus\:border-black:focus { border-color: #000; } @@ -47207,6 +47407,10 @@ video { color: transparent; } + .xl\:placeholder-current::placeholder { + color: currentColor; + } + .xl\:placeholder-black::placeholder { color: #000; } @@ -47579,6 +47783,10 @@ video { color: transparent; } + .xl\:focus\:placeholder-current:focus::placeholder { + color: currentColor; + } + .xl\:focus\:placeholder-black:focus::placeholder { color: #000; } @@ -48225,6 +48433,10 @@ video { color: transparent; } + .xl\:text-current { + color: currentColor; + } + .xl\:text-black { color: #000; } @@ -48597,6 +48809,10 @@ video { color: transparent; } + .xl\:hover\:text-current:hover { + color: currentColor; + } + .xl\:hover\:text-black:hover { color: #000; } @@ -48969,6 +49185,10 @@ video { color: transparent; } + .xl\:focus\:text-current:focus { + color: currentColor; + } + .xl\:focus\:text-black:focus { color: #000; }