archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add support for transform, filter, backdrop-filter, box-shadow and ring to pseudo-elements (#4624)

Browse Source 
* Add support for transform, filter, backdrop-filter, box-shadow and ring to pseudo-elements

* Rebuild fixtures
This commit is contained in:
Adam Wathan 2021-06-11 09:11:56 -04:00 committed by GitHub
parent d6da12ff0c
commit cb2598ce33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 58 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/backdropFilter.js
View File

@ -2,7 +2,7 @@ export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*': {
'*, ::before, ::after': {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',

2
src/plugins/boxShadow.js
View File

@ -2,7 +2,7 @@ import transformThemeValue from '../util/transformThemeValue'
let transformValue = transformThemeValue('boxShadow')
let shadowReset = {
'*': {
'*, ::before, ::after': {
'--tw-shadow': '0 0 #0000',
},
}

2
src/plugins/filter.js
View File

@ -2,7 +2,7 @@ export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*': {
'*, ::before, ::after': {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',

2
src/plugins/ringWidth.js
View File

@ -10,7 +10,7 @@ export default function () {
)
let ringReset = {
'*': {
'*, ::before, ::after': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),

2
src/plugins/transform.js
View File

@ -2,7 +2,7 @@ export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*': {
'*, ::before, ::after': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',

4
tests/fixtures/tailwind-output-flagged.css vendored
View File

@ -26299,7 +26299,7 @@ video {
mix-blend-mode: luminosity;
}
* {
*, ::before, ::after {
--tw-shadow: 0 0 #0000;
}
@ -26548,7 +26548,7 @@ video {
outline-offset: 2px;
}
* {
*, ::before, ::after {
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;

4
tests/fixtures/tailwind-output-important.css vendored
View File

@ -26299,7 +26299,7 @@ video {
mix-blend-mode: luminosity !important;
}
* {
*, ::before, ::after {
--tw-shadow: 0 0 #0000;
}
@ -26548,7 +26548,7 @@ video {
outline-offset: 2px !important;
}
* {
*, ::before, ::after {
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;

4
tests/fixtures/tailwind-output-no-color-opacity.css vendored
View File

@ -23742,7 +23742,7 @@ video {
mix-blend-mode: luminosity;
}
* {
*, ::before, ::after {
--tw-shadow: 0 0 #0000;
}
@ -23991,7 +23991,7 @@ video {
outline-offset: 2px;
}
* {
*, ::before, ::after {
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;

4
tests/fixtures/tailwind-output.css vendored
View File

@ -26299,7 +26299,7 @@ video {
mix-blend-mode: luminosity;
}
* {
*, ::before, ::after {
--tw-shadow: 0 0 #0000;
}
@ -26548,7 +26548,7 @@ video {
outline-offset: 2px;
}
* {
*, ::before, ::after {
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;

10
tests/jit/basic-usage.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/collapse-adjacent-rules.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/import-syntax.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/important-boolean.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/important-modifier-prefix.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/important-modifier.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/important-selector.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

18
tests/jit/kitchen-sink.test.css
View File

@ -126,7 +126,9 @@
}
}
}
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -137,14 +139,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;
@ -291,7 +287,9 @@ div {
.custom-component {
background: #123456;
}
* {
*,
::before,
::after {
padding: 5px;
}
.foo .bg-black {
@ -354,7 +352,9 @@ div {
.custom-util {
background: #abcdef;
}
* {
*,
::before,
::after {
margin: 10px;
}
.first\:pt-0:first-child {

8
tests/jit/kitchen-sink.test.js
View File

@ -76,7 +76,9 @@ test('it works', () => {
.custom-util {
background: #abcdef;
}
* {
*,
::before,
::after {
margin: 10px;
}
}
@ -87,7 +89,9 @@ test('it works', () => {
.custom-component {
background: #123456;
}
* {
*,
::before,
::after {
padding: 5px;
}
.foo .bg-black {

10
tests/jit/prefix.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/relative-purge-paths.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;

10
tests/jit/variants.test.css
View File

@ -1,4 +1,6 @@
* {
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -9,14 +11,8 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
* {
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;