From 9126f40b56f65895754ada517209edbad21ed623 Mon Sep 17 00:00:00 2001 From: Peter Jonsson <95jonpet@gmail.com> Date: Tue, 2 Oct 2018 18:35:02 +0200 Subject: [PATCH 1/5] Feature: Generator for scroll snap Adds a generator for controlling snappy scrolling as described by: https://css-tricks.com/introducing-css-scroll-snap-points/ https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type Note that this is an experimental feature that will not work in all browsers. --- src/generators/snap.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/generators/snap.js diff --git a/src/generators/snap.js b/src/generators/snap.js new file mode 100644 index 000000000000..5f2a902415a1 --- /dev/null +++ b/src/generators/snap.js @@ -0,0 +1,12 @@ +import defineClasses from '../util/defineClasses' + +export default function() { + return defineClasses({ + 'snap-x': { 'scroll-snap-type': 'x mandatory' }, + 'snap-y': { 'scroll-snap-type': 'y mandatory' }, + 'snap-xy': { 'scroll-snap-type': 'both mandatory' }, + 'snap-start': { 'scroll-snap-align': 'start' }, + 'snap-end': { 'scroll-snap-align': 'end' }, + 'snap-center': { 'scroll-snap-align': 'center' }, + }) +} From 63d9a7af0ed33d3967e6862e6f8c46384bed8b84 Mon Sep 17 00:00:00 2001 From: Peter Jonsson <95jonpet@gmail.com> Date: Tue, 2 Oct 2018 18:59:25 +0200 Subject: [PATCH 2/5] Added snap configuration --- defaultConfig.stub.js | 1 + src/utilityModules.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index d7d0a612d397..3702f711a7c6 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -895,6 +895,7 @@ module.exports = { position: ['responsive'], resize: ['responsive'], shadows: ['responsive', 'hover', 'focus'], + snap: ['responsive'], svgFill: [], svgStroke: [], tableLayout: ['responsive'], diff --git a/src/utilityModules.js b/src/utilityModules.js index fd5aa154a5b8..9d3abf740f06 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -32,6 +32,7 @@ import pointerEvents from './generators/pointerEvents' import position from './generators/position' import resize from './generators/resize' import shadows from './generators/shadows' +import snap from './generators/snap' import svgFill from './generators/svgFill' import svgStroke from './generators/svgStroke' import tableLayout from './generators/tableLayout' @@ -82,6 +83,7 @@ export default [ { name: 'position', generator: position }, { name: 'resize', generator: resize }, { name: 'shadows', generator: shadows }, + { name: 'snap', generator: snap }, { name: 'svgFill', generator: svgFill }, { name: 'svgStroke', generator: svgStroke }, { name: 'tableLayout', generator: tableLayout }, From a9841728fb12dafebef66aec52ba17de955a3fbc Mon Sep 17 00:00:00 2001 From: Peter Jonsson <95jonpet@gmail.com> Date: Tue, 2 Oct 2018 19:13:15 +0200 Subject: [PATCH 3/5] Updated test fixture for snap --- __tests__/fixtures/tailwind-output.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index db07aa37d209..c1a38aea89d2 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -4791,6 +4791,30 @@ table { box-shadow: none; } +.snap-x { + scroll-snap-type: x mandatory; +} + +.snap-y { + scroll-snap-type: y mandatory; +} + +.snap-xy { + scoll-snap-type: both mandatory; +} + +.snap-start { + scroll-snap-align: start; +} + +.snap-end { + scroll-snap-align: end; +} + +.snap-center { + scroll-snap-align: center; +} + .fill-current { fill: currentColor; } From 84676fc00e69b563810d038add4a6802a4e746a9 Mon Sep 17 00:00:00 2001 From: Peter Jonsson <95jonpet@gmail.com> Date: Tue, 2 Oct 2018 19:28:06 +0200 Subject: [PATCH 4/5] Added responsive tests for snap --- __tests__/fixtures/tailwind-output.css | 96 ++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index c1a38aea89d2..c824e0c11d1a 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -10392,6 +10392,30 @@ table { box-shadow: none; } + .sm\:snap-x { + scroll-snap-type: x mandatory; + } + + .sm\:snap-y { + scroll-snap-type: y mandatory; + } + + .sm\:snap-xy { + scoll-snap-type: both mandatory; + } + + .sm\:snap-start { + scroll-snap-align: start; + } + + .sm\:snap-end { + scroll-snap-align: end; + } + + .sm\:snap-center { + scroll-snap-align: center; + } + .sm\:table-auto { table-layout: auto; } @@ -15962,6 +15986,30 @@ table { box-shadow: none; } + .md\:snap-x { + scroll-snap-type: x mandatory; + } + + .md\:snap-y { + scroll-snap-type: y mandatory; + } + + .md\:snap-xy { + scoll-snap-type: both mandatory; + } + + .md\:snap-start { + scroll-snap-align: start; + } + + .md\:snap-end { + scroll-snap-align: end; + } + + .md\:snap-center { + scroll-snap-align: center; + } + .md\:table-auto { table-layout: auto; } @@ -21532,6 +21580,30 @@ table { box-shadow: none; } + .lg\:snap-x { + scroll-snap-type: x mandatory; + } + + .lg\:snap-y { + scroll-snap-type: y mandatory; + } + + .lg\:snap-xy { + scoll-snap-type: both mandatory; + } + + .lg\:snap-start { + scroll-snap-align: start; + } + + .lg\:snap-end { + scroll-snap-align: end; + } + + .lg\:snap-center { + scroll-snap-align: center; + } + .lg\:table-auto { table-layout: auto; } @@ -27102,6 +27174,30 @@ table { box-shadow: none; } + .xl\:snap-x { + scroll-snap-type: x mandatory; + } + + .xl\:snap-y { + scroll-snap-type: y mandatory; + } + + .xl\:snap-xy { + scoll-snap-type: both mandatory; + } + + .xl\:snap-start { + scroll-snap-align: start; + } + + .xl\:snap-end { + scroll-snap-align: end; + } + + .xl\:snap-center { + scroll-snap-align: center; + } + .xl\:table-auto { table-layout: auto; } From 159314384e034aacee8cdf55e7a37b9d15c6fc91 Mon Sep 17 00:00:00 2001 From: Peter Jonsson <95jonpet@gmail.com> Date: Tue, 2 Oct 2018 19:33:50 +0200 Subject: [PATCH 5/5] Fixed spelling in test fixture --- __tests__/fixtures/tailwind-output.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index c824e0c11d1a..9f52e8003ce3 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -4800,7 +4800,7 @@ table { } .snap-xy { - scoll-snap-type: both mandatory; + scroll-snap-type: both mandatory; } .snap-start { @@ -10401,7 +10401,7 @@ table { } .sm\:snap-xy { - scoll-snap-type: both mandatory; + scroll-snap-type: both mandatory; } .sm\:snap-start { @@ -15995,7 +15995,7 @@ table { } .md\:snap-xy { - scoll-snap-type: both mandatory; + scroll-snap-type: both mandatory; } .md\:snap-start { @@ -21589,7 +21589,7 @@ table { } .lg\:snap-xy { - scoll-snap-type: both mandatory; + scroll-snap-type: both mandatory; } .lg\:snap-start { @@ -27183,7 +27183,7 @@ table { } .xl\:snap-xy { - scoll-snap-type: both mandatory; + scroll-snap-type: both mandatory; } .xl\:snap-start {