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

Commit

Permalink
feat: add defaults values for .snap (#9)
Browse files Browse the repository at this point in the history 
Closes #8
  • Loading branch information
@NotWoods
NotWoods authored Feb 13, 2021
1 parent 8f99c78 commit 1b4e328
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 43 deletions.
22 changes: 11 additions & 11 deletions README.md
View file
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
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
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
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

0 comments on commit 1b4e328

Please sign in to comment.