Skip to content
This repository has been archived by the owner on Sep 29, 2021. It is now read-only.

feat: add defaults values for .snap #9

Merged
merged 2 commits into from
Feb 13, 2021
Merged

feat: add defaults values for .snap #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a881523
Add defalts for snap variables. Fixes #8
NotWoods Feb 12, 2021
ae8b825
Update tests
NotWoods Feb 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,17 +60,17 @@ You can override `scrollSnapAlign` in the theme of the Tailwind configuration if

Utilities for the [`scroll-snap-type`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) property.

| Class | Property |
| ----------------- | ------------------------------------------------------------------------------- |
| `.no-snap` | `.scroll-snap-type: none;` |
| `.snap` | `.scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint)` |
| `.snap-x` | `--scroll-snap-direction: x;` |
| `.snap-y` | `--scroll-snap-direction: y;` |
| `.snap-both` | `--scroll-snap-direction: both;` |
| `.snap-block` | `--scroll-snap-direction: block;` |
| `.snap-inline` | `--scroll-snap-direction: inline;` |
| `.snap-mandatory` | `--scroll-snap-constraint: mandatory;` |
| `.snap-proximity` | `--scroll-snap-constraint: proximity;` |
| Class | Property |
| ----------------- | ------------------------------------------------------------------------------------------------ |
| `.no-snap` | `.scroll-snap-type: none;` |
| `.snap` | `.scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory)` |
| `.snap-x` | `--scroll-snap-direction: x;` |
| `.snap-y` | `--scroll-snap-direction: y;` |
| `.snap-both` | `--scroll-snap-direction: both;` |
| `.snap-block` | `--scroll-snap-direction: block;` |
| `.snap-inline` | `--scroll-snap-direction: inline;` |
| `.snap-mandatory` | `--scroll-snap-constraint: mandatory;` |
| `.snap-proximity` | `--scroll-snap-constraint: proximity;` |

These utilities work with composition. Except `.no-snap`, you need to combine them. If you're not happy with the way it works, you can override `scrollSnapType` in the theme of the Tailwind configuration.

Expand Down
2 changes: 1 addition & 1 deletion src/plugins/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function (helpers: any) {
'scrollSnapType',
{
'no-snap': 'none',
snap: 'var(--scroll-snap-direction) var(--scroll-snap-constraint)',
snap: 'var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory)',
'snap-x': ['--scroll-snap-direction', 'x'],
'snap-y': ['--scroll-snap-direction', 'y'],
'snap-both': ['--scroll-snap-direction', 'both'],
Expand Down
4 changes: 2 additions & 2 deletions test/bench/scroll-snap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.snap {
scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint)
scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory)
}

.snap-x {
Expand Down Expand Up @@ -1758,4 +1758,4 @@

.snap-pl-px {
scroll-padding-left: 1px
}
}
58 changes: 29 additions & 29 deletions test/plugins.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('ScrollSnapType', () => {
// @ts-ignore
expect(css).toMatchCss(`
.no-snap { scroll-snap-type: none }
.snap { scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint) }
.snap { scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory) }
.snap-x { --scroll-snap-direction: x }
.snap-y { --scroll-snap-direction: y }
.snap-both { --scroll-snap-direction: both }
Expand Down Expand Up @@ -168,20 +168,20 @@ describe('ScrollMargin', () => {

// @ts-ignore
expect(css).toMatchCss(`
.snap-m-tight { scroll-margin: 1rem }
.snap-m-lose { scroll-margin: 2rem }
.snap-my-tight { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }
.snap-mx-tight { scroll-margin-left: 1rem; scroll-margin-right: 1rem }
.snap-my-lose { scroll-margin-top: 2rem; scroll-margin-bottom: 2rem }
.snap-mx-lose { scroll-margin-left: 2rem; scroll-margin-right: 2rem }
.snap-mt-tight { scroll-margin-top: 1rem }
.snap-mr-tight { scroll-margin-right: 1rem }
.snap-mb-tight { scroll-margin-bottom: 1rem }
.snap-ml-tight { scroll-margin-left: 1rem }
.snap-mt-lose { scroll-margin-top: 2rem }
.snap-mr-lose { scroll-margin-right: 2rem }
.snap-mb-lose { scroll-margin-bottom: 2rem }
.snap-ml-lose { scroll-margin-left: 2rem }
.snap-m-tight { scroll-margin: 1rem }
.snap-m-lose { scroll-margin: 2rem }
.snap-my-tight { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }
.snap-mx-tight { scroll-margin-left: 1rem; scroll-margin-right: 1rem }
.snap-my-lose { scroll-margin-top: 2rem; scroll-margin-bottom: 2rem }
.snap-mx-lose { scroll-margin-left: 2rem; scroll-margin-right: 2rem }
.snap-mt-tight { scroll-margin-top: 1rem }
.snap-mr-tight { scroll-margin-right: 1rem }
.snap-mb-tight { scroll-margin-bottom: 1rem }
.snap-ml-tight { scroll-margin-left: 1rem }
.snap-mt-lose { scroll-margin-top: 2rem }
.snap-mr-lose { scroll-margin-right: 2rem }
.snap-mb-lose { scroll-margin-bottom: 2rem }
.snap-ml-lose { scroll-margin-left: 2rem }
`);
});

Expand Down Expand Up @@ -236,20 +236,20 @@ describe('ScrollPadding', () => {

// @ts-ignore
expect(css).toMatchCss(`
.snap-p-tight { scroll-padding: 1rem }
.snap-p-lose { scroll-padding: 2rem }
.snap-py-tight { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }
.snap-px-tight { scroll-padding-left: 1rem; scroll-padding-right: 1rem }
.snap-py-lose { scroll-padding-top: 2rem; scroll-padding-bottom: 2rem }
.snap-px-lose { scroll-padding-left: 2rem; scroll-padding-right: 2rem }
.snap-pt-tight { scroll-padding-top: 1rem }
.snap-pr-tight { scroll-padding-right: 1rem }
.snap-pb-tight { scroll-padding-bottom: 1rem }
.snap-pl-tight { scroll-padding-left: 1rem }
.snap-pt-lose { scroll-padding-top: 2rem }
.snap-pr-lose { scroll-padding-right: 2rem }
.snap-pb-lose { scroll-padding-bottom: 2rem }
.snap-pl-lose { scroll-padding-left: 2rem }
.snap-p-tight { scroll-padding: 1rem }
.snap-p-lose { scroll-padding: 2rem }
.snap-py-tight { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }
.snap-px-tight { scroll-padding-left: 1rem; scroll-padding-right: 1rem }
.snap-py-lose { scroll-padding-top: 2rem; scroll-padding-bottom: 2rem }
.snap-px-lose { scroll-padding-left: 2rem; scroll-padding-right: 2rem }
.snap-pt-tight { scroll-padding-top: 1rem }
.snap-pr-tight { scroll-padding-right: 1rem }
.snap-pb-tight { scroll-padding-bottom: 1rem }
.snap-pl-tight { scroll-padding-left: 1rem }
.snap-pt-lose { scroll-padding-top: 2rem }
.snap-pr-lose { scroll-padding-right: 2rem }
.snap-pb-lose { scroll-padding-bottom: 2rem }
.snap-pl-lose { scroll-padding-left: 2rem }
`);
});

Expand Down