From 444c59ffcd6e8e4cff38cd67d78021e380a95cdf Mon Sep 17 00:00:00 2001 From: Wade Fletcher Date: Sat, 25 Jul 2020 14:49:21 -0400 Subject: [PATCH 1/2] Add overscroll plugin --- src/corePlugins.js | 2 ++ src/plugins/overscroll.js | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/plugins/overscroll.js diff --git a/src/corePlugins.js b/src/corePlugins.js index f1211ba36..b263d1fc9 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -46,6 +46,7 @@ import objectPosition from './plugins/objectPosition' import opacity from './plugins/opacity' import outline from './plugins/outline' import overflow from './plugins/overflow' +import overscroll from './plugins/overscroll' import padding from './plugins/padding' import placeholderColor from './plugins/placeholderColor' import pointerEvents from './plugins/pointerEvents' @@ -154,6 +155,7 @@ export default function({ corePlugins: corePluginConfig }) { opacity, outline, overflow, + overscroll, padding, placeholderColor, placeholderOpacity, diff --git a/src/plugins/overscroll.js b/src/plugins/overscroll.js new file mode 100644 index 000000000..5ef010ae7 --- /dev/null +++ b/src/plugins/overscroll.js @@ -0,0 +1,18 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.overscroll-auto': { 'overscroll-behavior': 'auto' }, + '.overscroll-contain': { 'overscroll-behavior': 'contain' }, + '.overscroll-none': { 'overscroll-behavior': 'none' }, + '.overscroll-y-auto': { 'overscroll-behavior-y': 'auto' }, + '.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' }, + '.overscroll-y-none': { 'overscroll-behavior-y': 'none' }, + '.overscroll-x-auto': { 'overscroll-behavior-x': 'auto' }, + '.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' }, + '.overscroll-x-none': { 'overscroll-behavior-x': 'none' }, + }, + variants('overscroll') + ) + } +} From 55134d4b32f23f8e7652cb197c8bcca011017e1c Mon Sep 17 00:00:00 2001 From: Wade Fletcher Date: Sat, 25 Jul 2020 15:19:33 -0400 Subject: [PATCH 2/2] Add overscroll test fixtures --- __tests__/fixtures/tailwind-output-ie11.css | 36 +++++++++++++++++++ .../fixtures/tailwind-output-important.css | 36 +++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 36 +++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 36 +++++++++++++++++++ 4 files changed, 144 insertions(+) diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 760a22cf8..3ce8416be 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -6089,6 +6089,42 @@ video { -webkit-overflow-scrolling: auto; } +.overscroll-auto { + overscroll-behavior: auto; +} + +.overscroll-contain { + overscroll-behavior: contain; +} + +.overscroll-none { + overscroll-behavior: none; +} + +.overscroll-y-auto { + overscroll-behavior-y: auto; +} + +.overscroll-y-contain { + overscroll-behavior-y: contain; +} + +.overscroll-y-none { + overscroll-behavior-y: none; +} + +.overscroll-x-auto { + overscroll-behavior-x: auto; +} + +.overscroll-x-contain { + overscroll-behavior-x: contain; +} + +.overscroll-x-none { + overscroll-behavior-x: none; +} + .p-0 { padding: 0; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 0949bc69e..b53ef9d19 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -7769,6 +7769,42 @@ video { -webkit-overflow-scrolling: auto !important; } +.overscroll-auto { + overscroll-behavior: auto !important; +} + +.overscroll-contain { + overscroll-behavior: contain !important; +} + +.overscroll-none { + overscroll-behavior: none !important; +} + +.overscroll-y-auto { + overscroll-behavior-y: auto !important; +} + +.overscroll-y-contain { + overscroll-behavior-y: contain !important; +} + +.overscroll-y-none { + overscroll-behavior-y: none !important; +} + +.overscroll-x-auto { + overscroll-behavior-x: auto !important; +} + +.overscroll-x-contain { + overscroll-behavior-x: contain !important; +} + +.overscroll-x-none { + overscroll-behavior-x: none !important; +} + .p-0 { padding: 0 !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index cc84a1b6e..2caa2d391 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -6341,6 +6341,42 @@ video { -webkit-overflow-scrolling: auto; } +.overscroll-auto { + overscroll-behavior: auto; +} + +.overscroll-contain { + overscroll-behavior: contain; +} + +.overscroll-none { + overscroll-behavior: none; +} + +.overscroll-y-auto { + overscroll-behavior-y: auto; +} + +.overscroll-y-contain { + overscroll-behavior-y: contain; +} + +.overscroll-y-none { + overscroll-behavior-y: none; +} + +.overscroll-x-auto { + overscroll-behavior-x: auto; +} + +.overscroll-x-contain { + overscroll-behavior-x: contain; +} + +.overscroll-x-none { + overscroll-behavior-x: none; +} + .p-0 { padding: 0; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 97596e0bc..7eb5697bf 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -7769,6 +7769,42 @@ video { -webkit-overflow-scrolling: auto; } +.overscroll-auto { + overscroll-behavior: auto; +} + +.overscroll-contain { + overscroll-behavior: contain; +} + +.overscroll-none { + overscroll-behavior: none; +} + +.overscroll-y-auto { + overscroll-behavior-y: auto; +} + +.overscroll-y-contain { + overscroll-behavior-y: contain; +} + +.overscroll-y-none { + overscroll-behavior-y: none; +} + +.overscroll-x-auto { + overscroll-behavior-x: auto; +} + +.overscroll-x-contain { + overscroll-behavior-x: contain; +} + +.overscroll-x-none { + overscroll-behavior-x: none; +} + .p-0 { padding: 0; }