[ { "path": ".github/workflows/main.yaml", "content": "name: CI\n\non:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\n\njobs:\n test:\n runs-on: ubuntu-latest\n strategy:\n matrix:\n node: [12.x]\n\n fail-fast: true\n\n steps:\n - uses: actions/checkout@v2\n\n - name: Use Node ${{ matrix.node }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node }}\n\n - name: Install dependencies\n run: yarn install\n\n - name: Perform tests\n run: yarn jest\n" }, { "path": ".gitignore", "content": "node_modules/\ndist/\n.yarn-error.log\n" }, { "path": ".npmignore", "content": "src/\ntest/\n" }, { "path": "README.md", "content": "

\n

Notice

\n

\n\tThis plugin is now implemented in Tailwind JIT core and won't be updated anymore.\n

\n

\n\n\n \n \n \n\n---\n\n \n \n \n\n

\n

Scroll Snap

\n

\n \n \"GitHub\n \n  \n \n \"npm\"\n \n  \n \n \"npm\"\n \n

\n

\n\n# Introduction\n\n`tailwindcss-scroll-snap` adds [CSS Scroll Snap](https://css-tricks.com/practical-css-scroll-snapping/) utilities to Tailwind CSS.\n\nIt makes use of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) by default in order to make composable utilities for [Scroll Snap Types](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type), but you can override the `scrollSnapType` key in your Tailwind config if you don't want to use CSS custom properties.\n\n**Get started:**\n\n```console\n$ yarn add tailwindcss-scroll-snap --dev\n```\n\nAfter installing the NPM package, add it to the plugins part of `tailwind.config.js`.\n\n```js\nmodule.exports = {\n\ttheme: {},\n\tvariants: {\n\t\t// Add variants as needed\n\t\tscrollSnapType: ['responsive'],\n\t},\n\tplugins: [require('tailwindcss-scroll-snap')],\n};\n```\n\n# Usage\n\nThis plugin creates utilities for [`scroll-snap-align`](#align), [`scroll-snap-type`](#Type), [`scroll-snap-stop`](#Stop), [`scroll-margin`](#margin) and [`scroll-padding`](#Padding). Each of them [can be used with variants](https://tailwindcss.com/docs/configuration/#variants).\n\n## Align\n\nUtilities for the [`scroll-snap-align`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align) property.\n\n| Class | Property |\n| -------------- | ---------------------------- |\n| `.snap-start` | `scroll-snap-align: start;` |\n| `.snap-end` | `scroll-snap-align: end;` |\n| `.snap-center` | `scroll-snap-align: center;` |\n\nYou can override `scrollSnapAlign` in the theme of the Tailwind configuration if you want to change them.\n\n## Type\n\nUtilities for the [`scroll-snap-type`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) property.\n\n| Class | Property |\n| ----------------- | ------------------------------------------------------------------------------------------------ |\n| `.no-snap` | `.scroll-snap-type: none;` |\n| `.snap` | `.scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory)` |\n| `.snap-x` | `--scroll-snap-direction: x;` |\n| `.snap-y` | `--scroll-snap-direction: y;` |\n| `.snap-both` | `--scroll-snap-direction: both;` |\n| `.snap-block` | `--scroll-snap-direction: block;` |\n| `.snap-inline` | `--scroll-snap-direction: inline;` |\n| `.snap-mandatory` | `--scroll-snap-constraint: mandatory;` |\n| `.snap-proximity` | `--scroll-snap-constraint: proximity;` |\n\nThese 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.\n\n```html\n
\n\t\n
\n```\n\nA configuration for variable-less `scroll-snap-type` utilities could look like that:\n\n```js\n{\n 'no-snap': 'none',\n 'snap-y-mandatory': 'y mandatory',\n 'snap-y-proximity': 'y proximity',\n}\n```\n\nIt is recommended that in the case where you need to override the configuration, you only add utilities you plan on actually using.\n\n## Stop\n\nUtilities for the [`scroll-snap-stop`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop) property.\n\n| Class | Property |\n| -------------- | --------------------------- |\n| `.always-stop` | `scroll-snap-stop: always;` |\n\nYou can override `scrollSnapStop` in the theme of the Tailwind configuration if you want to change them.\n\n## Margin\n\nUtilities for the [`scroll-margin`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin) property.\n\n
\nSee the default list.\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassProperty
.snap-m-0scroll-margin: 0;
.snap-m-1scroll-margin: 0.25rem;
.snap-m-2scroll-margin: 0.5rem;
.snap-m-3scroll-margin: 0.75rem;
.snap-m-4scroll-margin: 1rem;
.snap-m-5scroll-margin: 1.25rem;
.snap-m-6scroll-margin: 1.5rem;
.snap-m-8scroll-margin: 2rem;
.snap-m-10scroll-margin: 2.5rem;
.snap-m-12scroll-margin: 3rem;
.snap-m-16scroll-margin: 4rem;
.snap-m-20scroll-margin: 5rem;
.snap-m-24scroll-margin: 6rem;
.snap-m-32scroll-margin: 8rem;
.snap-m-40scroll-margin: 10rem;
.snap-m-48scroll-margin: 12rem;
.snap-m-56scroll-margin: 14rem;
.snap-m-64scroll-margin: 16rem;
.snap-m-autoscroll-margin: auto;
.snap-m-pxscroll-margin: 1px;
.-snap-m-1scroll-margin: -0.25rem;
.-snap-m-2scroll-margin: -0.5rem;
.-snap-m-3scroll-margin: -0.75rem;
.-snap-m-4scroll-margin: -1rem;
.-snap-m-5scroll-margin: -1.25rem;
.-snap-m-6scroll-margin: -1.5rem;
.-snap-m-8scroll-margin: -2rem;
.-snap-m-10scroll-margin: -2.5rem;
.-snap-m-12scroll-margin: -3rem;
.-snap-m-16scroll-margin: -4rem;
.-snap-m-20scroll-margin: -5rem;
.-snap-m-24scroll-margin: -6rem;
.-snap-m-32scroll-margin: -8rem;
.-snap-m-40scroll-margin: -10rem;
.-snap-m-48scroll-margin: -12rem;
.-snap-m-56scroll-margin: -14rem;
.-snap-m-64scroll-margin: -16rem;
.-snap-m-pxscroll-margin: -1px;
.snap-my-0scroll-margin-top: 0; scroll-margin-bottom: 0;
.snap-mx-0scroll-margin-left: 0; scroll-margin-right: 0;
.snap-my-1scroll-margin-top: 0.25rem; scroll-margin-bottom: 0.25rem;
.snap-mx-1scroll-margin-left: 0.25rem; scroll-margin-right: 0.25rem;
.snap-my-2scroll-margin-top: 0.5rem; scroll-margin-bottom: 0.5rem;
.snap-mx-2scroll-margin-left: 0.5rem; scroll-margin-right: 0.5rem;
.snap-my-3scroll-margin-top: 0.75rem; scroll-margin-bottom: 0.75rem;
.snap-mx-3scroll-margin-left: 0.75rem; scroll-margin-right: 0.75rem;
.snap-my-4scroll-margin-top: 1rem; scroll-margin-bottom: 1rem;
.snap-mx-4scroll-margin-left: 1rem; scroll-margin-right: 1rem;
.snap-my-5scroll-margin-top: 1.25rem; scroll-margin-bottom: 1.25rem;
.snap-mx-5scroll-margin-left: 1.25rem; scroll-margin-right: 1.25rem;
.snap-my-6scroll-margin-top: 1.5rem; scroll-margin-bottom: 1.5rem;
.snap-mx-6scroll-margin-left: 1.5rem; scroll-margin-right: 1.5rem;
.snap-my-8scroll-margin-top: 2rem; scroll-margin-bottom: 2rem;
.snap-mx-8scroll-margin-left: 2rem; scroll-margin-right: 2rem;
.snap-my-10scroll-margin-top: 2.5rem; scroll-margin-bottom: 2.5rem;
.snap-mx-10scroll-margin-left: 2.5rem; scroll-margin-right: 2.5rem;
.snap-my-12scroll-margin-top: 3rem; scroll-margin-bottom: 3rem;
.snap-mx-12scroll-margin-left: 3rem; scroll-margin-right: 3rem;
.snap-my-16scroll-margin-top: 4rem; scroll-margin-bottom: 4rem;
.snap-mx-16scroll-margin-left: 4rem; scroll-margin-right: 4rem;
.snap-my-20scroll-margin-top: 5rem; scroll-margin-bottom: 5rem;
.snap-mx-20scroll-margin-left: 5rem; scroll-margin-right: 5rem;
.snap-my-24scroll-margin-top: 6rem; scroll-margin-bottom: 6rem;
.snap-mx-24scroll-margin-left: 6rem; scroll-margin-right: 6rem;
.snap-my-32scroll-margin-top: 8rem; scroll-margin-bottom: 8rem;
.snap-mx-32scroll-margin-left: 8rem; scroll-margin-right: 8rem;
.snap-my-40scroll-margin-top: 10rem; scroll-margin-bottom: 10rem;
.snap-mx-40scroll-margin-left: 10rem; scroll-margin-right: 10rem;
.snap-my-48scroll-margin-top: 12rem; scroll-margin-bottom: 12rem;
.snap-mx-48scroll-margin-left: 12rem; scroll-margin-right: 12rem;
.snap-my-56scroll-margin-top: 14rem; scroll-margin-bottom: 14rem;
.snap-mx-56scroll-margin-left: 14rem; scroll-margin-right: 14rem;
.snap-my-64scroll-margin-top: 16rem; scroll-margin-bottom: 16rem;
.snap-mx-64scroll-margin-left: 16rem; scroll-margin-right: 16rem;
.snap-my-autoscroll-margin-top: auto; scroll-margin-bottom: auto;
.snap-mx-autoscroll-margin-left: auto; scroll-margin-right: auto;
.snap-my-pxscroll-margin-top: 1px; scroll-margin-bottom: 1px;
.snap-mx-pxscroll-margin-left: 1px; scroll-margin-right: 1px;
.-snap-my-1scroll-margin-top: -0.25rem; scroll-margin-bottom: -0.25rem;
.-snap-mx-1scroll-margin-left: -0.25rem; scroll-margin-right: -0.25rem;
.-snap-my-2scroll-margin-top: -0.5rem; scroll-margin-bottom: -0.5rem;
.-snap-mx-2scroll-margin-left: -0.5rem; scroll-margin-right: -0.5rem;
.-snap-my-3scroll-margin-top: -0.75rem; scroll-margin-bottom: -0.75rem;
.-snap-mx-3scroll-margin-left: -0.75rem; scroll-margin-right: -0.75rem;
.-snap-my-4scroll-margin-top: -1rem; scroll-margin-bottom: -1rem;
.-snap-mx-4scroll-margin-left: -1rem; scroll-margin-right: -1rem;
.-snap-my-5scroll-margin-top: -1.25rem; scroll-margin-bottom: -1.25rem;
.-snap-mx-5scroll-margin-left: -1.25rem; scroll-margin-right: -1.25rem;
.-snap-my-6scroll-margin-top: -1.5rem; scroll-margin-bottom: -1.5rem;
.-snap-mx-6scroll-margin-left: -1.5rem; scroll-margin-right: -1.5rem;
.-snap-my-8scroll-margin-top: -2rem; scroll-margin-bottom: -2rem;
.-snap-mx-8scroll-margin-left: -2rem; scroll-margin-right: -2rem;
.-snap-my-10scroll-margin-top: -2.5rem; scroll-margin-bottom: -2.5rem;
.-snap-mx-10scroll-margin-left: -2.5rem; scroll-margin-right: -2.5rem;
.-snap-my-12scroll-margin-top: -3rem; scroll-margin-bottom: -3rem;
.-snap-mx-12scroll-margin-left: -3rem; scroll-margin-right: -3rem;
.-snap-my-16scroll-margin-top: -4rem; scroll-margin-bottom: -4rem;
.-snap-mx-16scroll-margin-left: -4rem; scroll-margin-right: -4rem;
.-snap-my-20scroll-margin-top: -5rem; scroll-margin-bottom: -5rem;
.-snap-mx-20scroll-margin-left: -5rem; scroll-margin-right: -5rem;
.-snap-my-24scroll-margin-top: -6rem; scroll-margin-bottom: -6rem;
.-snap-mx-24scroll-margin-left: -6rem; scroll-margin-right: -6rem;
.-snap-my-32scroll-margin-top: -8rem; scroll-margin-bottom: -8rem;
.-snap-mx-32scroll-margin-left: -8rem; scroll-margin-right: -8rem;
.-snap-my-40scroll-margin-top: -10rem; scroll-margin-bottom: -10rem;
.-snap-mx-40scroll-margin-left: -10rem; scroll-margin-right: -10rem;
.-snap-my-48scroll-margin-top: -12rem; scroll-margin-bottom: -12rem;
.-snap-mx-48scroll-margin-left: -12rem; scroll-margin-right: -12rem;
.-snap-my-56scroll-margin-top: -14rem; scroll-margin-bottom: -14rem;
.-snap-mx-56scroll-margin-left: -14rem; scroll-margin-right: -14rem;
.-snap-my-64scroll-margin-top: -16rem; scroll-margin-bottom: -16rem;
.-snap-mx-64scroll-margin-left: -16rem; scroll-margin-right: -16rem;
.-snap-my-pxscroll-margin-top: -1px; scroll-margin-bottom: -1px;
.-snap-mx-pxscroll-margin-left: -1px; scroll-margin-right: -1px;
.snap-mt-0scroll-margin-top: 0;
.snap-mr-0scroll-margin-right: 0;
.snap-mb-0scroll-margin-bottom: 0;
.snap-ml-0scroll-margin-left: 0;
.snap-mt-1scroll-margin-top: 0.25rem;
.snap-mr-1scroll-margin-right: 0.25rem;
.snap-mb-1scroll-margin-bottom: 0.25rem;
.snap-ml-1scroll-margin-left: 0.25rem;
.snap-mt-2scroll-margin-top: 0.5rem;
.snap-mr-2scroll-margin-right: 0.5rem;
.snap-mb-2scroll-margin-bottom: 0.5rem;
.snap-ml-2scroll-margin-left: 0.5rem;
.snap-mt-3scroll-margin-top: 0.75rem;
.snap-mr-3scroll-margin-right: 0.75rem;
.snap-mb-3scroll-margin-bottom: 0.75rem;
.snap-ml-3scroll-margin-left: 0.75rem;
.snap-mt-4scroll-margin-top: 1rem;
.snap-mr-4scroll-margin-right: 1rem;
.snap-mb-4scroll-margin-bottom: 1rem;
.snap-ml-4scroll-margin-left: 1rem;
.snap-mt-5scroll-margin-top: 1.25rem;
.snap-mr-5scroll-margin-right: 1.25rem;
.snap-mb-5scroll-margin-bottom: 1.25rem;
.snap-ml-5scroll-margin-left: 1.25rem;
.snap-mt-6scroll-margin-top: 1.5rem;
.snap-mr-6scroll-margin-right: 1.5rem;
.snap-mb-6scroll-margin-bottom: 1.5rem;
.snap-ml-6scroll-margin-left: 1.5rem;
.snap-mt-8scroll-margin-top: 2rem;
.snap-mr-8scroll-margin-right: 2rem;
.snap-mb-8scroll-margin-bottom: 2rem;
.snap-ml-8scroll-margin-left: 2rem;
.snap-mt-10scroll-margin-top: 2.5rem;
.snap-mr-10scroll-margin-right: 2.5rem;
.snap-mb-10scroll-margin-bottom: 2.5rem;
.snap-ml-10scroll-margin-left: 2.5rem;
.snap-mt-12scroll-margin-top: 3rem;
.snap-mr-12scroll-margin-right: 3rem;
.snap-mb-12scroll-margin-bottom: 3rem;
.snap-ml-12scroll-margin-left: 3rem;
.snap-mt-16scroll-margin-top: 4rem;
.snap-mr-16scroll-margin-right: 4rem;
.snap-mb-16scroll-margin-bottom: 4rem;
.snap-ml-16scroll-margin-left: 4rem;
.snap-mt-20scroll-margin-top: 5rem;
.snap-mr-20scroll-margin-right: 5rem;
.snap-mb-20scroll-margin-bottom: 5rem;
.snap-ml-20scroll-margin-left: 5rem;
.snap-mt-24scroll-margin-top: 6rem;
.snap-mr-24scroll-margin-right: 6rem;
.snap-mb-24scroll-margin-bottom: 6rem;
.snap-ml-24scroll-margin-left: 6rem;
.snap-mt-32scroll-margin-top: 8rem;
.snap-mr-32scroll-margin-right: 8rem;
.snap-mb-32scroll-margin-bottom: 8rem;
.snap-ml-32scroll-margin-left: 8rem;
.snap-mt-40scroll-margin-top: 10rem;
.snap-mr-40scroll-margin-right: 10rem;
.snap-mb-40scroll-margin-bottom: 10rem;
.snap-ml-40scroll-margin-left: 10rem;
.snap-mt-48scroll-margin-top: 12rem;
.snap-mr-48scroll-margin-right: 12rem;
.snap-mb-48scroll-margin-bottom: 12rem;
.snap-ml-48scroll-margin-left: 12rem;
.snap-mt-56scroll-margin-top: 14rem;
.snap-mr-56scroll-margin-right: 14rem;
.snap-mb-56scroll-margin-bottom: 14rem;
.snap-ml-56scroll-margin-left: 14rem;
.snap-mt-64scroll-margin-top: 16rem;
.snap-mr-64scroll-margin-right: 16rem;
.snap-mb-64scroll-margin-bottom: 16rem;
.snap-ml-64scroll-margin-left: 16rem;
.snap-mt-autoscroll-margin-top: auto;
.snap-mr-autoscroll-margin-right: auto;
.snap-mb-autoscroll-margin-bottom: auto;
.snap-ml-autoscroll-margin-left: auto;
.snap-mt-pxscroll-margin-top: 1px;
.snap-mr-pxscroll-margin-right: 1px;
.snap-mb-pxscroll-margin-bottom: 1px;
.snap-ml-pxscroll-margin-left: 1px;
.-snap-mt-1scroll-margin-top: -0.25rem;
.-snap-mr-1scroll-margin-right: -0.25rem;
.-snap-mb-1scroll-margin-bottom: -0.25rem;
.-snap-ml-1scroll-margin-left: -0.25rem;
.-snap-mt-2scroll-margin-top: -0.5rem;
.-snap-mr-2scroll-margin-right: -0.5rem;
.-snap-mb-2scroll-margin-bottom: -0.5rem;
.-snap-ml-2scroll-margin-left: -0.5rem;
.-snap-mt-3scroll-margin-top: -0.75rem;
.-snap-mr-3scroll-margin-right: -0.75rem;
.-snap-mb-3scroll-margin-bottom: -0.75rem;
.-snap-ml-3scroll-margin-left: -0.75rem;
.-snap-mt-4scroll-margin-top: -1rem;
.-snap-mr-4scroll-margin-right: -1rem;
.-snap-mb-4scroll-margin-bottom: -1rem;
.-snap-ml-4scroll-margin-left: -1rem;
.-snap-mt-5scroll-margin-top: -1.25rem;
.-snap-mr-5scroll-margin-right: -1.25rem;
.-snap-mb-5scroll-margin-bottom: -1.25rem;
.-snap-ml-5scroll-margin-left: -1.25rem;
.-snap-mt-6scroll-margin-top: -1.5rem;
.-snap-mr-6scroll-margin-right: -1.5rem;
.-snap-mb-6scroll-margin-bottom: -1.5rem;
.-snap-ml-6scroll-margin-left: -1.5rem;
.-snap-mt-8scroll-margin-top: -2rem;
.-snap-mr-8scroll-margin-right: -2rem;
.-snap-mb-8scroll-margin-bottom: -2rem;
.-snap-ml-8scroll-margin-left: -2rem;
.-snap-mt-10scroll-margin-top: -2.5rem;
.-snap-mr-10scroll-margin-right: -2.5rem;
.-snap-mb-10scroll-margin-bottom: -2.5rem;
.-snap-ml-10scroll-margin-left: -2.5rem;
.-snap-mt-12scroll-margin-top: -3rem;
.-snap-mr-12scroll-margin-right: -3rem;
.-snap-mb-12scroll-margin-bottom: -3rem;
.-snap-ml-12scroll-margin-left: -3rem;
.-snap-mt-16scroll-margin-top: -4rem;
.-snap-mr-16scroll-margin-right: -4rem;
.-snap-mb-16scroll-margin-bottom: -4rem;
.-snap-ml-16scroll-margin-left: -4rem;
.-snap-mt-20scroll-margin-top: -5rem;
.-snap-mr-20scroll-margin-right: -5rem;
.-snap-mb-20scroll-margin-bottom: -5rem;
.-snap-ml-20scroll-margin-left: -5rem;
.-snap-mt-24scroll-margin-top: -6rem;
.-snap-mr-24scroll-margin-right: -6rem;
.-snap-mb-24scroll-margin-bottom: -6rem;
.-snap-ml-24scroll-margin-left: -6rem;
.-snap-mt-32scroll-margin-top: -8rem;
.-snap-mr-32scroll-margin-right: -8rem;
.-snap-mb-32scroll-margin-bottom: -8rem;
.-snap-ml-32scroll-margin-left: -8rem;
.-snap-mt-40scroll-margin-top: -10rem;
.-snap-mr-40scroll-margin-right: -10rem;
.-snap-mb-40scroll-margin-bottom: -10rem;
.-snap-ml-40scroll-margin-left: -10rem;
.-snap-mt-48scroll-margin-top: -12rem;
.-snap-mr-48scroll-margin-right: -12rem;
.-snap-mb-48scroll-margin-bottom: -12rem;
.-snap-ml-48scroll-margin-left: -12rem;
.-snap-mt-56scroll-margin-top: -14rem;
.-snap-mr-56scroll-margin-right: -14rem;
.-snap-mb-56scroll-margin-bottom: -14rem;
.-snap-ml-56scroll-margin-left: -14rem;
.-snap-mt-64scroll-margin-top: -16rem;
.-snap-mr-64scroll-margin-right: -16rem;
.-snap-mb-64scroll-margin-bottom: -16rem;
.-snap-ml-64scroll-margin-left: -16rem;
.-snap-mt-pxscroll-margin-top: -1px;
.-snap-mr-pxscroll-margin-right: -1px;
.-snap-mb-pxscroll-margin-bottom: -1px;
.-snap-ml-pxscroll-margin-left: -1px ;
\n
\n\nThe default values are inherited from your theme's spacing values, negative values included, just like [`margin`](https://tailwindcss.com/docs/margin).\n\nAlso like `margin`, you can override them your Tailwind theme configuration under the `scrollMargin` key.\n\n## Padding\n\nUtilities for the [`scroll-padding`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding) property.\n\n
\nSee the default list.\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassProperty
.snap-p-0scroll-padding: 0;
.snap-p-1scroll-padding: 0.25rem;
.snap-p-2scroll-padding: 0.5rem;
.snap-p-3scroll-padding: 0.75rem;
.snap-p-4scroll-padding: 1rem;
.snap-p-5scroll-padding: 1.25rem;
.snap-p-6scroll-padding: 1.5rem;
.snap-p-8scroll-padding: 2rem;
.snap-p-10scroll-padding: 2.5rem;
.snap-p-12scroll-padding: 3rem;
.snap-p-16scroll-padding: 4rem;
.snap-p-20scroll-padding: 5rem;
.snap-p-24scroll-padding: 6rem;
.snap-p-32scroll-padding: 8rem;
.snap-p-40scroll-padding: 10rem;
.snap-p-48scroll-padding: 12rem;
.snap-p-56scroll-padding: 14rem;
.snap-p-64scroll-padding: 16rem;
.snap-p-pxscroll-padding: 1px;
.snap-py-0scroll-padding-top: 0; scroll-padding-bottom: 0;
.snap-px-0scroll-padding-left: 0; scroll-padding-right: 0;
.snap-py-1scroll-padding-top: 0.25rem; scroll-padding-bottom: 0.25rem;
.snap-px-1scroll-padding-left: 0.25rem; scroll-padding-right: 0.25rem;
.snap-py-2scroll-padding-top: 0.5rem; scroll-padding-bottom: 0.5rem;
.snap-px-2scroll-padding-left: 0.5rem; scroll-padding-right: 0.5rem;
.snap-py-3scroll-padding-top: 0.75rem; scroll-padding-bottom: 0.75rem;
.snap-px-3scroll-padding-left: 0.75rem; scroll-padding-right: 0.75rem;
.snap-py-4scroll-padding-top: 1rem; scroll-padding-bottom: 1rem;
.snap-px-4scroll-padding-left: 1rem; scroll-padding-right: 1rem;
.snap-py-5scroll-padding-top: 1.25rem; scroll-padding-bottom: 1.25rem;
.snap-px-5scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem;
.snap-py-6scroll-padding-top: 1.5rem; scroll-padding-bottom: 1.5rem;
.snap-px-6scroll-padding-left: 1.5rem; scroll-padding-right: 1.5rem;
.snap-py-8scroll-padding-top: 2rem; scroll-padding-bottom: 2rem;
.snap-px-8scroll-padding-left: 2rem; scroll-padding-right: 2rem;
.snap-py-10scroll-padding-top: 2.5rem; scroll-padding-bottom: 2.5rem;
.snap-px-10scroll-padding-left: 2.5rem; scroll-padding-right: 2.5rem;
.snap-py-12scroll-padding-top: 3rem; scroll-padding-bottom: 3rem;
.snap-px-12scroll-padding-left: 3rem; scroll-padding-right: 3rem;
.snap-py-16scroll-padding-top: 4rem; scroll-padding-bottom: 4rem;
.snap-px-16scroll-padding-left: 4rem; scroll-padding-right: 4rem;
.snap-py-20scroll-padding-top: 5rem; scroll-padding-bottom: 5rem;
.snap-px-20scroll-padding-left: 5rem; scroll-padding-right: 5rem;
.snap-py-24scroll-padding-top: 6rem; scroll-padding-bottom: 6rem;
.snap-px-24scroll-padding-left: 6rem; scroll-padding-right: 6rem;
.snap-py-32scroll-padding-top: 8rem; scroll-padding-bottom: 8rem;
.snap-px-32scroll-padding-left: 8rem; scroll-padding-right: 8rem;
.snap-py-40scroll-padding-top: 10rem; scroll-padding-bottom: 10rem;
.snap-px-40scroll-padding-left: 10rem; scroll-padding-right: 10rem;
.snap-py-48scroll-padding-top: 12rem; scroll-padding-bottom: 12rem;
.snap-px-48scroll-padding-left: 12rem; scroll-padding-right: 12rem;
.snap-py-56scroll-padding-top: 14rem; scroll-padding-bottom: 14rem;
.snap-px-56scroll-padding-left: 14rem; scroll-padding-right: 14rem;
.snap-py-64scroll-padding-top: 16rem; scroll-padding-bottom: 16rem;
.snap-px-64scroll-padding-left: 16rem; scroll-padding-right: 16rem;
.snap-py-pxscroll-padding-top: 1px; scroll-padding-bottom: 1px;
.snap-px-pxscroll-padding-left: 1px; scroll-padding-right: 1px;
.snap-pt-0scroll-padding-top: 0;
.snap-pr-0scroll-padding-right: 0;
.snap-pb-0scroll-padding-bottom: 0;
.snap-pl-0scroll-padding-left: 0;
.snap-pt-1scroll-padding-top: 0.25rem;
.snap-pr-1scroll-padding-right: 0.25rem;
.snap-pb-1scroll-padding-bottom: 0.25rem;
.snap-pl-1scroll-padding-left: 0.25rem;
.snap-pt-2scroll-padding-top: 0.5rem;
.snap-pr-2scroll-padding-right: 0.5rem;
.snap-pb-2scroll-padding-bottom: 0.5rem;
.snap-pl-2scroll-padding-left: 0.5rem;
.snap-pt-3scroll-padding-top: 0.75rem;
.snap-pr-3scroll-padding-right: 0.75rem;
.snap-pb-3scroll-padding-bottom: 0.75rem;
.snap-pl-3scroll-padding-left: 0.75rem;
.snap-pt-4scroll-padding-top: 1rem;
.snap-pr-4scroll-padding-right: 1rem;
.snap-pb-4scroll-padding-bottom: 1rem;
.snap-pl-4scroll-padding-left: 1rem;
.snap-pt-5scroll-padding-top: 1.25rem;
.snap-pr-5scroll-padding-right: 1.25rem;
.snap-pb-5scroll-padding-bottom: 1.25rem;
.snap-pl-5scroll-padding-left: 1.25rem;
.snap-pt-6scroll-padding-top: 1.5rem;
.snap-pr-6scroll-padding-right: 1.5rem;
.snap-pb-6scroll-padding-bottom: 1.5rem;
.snap-pl-6scroll-padding-left: 1.5rem;
.snap-pt-8scroll-padding-top: 2rem;
.snap-pr-8scroll-padding-right: 2rem;
.snap-pb-8scroll-padding-bottom: 2rem;
.snap-pl-8scroll-padding-left: 2rem;
.snap-pt-10scroll-padding-top: 2.5rem;
.snap-pr-10scroll-padding-right: 2.5rem;
.snap-pb-10scroll-padding-bottom: 2.5rem;
.snap-pl-10scroll-padding-left: 2.5rem;
.snap-pt-12scroll-padding-top: 3rem;
.snap-pr-12scroll-padding-right: 3rem;
.snap-pb-12scroll-padding-bottom: 3rem;
.snap-pl-12scroll-padding-left: 3rem;
.snap-pt-16scroll-padding-top: 4rem;
.snap-pr-16scroll-padding-right: 4rem;
.snap-pb-16scroll-padding-bottom: 4rem;
.snap-pl-16scroll-padding-left: 4rem;
.snap-pt-20scroll-padding-top: 5rem;
.snap-pr-20scroll-padding-right: 5rem;
.snap-pb-20scroll-padding-bottom: 5rem;
.snap-pl-20scroll-padding-left: 5rem;
.snap-pt-24scroll-padding-top: 6rem;
.snap-pr-24scroll-padding-right: 6rem;
.snap-pb-24scroll-padding-bottom: 6rem;
.snap-pl-24scroll-padding-left: 6rem;
.snap-pt-32scroll-padding-top: 8rem;
.snap-pr-32scroll-padding-right: 8rem;
.snap-pb-32scroll-padding-bottom: 8rem;
.snap-pl-32scroll-padding-left: 8rem;
.snap-pt-40scroll-padding-top: 10rem;
.snap-pr-40scroll-padding-right: 10rem;
.snap-pb-40scroll-padding-bottom: 10rem;
.snap-pl-40scroll-padding-left: 10rem;
.snap-pt-48scroll-padding-top: 12rem;
.snap-pr-48scroll-padding-right: 12rem;
.snap-pb-48scroll-padding-bottom: 12rem;
.snap-pl-48scroll-padding-left: 12rem;
.snap-pt-56scroll-padding-top: 14rem;
.snap-pr-56scroll-padding-right: 14rem;
.snap-pb-56scroll-padding-bottom: 14rem;
.snap-pl-56scroll-padding-left: 14rem;
.snap-pt-64scroll-padding-top: 16rem;
.snap-pr-64scroll-padding-right: 16rem;
.snap-pb-64scroll-padding-bottom: 16rem;
.snap-pl-64scroll-padding-left: 16rem;
.snap-pt-pxscroll-padding-top: 1px;
.snap-pr-pxscroll-padding-right: 1px;
.snap-pb-pxscroll-padding-bottom: 1px;
.snap-pl-pxscroll-padding-left: 1px ;
\n\n
\n\nThe default values are inherited from your theme's spacing values, negative values included, just like [`padding`](https://tailwindcss.com/docs/padding).\n\nAlso like `padding`, you can override them your Tailwind theme configuration under the `scrollPadding` key.\n\n# Compatibility\n\nPlease note that IE11 [doesn't support CSS custom properties](https://caniuse.com/#feat=css-variables). If you have to support IE11, please override the `scroll-snap-type` utilities.\n" }, { "path": "jest.config.js", "content": "module.exports = {\n\tpreset: 'ts-jest',\n\ttestEnvironment: 'node',\n\tglobals: {\n\t\t'ts-jest': {\n\t\t\tdiagnostics: false,\n\t\t},\n\t},\n};\n" }, { "path": "package.json", "content": "{\n\t\"name\": \"tailwindcss-scroll-snap\",\n\t\"version\": \"1.1.0\",\n\t\"description\": \"A Tailwind CSS plugin that adds `scroll-snap` utilities.\",\n\t\"main\": \"dist/index.js\",\n\t\"author\": {\n\t\t\"email\": \"enzo@innocenzi.dev\",\n\t\t\"name\": \"Enzo Innocenzi\",\n\t\t\"url\": \"https://innocenzi.dev\"\n\t},\n\t\"scripts\": {\n\t\t\"clean\": \"rm -rf dist\",\n\t\t\"build\": \"yarn run clean && tsc\",\n\t\t\"watch\": \"yarn run clean && tsc -w\",\n\t\t\"test\": \"jest test\",\n\t\t\"test:watch\": \"jest test --watch\",\n\t\t\"release\": \"yarn build && standard-version --skip.changelog\"\n\t},\n\t\"repository\": {\n\t\t\"type\": \"git\",\n\t\t\"url\": \"git+https://github.com/innocenzi/tailwindcss-scroll-snap.git\"\n\t},\n\t\"keywords\": [\n\t\t\"tailwindcss\",\n\t\t\"scroll-snap\",\n\t\t\"smooth-scroll\"\n\t],\n\t\"license\": \"MIT\",\n\t\"bugs\": {\n\t\t\"url\": \"https://github.com/innocenzi/tailwindcss-scroll-snap/issues\"\n\t},\n\t\"homepage\": \"https://github.com/innocenzi/tailwindcss-scroll-snap#readme\",\n\t\"devDependencies\": {\n\t\t\"@types/faker\": \"^4.1.6\",\n\t\t\"@types/jest\": \"^24.0.18\",\n\t\t\"@types/lodash\": \"^4.14.149\",\n\t\t\"@types/node\": \"^13.1.4\",\n\t\t\"babel-jest\": \"^24.9.0\",\n\t\t\"faker\": \"^4.1.0\",\n\t\t\"jest\": \"^24.9.0\",\n\t\t\"jest-matcher-css\": \"^1.1.0\",\n\t\t\"jest-mock-console\": \"^1.0.0\",\n\t\t\"postcss\": \"^7.0.18\",\n\t\t\"standard-version\": \"^8.0.0\",\n\t\t\"tailwindcss\": \"^1.6\",\n\t\t\"ts-jest\": \"^24.1.0\",\n\t\t\"typescript\": \"^3.7.0\"\n\t},\n\t\"dependencies\": {\n\t\t\"lodash\": \"^4.17.15\",\n\t\t\"reduce-css-calc\": \"^2.1.7\"\n\t}\n}\n" }, { "path": "src/factories/createPlugin.ts", "content": "import _ from 'lodash';\n\n/**\n * Add utilities to Tailwind.\n *\n * @export\n * @param {string} property The Tailwind config key, which will also be the CSS property. Should be in the CSS-in-JS format.\n * @param {*} config A map of class names => property values.\n * The property values can be a string tuple where the first value would be the property name,\n * and the second value the property value.\n * @param {TailwindPluginHelpers} helpers The Tailwind plugin helpers object.\n */\nexport default function (\n\tproperty: string,\n\tconfig: any,\n\t{ e, theme, variants, addUtilities }: any,\n) {\n\taddUtilities(\n\t\t_.map(\n\t\t\ttheme(property, config),\n\t\t\t(value: string | [string, string], name: string) => ({\n\t\t\t\t[`.${e(name)}`]: {\n\t\t\t\t\t[getPropertyName(property, value)]: getValue(value),\n\t\t\t\t},\n\t\t\t}),\n\t\t),\n\t\tvariants(property, []),\n\t);\n}\n\n/**\n * Parses the property name from the value to detect tuples.\n *\n * @param {string} property\n * @param {(string | [string, string])} value\n * @returns\n */\nfunction getPropertyName(property: string, value: string | [string, string]) {\n\treturn Array.isArray(value) ? value[0] : property;\n}\n\n/**\n * Parses the actual value name from the value variable to detect tuples.\n *\n * @param {string} property\n * @param {(string | [string, string])} value\n * @returns\n */\nfunction getValue(value: string | [string, string]) {\n\treturn Array.isArray(value) ? value[1] : value;\n}\n" }, { "path": "src/factories/createSpacingPlugin.ts", "content": "import prefixNegativeModifiers from 'tailwindcss/lib/util/prefixNegativeModifiers';\nimport negative from '../utils/negative';\nimport _ from 'lodash';\n\n/**\n * Available spacing types.\n * Exported as a type instead of enum for JavaScript convenience.\n *\n * @export\n * @type {SpacingType}\n */\nexport type SpacingType = 'margin' | 'padding';\n\n/**\n * Available spacing directions.\n *\n * @export\n * @enum {number}\n */\nexport enum SpacingDirection {\n\tTop = 'top',\n\tBottom = 'bottom',\n\tLeft = 'left',\n\tRight = 'right',\n\tVertical = 'y',\n\tHorizontal = 'x',\n}\n\n/**\n * Gets the spacing property name for a given property and direction.\n *\n * @export\n * @param {string} property\n * @param {SpacingDirection} direction\n * @returns\n */\nexport function getSpacingPropertyName(\n\tproperty: string,\n\tdirection: SpacingDirection,\n) {\n\treturn `${_.kebabCase(property)}-${direction}`;\n}\n\n/**\n * Add spacing utilities to Tailwind.\n *\n * @export\n * @param {SpacingType} type The type of spacing.\n * @param {string} property The property that applies the spacing.\n * @param {string} shortname The short name for utility classes names.\n * @param {TailwindPluginHelpers} { e, theme, variants, addUtilities }\n */\nexport default function (\n\ttype: SpacingType,\n\tshortname: string,\n\tproperty: string,\n\t{ e, theme, variants, addUtilities }: any,\n) {\n\tconst prefix = `${_.kebabCase(shortname)}-${type.charAt(0)}`; // property-name-my-4\n\tconst generators: Array<(size: number, modifier: string) => any> = [\n\t\t// 4-way spacing\n\t\t(size, modifier) => {\n\t\t\treturn {\n\t\t\t\t[`.${e(prefixNegativeModifiers(prefix, modifier))}`]: {\n\t\t\t\t\t[property]: `${size}`,\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\n\t\t// 2-way spacing\n\t\t(size, modifier) => ({\n\t\t\t[`.${e(prefixNegativeModifiers(`${prefix}y`, modifier))}`]: {\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Top)]: `${size}`,\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Bottom)]: `${size}`,\n\t\t\t},\n\t\t\t[`.${e(prefixNegativeModifiers(`${prefix}x`, modifier))}`]: {\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Left)]: `${size}`,\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Right)]: `${size}`,\n\t\t\t},\n\t\t}),\n\n\t\t// 1-way spacing\n\t\t(size, modifier) => ({\n\t\t\t[`.${e(prefixNegativeModifiers(`${prefix}t`, modifier))}`]: {\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Top)]: `${size}`,\n\t\t\t},\n\t\t\t[`.${e(prefixNegativeModifiers(`${prefix}r`, modifier))}`]: {\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Right)]: `${size}`,\n\t\t\t},\n\t\t\t[`.${e(prefixNegativeModifiers(`${prefix}b`, modifier))}`]: {\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Bottom)]: `${size}`,\n\t\t\t},\n\t\t\t[`.${e(prefixNegativeModifiers(`${prefix}l`, modifier))}`]: {\n\t\t\t\t[getSpacingPropertyName(property, SpacingDirection.Left)]: `${size}`,\n\t\t\t},\n\t\t}),\n\t];\n\n\taddUtilities(\n\t\t_.flatMap(generators, generator => {\n\t\t\treturn _.flatMap(theme(property, getConfigType(type, theme)), generator);\n\t\t}),\n\t\tvariants(property),\n\t);\n}\n\nexport function getConfigType(type: SpacingType, theme: any) {\n\treturn 'margin' === type\n\t\t? negativeSpacingConfig(theme)\n\t\t: spacingConfig(theme);\n}\n\nexport const negativeSpacingConfig = (theme: any) => ({\n\tauto: 'auto',\n\t...theme('spacing'),\n\t...negative(theme('spacing')),\n});\n\nexport const spacingConfig = (theme: any) => theme('spacing');\n" }, { "path": "src/index.ts", "content": "module.exports = require('./plugin').default;\n" }, { "path": "src/plugin.ts", "content": "import addSnapTypeUtilities from './plugins/type';\nimport addSnapAlignUtilities from './plugins/align';\nimport addSnapStopUtilities from './plugins/stop';\nimport addSnapMarginUtilities from './plugins/margin';\nimport addSnapPaddingUtilities from './plugins/padding';\nimport plugin from 'tailwindcss/plugin';\nimport _ from 'lodash';\n\nexport default plugin(function (helpers: any) {\n\taddSnapTypeUtilities(helpers);\n\taddSnapAlignUtilities(helpers);\n\taddSnapStopUtilities(helpers);\n\taddSnapMarginUtilities(helpers);\n\taddSnapPaddingUtilities(helpers);\n});\n" }, { "path": "src/plugins/align.ts", "content": "import createUtilityPlugin from '../factories/createPlugin';\n\n/**\n * Adds utilities for the `scroll-snap-align` property.\n *\n * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-align\n * @export\n */\nexport default function (helpers: any) {\n\tcreateUtilityPlugin(\n\t\t'scrollSnapAlign',\n\t\t{\n\t\t\t'snap-start': 'start',\n\t\t\t'snap-end': 'end',\n\t\t\t'snap-center': 'center',\n\t\t},\n\t\thelpers,\n\t);\n}\n" }, { "path": "src/plugins/margin.ts", "content": "import createSpacingUtilityPlugin from '../factories/createSpacingPlugin';\n\n/**\n * Adds utilities for the `scroll-margin` property.\n *\n * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-margin\n * @export\n */\nexport default function (helpers: any): void {\n\tcreateSpacingUtilityPlugin('margin', 'snap', 'scrollMargin', helpers);\n}\n" }, { "path": "src/plugins/padding.ts", "content": "import createSpacingUtilityPlugin from '../factories/createSpacingPlugin';\n\n/**\n * Adds utilities for the `scroll-padding` property.\n *\n * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-padding\n * @export\n */\nexport default function (helpers: any): void {\n\tcreateSpacingUtilityPlugin('padding', 'snap', 'scrollPadding', helpers);\n}\n" }, { "path": "src/plugins/stop.ts", "content": "import createUtilityPlugin from '../factories/createPlugin';\n\n/**\n * Adds utilities for the `scroll-snap-stop` property.\n *\n * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-stop\n * @export\n */\nexport default function (helpers: any) {\n\tcreateUtilityPlugin(\n\t\t'scrollSnapStop',\n\t\t{\n\t\t\t'always-stop': 'always',\n\t\t},\n\t\thelpers,\n\t);\n}\n" }, { "path": "src/plugins/type.ts", "content": "import createUtilityPlugin from '../factories/createPlugin';\n\n/**\n * Adds utilities for the `scroll-snap-type` property.\n *\n * @see https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-type\n * @export\n */\nexport default function (helpers: any) {\n\tcreateUtilityPlugin(\n\t\t'scrollSnapType',\n\t\t{\n\t\t\t'no-snap': 'none',\n\t\t\tsnap: 'var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory)',\n\t\t\t'snap-x': ['--scroll-snap-direction', 'x'],\n\t\t\t'snap-y': ['--scroll-snap-direction', 'y'],\n\t\t\t'snap-both': ['--scroll-snap-direction', 'both'],\n\t\t\t'snap-block': ['--scroll-snap-direction', 'block'],\n\t\t\t'snap-inline': ['--scroll-snap-direction', 'inline'],\n\t\t\t'snap-mandatory': ['--scroll-snap-constraint', 'mandatory'],\n\t\t\t'snap-proximity': ['--scroll-snap-constraint', 'proximity'],\n\t\t},\n\t\thelpers,\n\t);\n}\n" }, { "path": "src/utils/negateValue.ts", "content": "import reduceCalc from 'reduce-css-calc';\n\nexport default function (value: any) {\n\ttry {\n\t\treturn reduceCalc(`calc(${value} * -1)`);\n\t} catch (e) {\n\t\treturn value;\n\t}\n}\n" }, { "path": "src/utils/negative.ts", "content": "import negateValue from \"./negateValue\";\n\nexport default function negative(scale: any) {\n return Object.keys(scale)\n .filter(key => scale[key] !== '0')\n .reduce(\n (negativeScale, key) => ({\n ...negativeScale,\n [`-${key}`]: negateValue(scale[key]),\n }),\n {}\n );\n}\n" }, { "path": "test/bench/scroll-snap.css", "content": ".no-snap {\n scroll-snap-type: none\n}\n\n.snap {\n scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory)\n}\n\n.snap-x {\n --scroll-snap-direction: x\n}\n\n.snap-y {\n --scroll-snap-direction: y\n}\n\n.snap-both {\n --scroll-snap-direction: both\n}\n\n.snap-block {\n --scroll-snap-direction: block\n}\n\n.snap-inline {\n --scroll-snap-direction: inline\n}\n\n.snap-mandatory {\n --scroll-snap-constraint: mandatory\n}\n\n.snap-proximity {\n --scroll-snap-constraint: proximity\n}\n\n.snap-start {\n scroll-snap-align: start\n}\n\n.snap-end {\n scroll-snap-align: end\n}\n\n.snap-center {\n scroll-snap-align: center\n}\n\n.always-stop {\n scroll-snap-stop: always\n}\n\n.snap-m-0 {\n scroll-margin: 0\n}\n\n.snap-m-1 {\n scroll-margin: 0.25rem\n}\n\n.snap-m-2 {\n scroll-margin: 0.5rem\n}\n\n.snap-m-3 {\n scroll-margin: 0.75rem\n}\n\n.snap-m-4 {\n scroll-margin: 1rem\n}\n\n.snap-m-5 {\n scroll-margin: 1.25rem\n}\n\n.snap-m-6 {\n scroll-margin: 1.5rem\n}\n\n.snap-m-8 {\n scroll-margin: 2rem\n}\n\n.snap-m-10 {\n scroll-margin: 2.5rem\n}\n\n.snap-m-12 {\n scroll-margin: 3rem\n}\n\n.snap-m-16 {\n scroll-margin: 4rem\n}\n\n.snap-m-20 {\n scroll-margin: 5rem\n}\n\n.snap-m-24 {\n scroll-margin: 6rem\n}\n\n.snap-m-32 {\n scroll-margin: 8rem\n}\n\n.snap-m-40 {\n scroll-margin: 10rem\n}\n\n.snap-m-48 {\n scroll-margin: 12rem\n}\n\n.snap-m-56 {\n scroll-margin: 14rem\n}\n\n.snap-m-64 {\n scroll-margin: 16rem\n}\n\n.snap-m-auto {\n scroll-margin: auto\n}\n\n.snap-m-px {\n scroll-margin: 1px\n}\n\n.-snap-m-1 {\n scroll-margin: -0.25rem\n}\n\n.-snap-m-2 {\n scroll-margin: -0.5rem\n}\n\n.-snap-m-3 {\n scroll-margin: -0.75rem\n}\n\n.-snap-m-4 {\n scroll-margin: -1rem\n}\n\n.-snap-m-5 {\n scroll-margin: -1.25rem\n}\n\n.-snap-m-6 {\n scroll-margin: -1.5rem\n}\n\n.-snap-m-8 {\n scroll-margin: -2rem\n}\n\n.-snap-m-10 {\n scroll-margin: -2.5rem\n}\n\n.-snap-m-12 {\n scroll-margin: -3rem\n}\n\n.-snap-m-16 {\n scroll-margin: -4rem\n}\n\n.-snap-m-20 {\n scroll-margin: -5rem\n}\n\n.-snap-m-24 {\n scroll-margin: -6rem\n}\n\n.-snap-m-32 {\n scroll-margin: -8rem\n}\n\n.-snap-m-40 {\n scroll-margin: -10rem\n}\n\n.-snap-m-48 {\n scroll-margin: -12rem\n}\n\n.-snap-m-56 {\n scroll-margin: -14rem\n}\n\n.-snap-m-64 {\n scroll-margin: -16rem\n}\n\n.-snap-m-px {\n scroll-margin: -1px\n}\n\n.snap-my-0 {\n scroll-margin-top: 0;\n scroll-margin-bottom: 0\n}\n\n.snap-mx-0 {\n scroll-margin-left: 0;\n scroll-margin-right: 0\n}\n\n.snap-my-1 {\n scroll-margin-top: 0.25rem;\n scroll-margin-bottom: 0.25rem\n}\n\n.snap-mx-1 {\n scroll-margin-left: 0.25rem;\n scroll-margin-right: 0.25rem\n}\n\n.snap-my-2 {\n scroll-margin-top: 0.5rem;\n scroll-margin-bottom: 0.5rem\n}\n\n.snap-mx-2 {\n scroll-margin-left: 0.5rem;\n scroll-margin-right: 0.5rem\n}\n\n.snap-my-3 {\n scroll-margin-top: 0.75rem;\n scroll-margin-bottom: 0.75rem\n}\n\n.snap-mx-3 {\n scroll-margin-left: 0.75rem;\n scroll-margin-right: 0.75rem\n}\n\n.snap-my-4 {\n scroll-margin-top: 1rem;\n scroll-margin-bottom: 1rem\n}\n\n.snap-mx-4 {\n scroll-margin-left: 1rem;\n scroll-margin-right: 1rem\n}\n\n.snap-my-5 {\n scroll-margin-top: 1.25rem;\n scroll-margin-bottom: 1.25rem\n}\n\n.snap-mx-5 {\n scroll-margin-left: 1.25rem;\n scroll-margin-right: 1.25rem\n}\n\n.snap-my-6 {\n scroll-margin-top: 1.5rem;\n scroll-margin-bottom: 1.5rem\n}\n\n.snap-mx-6 {\n scroll-margin-left: 1.5rem;\n scroll-margin-right: 1.5rem\n}\n\n.snap-my-8 {\n scroll-margin-top: 2rem;\n scroll-margin-bottom: 2rem\n}\n\n.snap-mx-8 {\n scroll-margin-left: 2rem;\n scroll-margin-right: 2rem\n}\n\n.snap-my-10 {\n scroll-margin-top: 2.5rem;\n scroll-margin-bottom: 2.5rem\n}\n\n.snap-mx-10 {\n scroll-margin-left: 2.5rem;\n scroll-margin-right: 2.5rem\n}\n\n.snap-my-12 {\n scroll-margin-top: 3rem;\n scroll-margin-bottom: 3rem\n}\n\n.snap-mx-12 {\n scroll-margin-left: 3rem;\n scroll-margin-right: 3rem\n}\n\n.snap-my-16 {\n scroll-margin-top: 4rem;\n scroll-margin-bottom: 4rem\n}\n\n.snap-mx-16 {\n scroll-margin-left: 4rem;\n scroll-margin-right: 4rem\n}\n\n.snap-my-20 {\n scroll-margin-top: 5rem;\n scroll-margin-bottom: 5rem\n}\n\n.snap-mx-20 {\n scroll-margin-left: 5rem;\n scroll-margin-right: 5rem\n}\n\n.snap-my-24 {\n scroll-margin-top: 6rem;\n scroll-margin-bottom: 6rem\n}\n\n.snap-mx-24 {\n scroll-margin-left: 6rem;\n scroll-margin-right: 6rem\n}\n\n.snap-my-32 {\n scroll-margin-top: 8rem;\n scroll-margin-bottom: 8rem\n}\n\n.snap-mx-32 {\n scroll-margin-left: 8rem;\n scroll-margin-right: 8rem\n}\n\n.snap-my-40 {\n scroll-margin-top: 10rem;\n scroll-margin-bottom: 10rem\n}\n\n.snap-mx-40 {\n scroll-margin-left: 10rem;\n scroll-margin-right: 10rem\n}\n\n.snap-my-48 {\n scroll-margin-top: 12rem;\n scroll-margin-bottom: 12rem\n}\n\n.snap-mx-48 {\n scroll-margin-left: 12rem;\n scroll-margin-right: 12rem\n}\n\n.snap-my-56 {\n scroll-margin-top: 14rem;\n scroll-margin-bottom: 14rem\n}\n\n.snap-mx-56 {\n scroll-margin-left: 14rem;\n scroll-margin-right: 14rem\n}\n\n.snap-my-64 {\n scroll-margin-top: 16rem;\n scroll-margin-bottom: 16rem\n}\n\n.snap-mx-64 {\n scroll-margin-left: 16rem;\n scroll-margin-right: 16rem\n}\n\n.snap-my-auto {\n scroll-margin-top: auto;\n scroll-margin-bottom: auto\n}\n\n.snap-mx-auto {\n scroll-margin-left: auto;\n scroll-margin-right: auto\n}\n\n.snap-my-px {\n scroll-margin-top: 1px;\n scroll-margin-bottom: 1px\n}\n\n.snap-mx-px {\n scroll-margin-left: 1px;\n scroll-margin-right: 1px\n}\n\n.-snap-my-1 {\n scroll-margin-top: -0.25rem;\n scroll-margin-bottom: -0.25rem\n}\n\n.-snap-mx-1 {\n scroll-margin-left: -0.25rem;\n scroll-margin-right: -0.25rem\n}\n\n.-snap-my-2 {\n scroll-margin-top: -0.5rem;\n scroll-margin-bottom: -0.5rem\n}\n\n.-snap-mx-2 {\n scroll-margin-left: -0.5rem;\n scroll-margin-right: -0.5rem\n}\n\n.-snap-my-3 {\n scroll-margin-top: -0.75rem;\n scroll-margin-bottom: -0.75rem\n}\n\n.-snap-mx-3 {\n scroll-margin-left: -0.75rem;\n scroll-margin-right: -0.75rem\n}\n\n.-snap-my-4 {\n scroll-margin-top: -1rem;\n scroll-margin-bottom: -1rem\n}\n\n.-snap-mx-4 {\n scroll-margin-left: -1rem;\n scroll-margin-right: -1rem\n}\n\n.-snap-my-5 {\n scroll-margin-top: -1.25rem;\n scroll-margin-bottom: -1.25rem\n}\n\n.-snap-mx-5 {\n scroll-margin-left: -1.25rem;\n scroll-margin-right: -1.25rem\n}\n\n.-snap-my-6 {\n scroll-margin-top: -1.5rem;\n scroll-margin-bottom: -1.5rem\n}\n\n.-snap-mx-6 {\n scroll-margin-left: -1.5rem;\n scroll-margin-right: -1.5rem\n}\n\n.-snap-my-8 {\n scroll-margin-top: -2rem;\n scroll-margin-bottom: -2rem\n}\n\n.-snap-mx-8 {\n scroll-margin-left: -2rem;\n scroll-margin-right: -2rem\n}\n\n.-snap-my-10 {\n scroll-margin-top: -2.5rem;\n scroll-margin-bottom: -2.5rem\n}\n\n.-snap-mx-10 {\n scroll-margin-left: -2.5rem;\n scroll-margin-right: -2.5rem\n}\n\n.-snap-my-12 {\n scroll-margin-top: -3rem;\n scroll-margin-bottom: -3rem\n}\n\n.-snap-mx-12 {\n scroll-margin-left: -3rem;\n scroll-margin-right: -3rem\n}\n\n.-snap-my-16 {\n scroll-margin-top: -4rem;\n scroll-margin-bottom: -4rem\n}\n\n.-snap-mx-16 {\n scroll-margin-left: -4rem;\n scroll-margin-right: -4rem\n}\n\n.-snap-my-20 {\n scroll-margin-top: -5rem;\n scroll-margin-bottom: -5rem\n}\n\n.-snap-mx-20 {\n scroll-margin-left: -5rem;\n scroll-margin-right: -5rem\n}\n\n.-snap-my-24 {\n scroll-margin-top: -6rem;\n scroll-margin-bottom: -6rem\n}\n\n.-snap-mx-24 {\n scroll-margin-left: -6rem;\n scroll-margin-right: -6rem\n}\n\n.-snap-my-32 {\n scroll-margin-top: -8rem;\n scroll-margin-bottom: -8rem\n}\n\n.-snap-mx-32 {\n scroll-margin-left: -8rem;\n scroll-margin-right: -8rem\n}\n\n.-snap-my-40 {\n scroll-margin-top: -10rem;\n scroll-margin-bottom: -10rem\n}\n\n.-snap-mx-40 {\n scroll-margin-left: -10rem;\n scroll-margin-right: -10rem\n}\n\n.-snap-my-48 {\n scroll-margin-top: -12rem;\n scroll-margin-bottom: -12rem\n}\n\n.-snap-mx-48 {\n scroll-margin-left: -12rem;\n scroll-margin-right: -12rem\n}\n\n.-snap-my-56 {\n scroll-margin-top: -14rem;\n scroll-margin-bottom: -14rem\n}\n\n.-snap-mx-56 {\n scroll-margin-left: -14rem;\n scroll-margin-right: -14rem\n}\n\n.-snap-my-64 {\n scroll-margin-top: -16rem;\n scroll-margin-bottom: -16rem\n}\n\n.-snap-mx-64 {\n scroll-margin-left: -16rem;\n scroll-margin-right: -16rem\n}\n\n.-snap-my-px {\n scroll-margin-top: -1px;\n scroll-margin-bottom: -1px\n}\n\n.-snap-mx-px {\n scroll-margin-left: -1px;\n scroll-margin-right: -1px\n}\n\n.snap-mt-0 {\n scroll-margin-top: 0\n}\n\n.snap-mr-0 {\n scroll-margin-right: 0\n}\n\n.snap-mb-0 {\n scroll-margin-bottom: 0\n}\n\n.snap-ml-0 {\n scroll-margin-left: 0\n}\n\n.snap-mt-1 {\n scroll-margin-top: 0.25rem\n}\n\n.snap-mr-1 {\n scroll-margin-right: 0.25rem\n}\n\n.snap-mb-1 {\n scroll-margin-bottom: 0.25rem\n}\n\n.snap-ml-1 {\n scroll-margin-left: 0.25rem\n}\n\n.snap-mt-2 {\n scroll-margin-top: 0.5rem\n}\n\n.snap-mr-2 {\n scroll-margin-right: 0.5rem\n}\n\n.snap-mb-2 {\n scroll-margin-bottom: 0.5rem\n}\n\n.snap-ml-2 {\n scroll-margin-left: 0.5rem\n}\n\n.snap-mt-3 {\n scroll-margin-top: 0.75rem\n}\n\n.snap-mr-3 {\n scroll-margin-right: 0.75rem\n}\n\n.snap-mb-3 {\n scroll-margin-bottom: 0.75rem\n}\n\n.snap-ml-3 {\n scroll-margin-left: 0.75rem\n}\n\n.snap-mt-4 {\n scroll-margin-top: 1rem\n}\n\n.snap-mr-4 {\n scroll-margin-right: 1rem\n}\n\n.snap-mb-4 {\n scroll-margin-bottom: 1rem\n}\n\n.snap-ml-4 {\n scroll-margin-left: 1rem\n}\n\n.snap-mt-5 {\n scroll-margin-top: 1.25rem\n}\n\n.snap-mr-5 {\n scroll-margin-right: 1.25rem\n}\n\n.snap-mb-5 {\n scroll-margin-bottom: 1.25rem\n}\n\n.snap-ml-5 {\n scroll-margin-left: 1.25rem\n}\n\n.snap-mt-6 {\n scroll-margin-top: 1.5rem\n}\n\n.snap-mr-6 {\n scroll-margin-right: 1.5rem\n}\n\n.snap-mb-6 {\n scroll-margin-bottom: 1.5rem\n}\n\n.snap-ml-6 {\n scroll-margin-left: 1.5rem\n}\n\n.snap-mt-8 {\n scroll-margin-top: 2rem\n}\n\n.snap-mr-8 {\n scroll-margin-right: 2rem\n}\n\n.snap-mb-8 {\n scroll-margin-bottom: 2rem\n}\n\n.snap-ml-8 {\n scroll-margin-left: 2rem\n}\n\n.snap-mt-10 {\n scroll-margin-top: 2.5rem\n}\n\n.snap-mr-10 {\n scroll-margin-right: 2.5rem\n}\n\n.snap-mb-10 {\n scroll-margin-bottom: 2.5rem\n}\n\n.snap-ml-10 {\n scroll-margin-left: 2.5rem\n}\n\n.snap-mt-12 {\n scroll-margin-top: 3rem\n}\n\n.snap-mr-12 {\n scroll-margin-right: 3rem\n}\n\n.snap-mb-12 {\n scroll-margin-bottom: 3rem\n}\n\n.snap-ml-12 {\n scroll-margin-left: 3rem\n}\n\n.snap-mt-16 {\n scroll-margin-top: 4rem\n}\n\n.snap-mr-16 {\n scroll-margin-right: 4rem\n}\n\n.snap-mb-16 {\n scroll-margin-bottom: 4rem\n}\n\n.snap-ml-16 {\n scroll-margin-left: 4rem\n}\n\n.snap-mt-20 {\n scroll-margin-top: 5rem\n}\n\n.snap-mr-20 {\n scroll-margin-right: 5rem\n}\n\n.snap-mb-20 {\n scroll-margin-bottom: 5rem\n}\n\n.snap-ml-20 {\n scroll-margin-left: 5rem\n}\n\n.snap-mt-24 {\n scroll-margin-top: 6rem\n}\n\n.snap-mr-24 {\n scroll-margin-right: 6rem\n}\n\n.snap-mb-24 {\n scroll-margin-bottom: 6rem\n}\n\n.snap-ml-24 {\n scroll-margin-left: 6rem\n}\n\n.snap-mt-32 {\n scroll-margin-top: 8rem\n}\n\n.snap-mr-32 {\n scroll-margin-right: 8rem\n}\n\n.snap-mb-32 {\n scroll-margin-bottom: 8rem\n}\n\n.snap-ml-32 {\n scroll-margin-left: 8rem\n}\n\n.snap-mt-40 {\n scroll-margin-top: 10rem\n}\n\n.snap-mr-40 {\n scroll-margin-right: 10rem\n}\n\n.snap-mb-40 {\n scroll-margin-bottom: 10rem\n}\n\n.snap-ml-40 {\n scroll-margin-left: 10rem\n}\n\n.snap-mt-48 {\n scroll-margin-top: 12rem\n}\n\n.snap-mr-48 {\n scroll-margin-right: 12rem\n}\n\n.snap-mb-48 {\n scroll-margin-bottom: 12rem\n}\n\n.snap-ml-48 {\n scroll-margin-left: 12rem\n}\n\n.snap-mt-56 {\n scroll-margin-top: 14rem\n}\n\n.snap-mr-56 {\n scroll-margin-right: 14rem\n}\n\n.snap-mb-56 {\n scroll-margin-bottom: 14rem\n}\n\n.snap-ml-56 {\n scroll-margin-left: 14rem\n}\n\n.snap-mt-64 {\n scroll-margin-top: 16rem\n}\n\n.snap-mr-64 {\n scroll-margin-right: 16rem\n}\n\n.snap-mb-64 {\n scroll-margin-bottom: 16rem\n}\n\n.snap-ml-64 {\n scroll-margin-left: 16rem\n}\n\n.snap-mt-auto {\n scroll-margin-top: auto\n}\n\n.snap-mr-auto {\n scroll-margin-right: auto\n}\n\n.snap-mb-auto {\n scroll-margin-bottom: auto\n}\n\n.snap-ml-auto {\n scroll-margin-left: auto\n}\n\n.snap-mt-px {\n scroll-margin-top: 1px\n}\n\n.snap-mr-px {\n scroll-margin-right: 1px\n}\n\n.snap-mb-px {\n scroll-margin-bottom: 1px\n}\n\n.snap-ml-px {\n scroll-margin-left: 1px\n}\n\n.-snap-mt-1 {\n scroll-margin-top: -0.25rem\n}\n\n.-snap-mr-1 {\n scroll-margin-right: -0.25rem\n}\n\n.-snap-mb-1 {\n scroll-margin-bottom: -0.25rem\n}\n\n.-snap-ml-1 {\n scroll-margin-left: -0.25rem\n}\n\n.-snap-mt-2 {\n scroll-margin-top: -0.5rem\n}\n\n.-snap-mr-2 {\n scroll-margin-right: -0.5rem\n}\n\n.-snap-mb-2 {\n scroll-margin-bottom: -0.5rem\n}\n\n.-snap-ml-2 {\n scroll-margin-left: -0.5rem\n}\n\n.-snap-mt-3 {\n scroll-margin-top: -0.75rem\n}\n\n.-snap-mr-3 {\n scroll-margin-right: -0.75rem\n}\n\n.-snap-mb-3 {\n scroll-margin-bottom: -0.75rem\n}\n\n.-snap-ml-3 {\n scroll-margin-left: -0.75rem\n}\n\n.-snap-mt-4 {\n scroll-margin-top: -1rem\n}\n\n.-snap-mr-4 {\n scroll-margin-right: -1rem\n}\n\n.-snap-mb-4 {\n scroll-margin-bottom: -1rem\n}\n\n.-snap-ml-4 {\n scroll-margin-left: -1rem\n}\n\n.-snap-mt-5 {\n scroll-margin-top: -1.25rem\n}\n\n.-snap-mr-5 {\n scroll-margin-right: -1.25rem\n}\n\n.-snap-mb-5 {\n scroll-margin-bottom: -1.25rem\n}\n\n.-snap-ml-5 {\n scroll-margin-left: -1.25rem\n}\n\n.-snap-mt-6 {\n scroll-margin-top: -1.5rem\n}\n\n.-snap-mr-6 {\n scroll-margin-right: -1.5rem\n}\n\n.-snap-mb-6 {\n scroll-margin-bottom: -1.5rem\n}\n\n.-snap-ml-6 {\n scroll-margin-left: -1.5rem\n}\n\n.-snap-mt-8 {\n scroll-margin-top: -2rem\n}\n\n.-snap-mr-8 {\n scroll-margin-right: -2rem\n}\n\n.-snap-mb-8 {\n scroll-margin-bottom: -2rem\n}\n\n.-snap-ml-8 {\n scroll-margin-left: -2rem\n}\n\n.-snap-mt-10 {\n scroll-margin-top: -2.5rem\n}\n\n.-snap-mr-10 {\n scroll-margin-right: -2.5rem\n}\n\n.-snap-mb-10 {\n scroll-margin-bottom: -2.5rem\n}\n\n.-snap-ml-10 {\n scroll-margin-left: -2.5rem\n}\n\n.-snap-mt-12 {\n scroll-margin-top: -3rem\n}\n\n.-snap-mr-12 {\n scroll-margin-right: -3rem\n}\n\n.-snap-mb-12 {\n scroll-margin-bottom: -3rem\n}\n\n.-snap-ml-12 {\n scroll-margin-left: -3rem\n}\n\n.-snap-mt-16 {\n scroll-margin-top: -4rem\n}\n\n.-snap-mr-16 {\n scroll-margin-right: -4rem\n}\n\n.-snap-mb-16 {\n scroll-margin-bottom: -4rem\n}\n\n.-snap-ml-16 {\n scroll-margin-left: -4rem\n}\n\n.-snap-mt-20 {\n scroll-margin-top: -5rem\n}\n\n.-snap-mr-20 {\n scroll-margin-right: -5rem\n}\n\n.-snap-mb-20 {\n scroll-margin-bottom: -5rem\n}\n\n.-snap-ml-20 {\n scroll-margin-left: -5rem\n}\n\n.-snap-mt-24 {\n scroll-margin-top: -6rem\n}\n\n.-snap-mr-24 {\n scroll-margin-right: -6rem\n}\n\n.-snap-mb-24 {\n scroll-margin-bottom: -6rem\n}\n\n.-snap-ml-24 {\n scroll-margin-left: -6rem\n}\n\n.-snap-mt-32 {\n scroll-margin-top: -8rem\n}\n\n.-snap-mr-32 {\n scroll-margin-right: -8rem\n}\n\n.-snap-mb-32 {\n scroll-margin-bottom: -8rem\n}\n\n.-snap-ml-32 {\n scroll-margin-left: -8rem\n}\n\n.-snap-mt-40 {\n scroll-margin-top: -10rem\n}\n\n.-snap-mr-40 {\n scroll-margin-right: -10rem\n}\n\n.-snap-mb-40 {\n scroll-margin-bottom: -10rem\n}\n\n.-snap-ml-40 {\n scroll-margin-left: -10rem\n}\n\n.-snap-mt-48 {\n scroll-margin-top: -12rem\n}\n\n.-snap-mr-48 {\n scroll-margin-right: -12rem\n}\n\n.-snap-mb-48 {\n scroll-margin-bottom: -12rem\n}\n\n.-snap-ml-48 {\n scroll-margin-left: -12rem\n}\n\n.-snap-mt-56 {\n scroll-margin-top: -14rem\n}\n\n.-snap-mr-56 {\n scroll-margin-right: -14rem\n}\n\n.-snap-mb-56 {\n scroll-margin-bottom: -14rem\n}\n\n.-snap-ml-56 {\n scroll-margin-left: -14rem\n}\n\n.-snap-mt-64 {\n scroll-margin-top: -16rem\n}\n\n.-snap-mr-64 {\n scroll-margin-right: -16rem\n}\n\n.-snap-mb-64 {\n scroll-margin-bottom: -16rem\n}\n\n.-snap-ml-64 {\n scroll-margin-left: -16rem\n}\n\n.-snap-mt-px {\n scroll-margin-top: -1px\n}\n\n.-snap-mr-px {\n scroll-margin-right: -1px\n}\n\n.-snap-mb-px {\n scroll-margin-bottom: -1px\n}\n\n.-snap-ml-px {\n scroll-margin-left: -1px\n}\n\n.snap-p-0 {\n scroll-padding: 0\n}\n\n.snap-p-1 {\n scroll-padding: 0.25rem\n}\n\n.snap-p-2 {\n scroll-padding: 0.5rem\n}\n\n.snap-p-3 {\n scroll-padding: 0.75rem\n}\n\n.snap-p-4 {\n scroll-padding: 1rem\n}\n\n.snap-p-5 {\n scroll-padding: 1.25rem\n}\n\n.snap-p-6 {\n scroll-padding: 1.5rem\n}\n\n.snap-p-8 {\n scroll-padding: 2rem\n}\n\n.snap-p-10 {\n scroll-padding: 2.5rem\n}\n\n.snap-p-12 {\n scroll-padding: 3rem\n}\n\n.snap-p-16 {\n scroll-padding: 4rem\n}\n\n.snap-p-20 {\n scroll-padding: 5rem\n}\n\n.snap-p-24 {\n scroll-padding: 6rem\n}\n\n.snap-p-32 {\n scroll-padding: 8rem\n}\n\n.snap-p-40 {\n scroll-padding: 10rem\n}\n\n.snap-p-48 {\n scroll-padding: 12rem\n}\n\n.snap-p-56 {\n scroll-padding: 14rem\n}\n\n.snap-p-64 {\n scroll-padding: 16rem\n}\n\n.snap-p-px {\n scroll-padding: 1px\n}\n\n.snap-py-0 {\n scroll-padding-top: 0;\n scroll-padding-bottom: 0\n}\n\n.snap-px-0 {\n scroll-padding-left: 0;\n scroll-padding-right: 0\n}\n\n.snap-py-1 {\n scroll-padding-top: 0.25rem;\n scroll-padding-bottom: 0.25rem\n}\n\n.snap-px-1 {\n scroll-padding-left: 0.25rem;\n scroll-padding-right: 0.25rem\n}\n\n.snap-py-2 {\n scroll-padding-top: 0.5rem;\n scroll-padding-bottom: 0.5rem\n}\n\n.snap-px-2 {\n scroll-padding-left: 0.5rem;\n scroll-padding-right: 0.5rem\n}\n\n.snap-py-3 {\n scroll-padding-top: 0.75rem;\n scroll-padding-bottom: 0.75rem\n}\n\n.snap-px-3 {\n scroll-padding-left: 0.75rem;\n scroll-padding-right: 0.75rem\n}\n\n.snap-py-4 {\n scroll-padding-top: 1rem;\n scroll-padding-bottom: 1rem\n}\n\n.snap-px-4 {\n scroll-padding-left: 1rem;\n scroll-padding-right: 1rem\n}\n\n.snap-py-5 {\n scroll-padding-top: 1.25rem;\n scroll-padding-bottom: 1.25rem\n}\n\n.snap-px-5 {\n scroll-padding-left: 1.25rem;\n scroll-padding-right: 1.25rem\n}\n\n.snap-py-6 {\n scroll-padding-top: 1.5rem;\n scroll-padding-bottom: 1.5rem\n}\n\n.snap-px-6 {\n scroll-padding-left: 1.5rem;\n scroll-padding-right: 1.5rem\n}\n\n.snap-py-8 {\n scroll-padding-top: 2rem;\n scroll-padding-bottom: 2rem\n}\n\n.snap-px-8 {\n scroll-padding-left: 2rem;\n scroll-padding-right: 2rem\n}\n\n.snap-py-10 {\n scroll-padding-top: 2.5rem;\n scroll-padding-bottom: 2.5rem\n}\n\n.snap-px-10 {\n scroll-padding-left: 2.5rem;\n scroll-padding-right: 2.5rem\n}\n\n.snap-py-12 {\n scroll-padding-top: 3rem;\n scroll-padding-bottom: 3rem\n}\n\n.snap-px-12 {\n scroll-padding-left: 3rem;\n scroll-padding-right: 3rem\n}\n\n.snap-py-16 {\n scroll-padding-top: 4rem;\n scroll-padding-bottom: 4rem\n}\n\n.snap-px-16 {\n scroll-padding-left: 4rem;\n scroll-padding-right: 4rem\n}\n\n.snap-py-20 {\n scroll-padding-top: 5rem;\n scroll-padding-bottom: 5rem\n}\n\n.snap-px-20 {\n scroll-padding-left: 5rem;\n scroll-padding-right: 5rem\n}\n\n.snap-py-24 {\n scroll-padding-top: 6rem;\n scroll-padding-bottom: 6rem\n}\n\n.snap-px-24 {\n scroll-padding-left: 6rem;\n scroll-padding-right: 6rem\n}\n\n.snap-py-32 {\n scroll-padding-top: 8rem;\n scroll-padding-bottom: 8rem\n}\n\n.snap-px-32 {\n scroll-padding-left: 8rem;\n scroll-padding-right: 8rem\n}\n\n.snap-py-40 {\n scroll-padding-top: 10rem;\n scroll-padding-bottom: 10rem\n}\n\n.snap-px-40 {\n scroll-padding-left: 10rem;\n scroll-padding-right: 10rem\n}\n\n.snap-py-48 {\n scroll-padding-top: 12rem;\n scroll-padding-bottom: 12rem\n}\n\n.snap-px-48 {\n scroll-padding-left: 12rem;\n scroll-padding-right: 12rem\n}\n\n.snap-py-56 {\n scroll-padding-top: 14rem;\n scroll-padding-bottom: 14rem\n}\n\n.snap-px-56 {\n scroll-padding-left: 14rem;\n scroll-padding-right: 14rem\n}\n\n.snap-py-64 {\n scroll-padding-top: 16rem;\n scroll-padding-bottom: 16rem\n}\n\n.snap-px-64 {\n scroll-padding-left: 16rem;\n scroll-padding-right: 16rem\n}\n\n.snap-py-px {\n scroll-padding-top: 1px;\n scroll-padding-bottom: 1px\n}\n\n.snap-px-px {\n scroll-padding-left: 1px;\n scroll-padding-right: 1px\n}\n\n.snap-pt-0 {\n scroll-padding-top: 0\n}\n\n.snap-pr-0 {\n scroll-padding-right: 0\n}\n\n.snap-pb-0 {\n scroll-padding-bottom: 0\n}\n\n.snap-pl-0 {\n scroll-padding-left: 0\n}\n\n.snap-pt-1 {\n scroll-padding-top: 0.25rem\n}\n\n.snap-pr-1 {\n scroll-padding-right: 0.25rem\n}\n\n.snap-pb-1 {\n scroll-padding-bottom: 0.25rem\n}\n\n.snap-pl-1 {\n scroll-padding-left: 0.25rem\n}\n\n.snap-pt-2 {\n scroll-padding-top: 0.5rem\n}\n\n.snap-pr-2 {\n scroll-padding-right: 0.5rem\n}\n\n.snap-pb-2 {\n scroll-padding-bottom: 0.5rem\n}\n\n.snap-pl-2 {\n scroll-padding-left: 0.5rem\n}\n\n.snap-pt-3 {\n scroll-padding-top: 0.75rem\n}\n\n.snap-pr-3 {\n scroll-padding-right: 0.75rem\n}\n\n.snap-pb-3 {\n scroll-padding-bottom: 0.75rem\n}\n\n.snap-pl-3 {\n scroll-padding-left: 0.75rem\n}\n\n.snap-pt-4 {\n scroll-padding-top: 1rem\n}\n\n.snap-pr-4 {\n scroll-padding-right: 1rem\n}\n\n.snap-pb-4 {\n scroll-padding-bottom: 1rem\n}\n\n.snap-pl-4 {\n scroll-padding-left: 1rem\n}\n\n.snap-pt-5 {\n scroll-padding-top: 1.25rem\n}\n\n.snap-pr-5 {\n scroll-padding-right: 1.25rem\n}\n\n.snap-pb-5 {\n scroll-padding-bottom: 1.25rem\n}\n\n.snap-pl-5 {\n scroll-padding-left: 1.25rem\n}\n\n.snap-pt-6 {\n scroll-padding-top: 1.5rem\n}\n\n.snap-pr-6 {\n scroll-padding-right: 1.5rem\n}\n\n.snap-pb-6 {\n scroll-padding-bottom: 1.5rem\n}\n\n.snap-pl-6 {\n scroll-padding-left: 1.5rem\n}\n\n.snap-pt-8 {\n scroll-padding-top: 2rem\n}\n\n.snap-pr-8 {\n scroll-padding-right: 2rem\n}\n\n.snap-pb-8 {\n scroll-padding-bottom: 2rem\n}\n\n.snap-pl-8 {\n scroll-padding-left: 2rem\n}\n\n.snap-pt-10 {\n scroll-padding-top: 2.5rem\n}\n\n.snap-pr-10 {\n scroll-padding-right: 2.5rem\n}\n\n.snap-pb-10 {\n scroll-padding-bottom: 2.5rem\n}\n\n.snap-pl-10 {\n scroll-padding-left: 2.5rem\n}\n\n.snap-pt-12 {\n scroll-padding-top: 3rem\n}\n\n.snap-pr-12 {\n scroll-padding-right: 3rem\n}\n\n.snap-pb-12 {\n scroll-padding-bottom: 3rem\n}\n\n.snap-pl-12 {\n scroll-padding-left: 3rem\n}\n\n.snap-pt-16 {\n scroll-padding-top: 4rem\n}\n\n.snap-pr-16 {\n scroll-padding-right: 4rem\n}\n\n.snap-pb-16 {\n scroll-padding-bottom: 4rem\n}\n\n.snap-pl-16 {\n scroll-padding-left: 4rem\n}\n\n.snap-pt-20 {\n scroll-padding-top: 5rem\n}\n\n.snap-pr-20 {\n scroll-padding-right: 5rem\n}\n\n.snap-pb-20 {\n scroll-padding-bottom: 5rem\n}\n\n.snap-pl-20 {\n scroll-padding-left: 5rem\n}\n\n.snap-pt-24 {\n scroll-padding-top: 6rem\n}\n\n.snap-pr-24 {\n scroll-padding-right: 6rem\n}\n\n.snap-pb-24 {\n scroll-padding-bottom: 6rem\n}\n\n.snap-pl-24 {\n scroll-padding-left: 6rem\n}\n\n.snap-pt-32 {\n scroll-padding-top: 8rem\n}\n\n.snap-pr-32 {\n scroll-padding-right: 8rem\n}\n\n.snap-pb-32 {\n scroll-padding-bottom: 8rem\n}\n\n.snap-pl-32 {\n scroll-padding-left: 8rem\n}\n\n.snap-pt-40 {\n scroll-padding-top: 10rem\n}\n\n.snap-pr-40 {\n scroll-padding-right: 10rem\n}\n\n.snap-pb-40 {\n scroll-padding-bottom: 10rem\n}\n\n.snap-pl-40 {\n scroll-padding-left: 10rem\n}\n\n.snap-pt-48 {\n scroll-padding-top: 12rem\n}\n\n.snap-pr-48 {\n scroll-padding-right: 12rem\n}\n\n.snap-pb-48 {\n scroll-padding-bottom: 12rem\n}\n\n.snap-pl-48 {\n scroll-padding-left: 12rem\n}\n\n.snap-pt-56 {\n scroll-padding-top: 14rem\n}\n\n.snap-pr-56 {\n scroll-padding-right: 14rem\n}\n\n.snap-pb-56 {\n scroll-padding-bottom: 14rem\n}\n\n.snap-pl-56 {\n scroll-padding-left: 14rem\n}\n\n.snap-pt-64 {\n scroll-padding-top: 16rem\n}\n\n.snap-pr-64 {\n scroll-padding-right: 16rem\n}\n\n.snap-pb-64 {\n scroll-padding-bottom: 16rem\n}\n\n.snap-pl-64 {\n scroll-padding-left: 16rem\n}\n\n.snap-pt-px {\n scroll-padding-top: 1px\n}\n\n.snap-pr-px {\n scroll-padding-right: 1px\n}\n\n.snap-pb-px {\n scroll-padding-bottom: 1px\n}\n\n.snap-pl-px {\n scroll-padding-left: 1px\n}\n" }, { "path": "test/bench/snap-margins.css", "content": ".snap-m-0 {\n scroll-margin: 0\n}\n\n.snap-m-1 {\n scroll-margin: 0.25rem\n}\n\n.snap-m-2 {\n scroll-margin: 0.5rem\n}\n\n.snap-m-3 {\n scroll-margin: 0.75rem\n}\n\n.snap-m-4 {\n scroll-margin: 1rem\n}\n\n.snap-m-5 {\n scroll-margin: 1.25rem\n}\n\n.snap-m-6 {\n scroll-margin: 1.5rem\n}\n\n.snap-m-8 {\n scroll-margin: 2rem\n}\n\n.snap-m-10 {\n scroll-margin: 2.5rem\n}\n\n.snap-m-12 {\n scroll-margin: 3rem\n}\n\n.snap-m-16 {\n scroll-margin: 4rem\n}\n\n.snap-m-20 {\n scroll-margin: 5rem\n}\n\n.snap-m-24 {\n scroll-margin: 6rem\n}\n\n.snap-m-32 {\n scroll-margin: 8rem\n}\n\n.snap-m-40 {\n scroll-margin: 10rem\n}\n\n.snap-m-48 {\n scroll-margin: 12rem\n}\n\n.snap-m-56 {\n scroll-margin: 14rem\n}\n\n.snap-m-64 {\n scroll-margin: 16rem\n}\n\n.snap-m-auto {\n scroll-margin: auto\n}\n\n.snap-m-px {\n scroll-margin: 1px\n}\n\n.-snap-m-1 {\n scroll-margin: -0.25rem\n}\n\n.-snap-m-2 {\n scroll-margin: -0.5rem\n}\n\n.-snap-m-3 {\n scroll-margin: -0.75rem\n}\n\n.-snap-m-4 {\n scroll-margin: -1rem\n}\n\n.-snap-m-5 {\n scroll-margin: -1.25rem\n}\n\n.-snap-m-6 {\n scroll-margin: -1.5rem\n}\n\n.-snap-m-8 {\n scroll-margin: -2rem\n}\n\n.-snap-m-10 {\n scroll-margin: -2.5rem\n}\n\n.-snap-m-12 {\n scroll-margin: -3rem\n}\n\n.-snap-m-16 {\n scroll-margin: -4rem\n}\n\n.-snap-m-20 {\n scroll-margin: -5rem\n}\n\n.-snap-m-24 {\n scroll-margin: -6rem\n}\n\n.-snap-m-32 {\n scroll-margin: -8rem\n}\n\n.-snap-m-40 {\n scroll-margin: -10rem\n}\n\n.-snap-m-48 {\n scroll-margin: -12rem\n}\n\n.-snap-m-56 {\n scroll-margin: -14rem\n}\n\n.-snap-m-64 {\n scroll-margin: -16rem\n}\n\n.-snap-m-px {\n scroll-margin: -1px\n}\n\n.snap-my-0 {\n scroll-margin-top: 0;\n scroll-margin-bottom: 0\n}\n\n.snap-mx-0 {\n scroll-margin-left: 0;\n scroll-margin-right: 0\n}\n\n.snap-my-1 {\n scroll-margin-top: 0.25rem;\n scroll-margin-bottom: 0.25rem\n}\n\n.snap-mx-1 {\n scroll-margin-left: 0.25rem;\n scroll-margin-right: 0.25rem\n}\n\n.snap-my-2 {\n scroll-margin-top: 0.5rem;\n scroll-margin-bottom: 0.5rem\n}\n\n.snap-mx-2 {\n scroll-margin-left: 0.5rem;\n scroll-margin-right: 0.5rem\n}\n\n.snap-my-3 {\n scroll-margin-top: 0.75rem;\n scroll-margin-bottom: 0.75rem\n}\n\n.snap-mx-3 {\n scroll-margin-left: 0.75rem;\n scroll-margin-right: 0.75rem\n}\n\n.snap-my-4 {\n scroll-margin-top: 1rem;\n scroll-margin-bottom: 1rem\n}\n\n.snap-mx-4 {\n scroll-margin-left: 1rem;\n scroll-margin-right: 1rem\n}\n\n.snap-my-5 {\n scroll-margin-top: 1.25rem;\n scroll-margin-bottom: 1.25rem\n}\n\n.snap-mx-5 {\n scroll-margin-left: 1.25rem;\n scroll-margin-right: 1.25rem\n}\n\n.snap-my-6 {\n scroll-margin-top: 1.5rem;\n scroll-margin-bottom: 1.5rem\n}\n\n.snap-mx-6 {\n scroll-margin-left: 1.5rem;\n scroll-margin-right: 1.5rem\n}\n\n.snap-my-8 {\n scroll-margin-top: 2rem;\n scroll-margin-bottom: 2rem\n}\n\n.snap-mx-8 {\n scroll-margin-left: 2rem;\n scroll-margin-right: 2rem\n}\n\n.snap-my-10 {\n scroll-margin-top: 2.5rem;\n scroll-margin-bottom: 2.5rem\n}\n\n.snap-mx-10 {\n scroll-margin-left: 2.5rem;\n scroll-margin-right: 2.5rem\n}\n\n.snap-my-12 {\n scroll-margin-top: 3rem;\n scroll-margin-bottom: 3rem\n}\n\n.snap-mx-12 {\n scroll-margin-left: 3rem;\n scroll-margin-right: 3rem\n}\n\n.snap-my-16 {\n scroll-margin-top: 4rem;\n scroll-margin-bottom: 4rem\n}\n\n.snap-mx-16 {\n scroll-margin-left: 4rem;\n scroll-margin-right: 4rem\n}\n\n.snap-my-20 {\n scroll-margin-top: 5rem;\n scroll-margin-bottom: 5rem\n}\n\n.snap-mx-20 {\n scroll-margin-left: 5rem;\n scroll-margin-right: 5rem\n}\n\n.snap-my-24 {\n scroll-margin-top: 6rem;\n scroll-margin-bottom: 6rem\n}\n\n.snap-mx-24 {\n scroll-margin-left: 6rem;\n scroll-margin-right: 6rem\n}\n\n.snap-my-32 {\n scroll-margin-top: 8rem;\n scroll-margin-bottom: 8rem\n}\n\n.snap-mx-32 {\n scroll-margin-left: 8rem;\n scroll-margin-right: 8rem\n}\n\n.snap-my-40 {\n scroll-margin-top: 10rem;\n scroll-margin-bottom: 10rem\n}\n\n.snap-mx-40 {\n scroll-margin-left: 10rem;\n scroll-margin-right: 10rem\n}\n\n.snap-my-48 {\n scroll-margin-top: 12rem;\n scroll-margin-bottom: 12rem\n}\n\n.snap-mx-48 {\n scroll-margin-left: 12rem;\n scroll-margin-right: 12rem\n}\n\n.snap-my-56 {\n scroll-margin-top: 14rem;\n scroll-margin-bottom: 14rem\n}\n\n.snap-mx-56 {\n scroll-margin-left: 14rem;\n scroll-margin-right: 14rem\n}\n\n.snap-my-64 {\n scroll-margin-top: 16rem;\n scroll-margin-bottom: 16rem\n}\n\n.snap-mx-64 {\n scroll-margin-left: 16rem;\n scroll-margin-right: 16rem\n}\n\n.snap-my-auto {\n scroll-margin-top: auto;\n scroll-margin-bottom: auto\n}\n\n.snap-mx-auto {\n scroll-margin-left: auto;\n scroll-margin-right: auto\n}\n\n.snap-my-px {\n scroll-margin-top: 1px;\n scroll-margin-bottom: 1px\n}\n\n.snap-mx-px {\n scroll-margin-left: 1px;\n scroll-margin-right: 1px\n}\n\n.-snap-my-1 {\n scroll-margin-top: -0.25rem;\n scroll-margin-bottom: -0.25rem\n}\n\n.-snap-mx-1 {\n scroll-margin-left: -0.25rem;\n scroll-margin-right: -0.25rem\n}\n\n.-snap-my-2 {\n scroll-margin-top: -0.5rem;\n scroll-margin-bottom: -0.5rem\n}\n\n.-snap-mx-2 {\n scroll-margin-left: -0.5rem;\n scroll-margin-right: -0.5rem\n}\n\n.-snap-my-3 {\n scroll-margin-top: -0.75rem;\n scroll-margin-bottom: -0.75rem\n}\n\n.-snap-mx-3 {\n scroll-margin-left: -0.75rem;\n scroll-margin-right: -0.75rem\n}\n\n.-snap-my-4 {\n scroll-margin-top: -1rem;\n scroll-margin-bottom: -1rem\n}\n\n.-snap-mx-4 {\n scroll-margin-left: -1rem;\n scroll-margin-right: -1rem\n}\n\n.-snap-my-5 {\n scroll-margin-top: -1.25rem;\n scroll-margin-bottom: -1.25rem\n}\n\n.-snap-mx-5 {\n scroll-margin-left: -1.25rem;\n scroll-margin-right: -1.25rem\n}\n\n.-snap-my-6 {\n scroll-margin-top: -1.5rem;\n scroll-margin-bottom: -1.5rem\n}\n\n.-snap-mx-6 {\n scroll-margin-left: -1.5rem;\n scroll-margin-right: -1.5rem\n}\n\n.-snap-my-8 {\n scroll-margin-top: -2rem;\n scroll-margin-bottom: -2rem\n}\n\n.-snap-mx-8 {\n scroll-margin-left: -2rem;\n scroll-margin-right: -2rem\n}\n\n.-snap-my-10 {\n scroll-margin-top: -2.5rem;\n scroll-margin-bottom: -2.5rem\n}\n\n.-snap-mx-10 {\n scroll-margin-left: -2.5rem;\n scroll-margin-right: -2.5rem\n}\n\n.-snap-my-12 {\n scroll-margin-top: -3rem;\n scroll-margin-bottom: -3rem\n}\n\n.-snap-mx-12 {\n scroll-margin-left: -3rem;\n scroll-margin-right: -3rem\n}\n\n.-snap-my-16 {\n scroll-margin-top: -4rem;\n scroll-margin-bottom: -4rem\n}\n\n.-snap-mx-16 {\n scroll-margin-left: -4rem;\n scroll-margin-right: -4rem\n}\n\n.-snap-my-20 {\n scroll-margin-top: -5rem;\n scroll-margin-bottom: -5rem\n}\n\n.-snap-mx-20 {\n scroll-margin-left: -5rem;\n scroll-margin-right: -5rem\n}\n\n.-snap-my-24 {\n scroll-margin-top: -6rem;\n scroll-margin-bottom: -6rem\n}\n\n.-snap-mx-24 {\n scroll-margin-left: -6rem;\n scroll-margin-right: -6rem\n}\n\n.-snap-my-32 {\n scroll-margin-top: -8rem;\n scroll-margin-bottom: -8rem\n}\n\n.-snap-mx-32 {\n scroll-margin-left: -8rem;\n scroll-margin-right: -8rem\n}\n\n.-snap-my-40 {\n scroll-margin-top: -10rem;\n scroll-margin-bottom: -10rem\n}\n\n.-snap-mx-40 {\n scroll-margin-left: -10rem;\n scroll-margin-right: -10rem\n}\n\n.-snap-my-48 {\n scroll-margin-top: -12rem;\n scroll-margin-bottom: -12rem\n}\n\n.-snap-mx-48 {\n scroll-margin-left: -12rem;\n scroll-margin-right: -12rem\n}\n\n.-snap-my-56 {\n scroll-margin-top: -14rem;\n scroll-margin-bottom: -14rem\n}\n\n.-snap-mx-56 {\n scroll-margin-left: -14rem;\n scroll-margin-right: -14rem\n}\n\n.-snap-my-64 {\n scroll-margin-top: -16rem;\n scroll-margin-bottom: -16rem\n}\n\n.-snap-mx-64 {\n scroll-margin-left: -16rem;\n scroll-margin-right: -16rem\n}\n\n.-snap-my-px {\n scroll-margin-top: -1px;\n scroll-margin-bottom: -1px\n}\n\n.-snap-mx-px {\n scroll-margin-left: -1px;\n scroll-margin-right: -1px\n}\n\n.snap-mt-0 {\n scroll-margin-top: 0\n}\n\n.snap-mr-0 {\n scroll-margin-right: 0\n}\n\n.snap-mb-0 {\n scroll-margin-bottom: 0\n}\n\n.snap-ml-0 {\n scroll-margin-left: 0\n}\n\n.snap-mt-1 {\n scroll-margin-top: 0.25rem\n}\n\n.snap-mr-1 {\n scroll-margin-right: 0.25rem\n}\n\n.snap-mb-1 {\n scroll-margin-bottom: 0.25rem\n}\n\n.snap-ml-1 {\n scroll-margin-left: 0.25rem\n}\n\n.snap-mt-2 {\n scroll-margin-top: 0.5rem\n}\n\n.snap-mr-2 {\n scroll-margin-right: 0.5rem\n}\n\n.snap-mb-2 {\n scroll-margin-bottom: 0.5rem\n}\n\n.snap-ml-2 {\n scroll-margin-left: 0.5rem\n}\n\n.snap-mt-3 {\n scroll-margin-top: 0.75rem\n}\n\n.snap-mr-3 {\n scroll-margin-right: 0.75rem\n}\n\n.snap-mb-3 {\n scroll-margin-bottom: 0.75rem\n}\n\n.snap-ml-3 {\n scroll-margin-left: 0.75rem\n}\n\n.snap-mt-4 {\n scroll-margin-top: 1rem\n}\n\n.snap-mr-4 {\n scroll-margin-right: 1rem\n}\n\n.snap-mb-4 {\n scroll-margin-bottom: 1rem\n}\n\n.snap-ml-4 {\n scroll-margin-left: 1rem\n}\n\n.snap-mt-5 {\n scroll-margin-top: 1.25rem\n}\n\n.snap-mr-5 {\n scroll-margin-right: 1.25rem\n}\n\n.snap-mb-5 {\n scroll-margin-bottom: 1.25rem\n}\n\n.snap-ml-5 {\n scroll-margin-left: 1.25rem\n}\n\n.snap-mt-6 {\n scroll-margin-top: 1.5rem\n}\n\n.snap-mr-6 {\n scroll-margin-right: 1.5rem\n}\n\n.snap-mb-6 {\n scroll-margin-bottom: 1.5rem\n}\n\n.snap-ml-6 {\n scroll-margin-left: 1.5rem\n}\n\n.snap-mt-8 {\n scroll-margin-top: 2rem\n}\n\n.snap-mr-8 {\n scroll-margin-right: 2rem\n}\n\n.snap-mb-8 {\n scroll-margin-bottom: 2rem\n}\n\n.snap-ml-8 {\n scroll-margin-left: 2rem\n}\n\n.snap-mt-10 {\n scroll-margin-top: 2.5rem\n}\n\n.snap-mr-10 {\n scroll-margin-right: 2.5rem\n}\n\n.snap-mb-10 {\n scroll-margin-bottom: 2.5rem\n}\n\n.snap-ml-10 {\n scroll-margin-left: 2.5rem\n}\n\n.snap-mt-12 {\n scroll-margin-top: 3rem\n}\n\n.snap-mr-12 {\n scroll-margin-right: 3rem\n}\n\n.snap-mb-12 {\n scroll-margin-bottom: 3rem\n}\n\n.snap-ml-12 {\n scroll-margin-left: 3rem\n}\n\n.snap-mt-16 {\n scroll-margin-top: 4rem\n}\n\n.snap-mr-16 {\n scroll-margin-right: 4rem\n}\n\n.snap-mb-16 {\n scroll-margin-bottom: 4rem\n}\n\n.snap-ml-16 {\n scroll-margin-left: 4rem\n}\n\n.snap-mt-20 {\n scroll-margin-top: 5rem\n}\n\n.snap-mr-20 {\n scroll-margin-right: 5rem\n}\n\n.snap-mb-20 {\n scroll-margin-bottom: 5rem\n}\n\n.snap-ml-20 {\n scroll-margin-left: 5rem\n}\n\n.snap-mt-24 {\n scroll-margin-top: 6rem\n}\n\n.snap-mr-24 {\n scroll-margin-right: 6rem\n}\n\n.snap-mb-24 {\n scroll-margin-bottom: 6rem\n}\n\n.snap-ml-24 {\n scroll-margin-left: 6rem\n}\n\n.snap-mt-32 {\n scroll-margin-top: 8rem\n}\n\n.snap-mr-32 {\n scroll-margin-right: 8rem\n}\n\n.snap-mb-32 {\n scroll-margin-bottom: 8rem\n}\n\n.snap-ml-32 {\n scroll-margin-left: 8rem\n}\n\n.snap-mt-40 {\n scroll-margin-top: 10rem\n}\n\n.snap-mr-40 {\n scroll-margin-right: 10rem\n}\n\n.snap-mb-40 {\n scroll-margin-bottom: 10rem\n}\n\n.snap-ml-40 {\n scroll-margin-left: 10rem\n}\n\n.snap-mt-48 {\n scroll-margin-top: 12rem\n}\n\n.snap-mr-48 {\n scroll-margin-right: 12rem\n}\n\n.snap-mb-48 {\n scroll-margin-bottom: 12rem\n}\n\n.snap-ml-48 {\n scroll-margin-left: 12rem\n}\n\n.snap-mt-56 {\n scroll-margin-top: 14rem\n}\n\n.snap-mr-56 {\n scroll-margin-right: 14rem\n}\n\n.snap-mb-56 {\n scroll-margin-bottom: 14rem\n}\n\n.snap-ml-56 {\n scroll-margin-left: 14rem\n}\n\n.snap-mt-64 {\n scroll-margin-top: 16rem\n}\n\n.snap-mr-64 {\n scroll-margin-right: 16rem\n}\n\n.snap-mb-64 {\n scroll-margin-bottom: 16rem\n}\n\n.snap-ml-64 {\n scroll-margin-left: 16rem\n}\n\n.snap-mt-auto {\n scroll-margin-top: auto\n}\n\n.snap-mr-auto {\n scroll-margin-right: auto\n}\n\n.snap-mb-auto {\n scroll-margin-bottom: auto\n}\n\n.snap-ml-auto {\n scroll-margin-left: auto\n}\n\n.snap-mt-px {\n scroll-margin-top: 1px\n}\n\n.snap-mr-px {\n scroll-margin-right: 1px\n}\n\n.snap-mb-px {\n scroll-margin-bottom: 1px\n}\n\n.snap-ml-px {\n scroll-margin-left: 1px\n}\n\n.-snap-mt-1 {\n scroll-margin-top: -0.25rem\n}\n\n.-snap-mr-1 {\n scroll-margin-right: -0.25rem\n}\n\n.-snap-mb-1 {\n scroll-margin-bottom: -0.25rem\n}\n\n.-snap-ml-1 {\n scroll-margin-left: -0.25rem\n}\n\n.-snap-mt-2 {\n scroll-margin-top: -0.5rem\n}\n\n.-snap-mr-2 {\n scroll-margin-right: -0.5rem\n}\n\n.-snap-mb-2 {\n scroll-margin-bottom: -0.5rem\n}\n\n.-snap-ml-2 {\n scroll-margin-left: -0.5rem\n}\n\n.-snap-mt-3 {\n scroll-margin-top: -0.75rem\n}\n\n.-snap-mr-3 {\n scroll-margin-right: -0.75rem\n}\n\n.-snap-mb-3 {\n scroll-margin-bottom: -0.75rem\n}\n\n.-snap-ml-3 {\n scroll-margin-left: -0.75rem\n}\n\n.-snap-mt-4 {\n scroll-margin-top: -1rem\n}\n\n.-snap-mr-4 {\n scroll-margin-right: -1rem\n}\n\n.-snap-mb-4 {\n scroll-margin-bottom: -1rem\n}\n\n.-snap-ml-4 {\n scroll-margin-left: -1rem\n}\n\n.-snap-mt-5 {\n scroll-margin-top: -1.25rem\n}\n\n.-snap-mr-5 {\n scroll-margin-right: -1.25rem\n}\n\n.-snap-mb-5 {\n scroll-margin-bottom: -1.25rem\n}\n\n.-snap-ml-5 {\n scroll-margin-left: -1.25rem\n}\n\n.-snap-mt-6 {\n scroll-margin-top: -1.5rem\n}\n\n.-snap-mr-6 {\n scroll-margin-right: -1.5rem\n}\n\n.-snap-mb-6 {\n scroll-margin-bottom: -1.5rem\n}\n\n.-snap-ml-6 {\n scroll-margin-left: -1.5rem\n}\n\n.-snap-mt-8 {\n scroll-margin-top: -2rem\n}\n\n.-snap-mr-8 {\n scroll-margin-right: -2rem\n}\n\n.-snap-mb-8 {\n scroll-margin-bottom: -2rem\n}\n\n.-snap-ml-8 {\n scroll-margin-left: -2rem\n}\n\n.-snap-mt-10 {\n scroll-margin-top: -2.5rem\n}\n\n.-snap-mr-10 {\n scroll-margin-right: -2.5rem\n}\n\n.-snap-mb-10 {\n scroll-margin-bottom: -2.5rem\n}\n\n.-snap-ml-10 {\n scroll-margin-left: -2.5rem\n}\n\n.-snap-mt-12 {\n scroll-margin-top: -3rem\n}\n\n.-snap-mr-12 {\n scroll-margin-right: -3rem\n}\n\n.-snap-mb-12 {\n scroll-margin-bottom: -3rem\n}\n\n.-snap-ml-12 {\n scroll-margin-left: -3rem\n}\n\n.-snap-mt-16 {\n scroll-margin-top: -4rem\n}\n\n.-snap-mr-16 {\n scroll-margin-right: -4rem\n}\n\n.-snap-mb-16 {\n scroll-margin-bottom: -4rem\n}\n\n.-snap-ml-16 {\n scroll-margin-left: -4rem\n}\n\n.-snap-mt-20 {\n scroll-margin-top: -5rem\n}\n\n.-snap-mr-20 {\n scroll-margin-right: -5rem\n}\n\n.-snap-mb-20 {\n scroll-margin-bottom: -5rem\n}\n\n.-snap-ml-20 {\n scroll-margin-left: -5rem\n}\n\n.-snap-mt-24 {\n scroll-margin-top: -6rem\n}\n\n.-snap-mr-24 {\n scroll-margin-right: -6rem\n}\n\n.-snap-mb-24 {\n scroll-margin-bottom: -6rem\n}\n\n.-snap-ml-24 {\n scroll-margin-left: -6rem\n}\n\n.-snap-mt-32 {\n scroll-margin-top: -8rem\n}\n\n.-snap-mr-32 {\n scroll-margin-right: -8rem\n}\n\n.-snap-mb-32 {\n scroll-margin-bottom: -8rem\n}\n\n.-snap-ml-32 {\n scroll-margin-left: -8rem\n}\n\n.-snap-mt-40 {\n scroll-margin-top: -10rem\n}\n\n.-snap-mr-40 {\n scroll-margin-right: -10rem\n}\n\n.-snap-mb-40 {\n scroll-margin-bottom: -10rem\n}\n\n.-snap-ml-40 {\n scroll-margin-left: -10rem\n}\n\n.-snap-mt-48 {\n scroll-margin-top: -12rem\n}\n\n.-snap-mr-48 {\n scroll-margin-right: -12rem\n}\n\n.-snap-mb-48 {\n scroll-margin-bottom: -12rem\n}\n\n.-snap-ml-48 {\n scroll-margin-left: -12rem\n}\n\n.-snap-mt-56 {\n scroll-margin-top: -14rem\n}\n\n.-snap-mr-56 {\n scroll-margin-right: -14rem\n}\n\n.-snap-mb-56 {\n scroll-margin-bottom: -14rem\n}\n\n.-snap-ml-56 {\n scroll-margin-left: -14rem\n}\n\n.-snap-mt-64 {\n scroll-margin-top: -16rem\n}\n\n.-snap-mr-64 {\n scroll-margin-right: -16rem\n}\n\n.-snap-mb-64 {\n scroll-margin-bottom: -16rem\n}\n\n.-snap-ml-64 {\n scroll-margin-left: -16rem\n}\n\n.-snap-mt-px {\n scroll-margin-top: -1px\n}\n\n.-snap-mr-px {\n scroll-margin-right: -1px\n}\n\n.-snap-mb-px {\n scroll-margin-bottom: -1px\n}\n\n.-snap-ml-px {\n scroll-margin-left: -1px\n} \n" }, { "path": "test/bench/snap-paddings.css", "content": ".snap-p-0 {\n scroll-padding: 0\n}\n\n.snap-p-1 {\n scroll-padding: 0.25rem\n}\n\n.snap-p-2 {\n scroll-padding: 0.5rem\n}\n\n.snap-p-3 {\n scroll-padding: 0.75rem\n}\n\n.snap-p-4 {\n scroll-padding: 1rem\n}\n\n.snap-p-5 {\n scroll-padding: 1.25rem\n}\n\n.snap-p-6 {\n scroll-padding: 1.5rem\n}\n\n.snap-p-8 {\n scroll-padding: 2rem\n}\n\n.snap-p-10 {\n scroll-padding: 2.5rem\n}\n\n.snap-p-12 {\n scroll-padding: 3rem\n}\n\n.snap-p-16 {\n scroll-padding: 4rem\n}\n\n.snap-p-20 {\n scroll-padding: 5rem\n}\n\n.snap-p-24 {\n scroll-padding: 6rem\n}\n\n.snap-p-32 {\n scroll-padding: 8rem\n}\n\n.snap-p-40 {\n scroll-padding: 10rem\n}\n\n.snap-p-48 {\n scroll-padding: 12rem\n}\n\n.snap-p-56 {\n scroll-padding: 14rem\n}\n\n.snap-p-64 {\n scroll-padding: 16rem\n}\n\n.snap-p-px {\n scroll-padding: 1px\n}\n\n.snap-py-0 {\n scroll-padding-top: 0;\n scroll-padding-bottom: 0\n}\n\n.snap-px-0 {\n scroll-padding-left: 0;\n scroll-padding-right: 0\n}\n\n.snap-py-1 {\n scroll-padding-top: 0.25rem;\n scroll-padding-bottom: 0.25rem\n}\n\n.snap-px-1 {\n scroll-padding-left: 0.25rem;\n scroll-padding-right: 0.25rem\n}\n\n.snap-py-2 {\n scroll-padding-top: 0.5rem;\n scroll-padding-bottom: 0.5rem\n}\n\n.snap-px-2 {\n scroll-padding-left: 0.5rem;\n scroll-padding-right: 0.5rem\n}\n\n.snap-py-3 {\n scroll-padding-top: 0.75rem;\n scroll-padding-bottom: 0.75rem\n}\n\n.snap-px-3 {\n scroll-padding-left: 0.75rem;\n scroll-padding-right: 0.75rem\n}\n\n.snap-py-4 {\n scroll-padding-top: 1rem;\n scroll-padding-bottom: 1rem\n}\n\n.snap-px-4 {\n scroll-padding-left: 1rem;\n scroll-padding-right: 1rem\n}\n\n.snap-py-5 {\n scroll-padding-top: 1.25rem;\n scroll-padding-bottom: 1.25rem\n}\n\n.snap-px-5 {\n scroll-padding-left: 1.25rem;\n scroll-padding-right: 1.25rem\n}\n\n.snap-py-6 {\n scroll-padding-top: 1.5rem;\n scroll-padding-bottom: 1.5rem\n}\n\n.snap-px-6 {\n scroll-padding-left: 1.5rem;\n scroll-padding-right: 1.5rem\n}\n\n.snap-py-8 {\n scroll-padding-top: 2rem;\n scroll-padding-bottom: 2rem\n}\n\n.snap-px-8 {\n scroll-padding-left: 2rem;\n scroll-padding-right: 2rem\n}\n\n.snap-py-10 {\n scroll-padding-top: 2.5rem;\n scroll-padding-bottom: 2.5rem\n}\n\n.snap-px-10 {\n scroll-padding-left: 2.5rem;\n scroll-padding-right: 2.5rem\n}\n\n.snap-py-12 {\n scroll-padding-top: 3rem;\n scroll-padding-bottom: 3rem\n}\n\n.snap-px-12 {\n scroll-padding-left: 3rem;\n scroll-padding-right: 3rem\n}\n\n.snap-py-16 {\n scroll-padding-top: 4rem;\n scroll-padding-bottom: 4rem\n}\n\n.snap-px-16 {\n scroll-padding-left: 4rem;\n scroll-padding-right: 4rem\n}\n\n.snap-py-20 {\n scroll-padding-top: 5rem;\n scroll-padding-bottom: 5rem\n}\n\n.snap-px-20 {\n scroll-padding-left: 5rem;\n scroll-padding-right: 5rem\n}\n\n.snap-py-24 {\n scroll-padding-top: 6rem;\n scroll-padding-bottom: 6rem\n}\n\n.snap-px-24 {\n scroll-padding-left: 6rem;\n scroll-padding-right: 6rem\n}\n\n.snap-py-32 {\n scroll-padding-top: 8rem;\n scroll-padding-bottom: 8rem\n}\n\n.snap-px-32 {\n scroll-padding-left: 8rem;\n scroll-padding-right: 8rem\n}\n\n.snap-py-40 {\n scroll-padding-top: 10rem;\n scroll-padding-bottom: 10rem\n}\n\n.snap-px-40 {\n scroll-padding-left: 10rem;\n scroll-padding-right: 10rem\n}\n\n.snap-py-48 {\n scroll-padding-top: 12rem;\n scroll-padding-bottom: 12rem\n}\n\n.snap-px-48 {\n scroll-padding-left: 12rem;\n scroll-padding-right: 12rem\n}\n\n.snap-py-56 {\n scroll-padding-top: 14rem;\n scroll-padding-bottom: 14rem\n}\n\n.snap-px-56 {\n scroll-padding-left: 14rem;\n scroll-padding-right: 14rem\n}\n\n.snap-py-64 {\n scroll-padding-top: 16rem;\n scroll-padding-bottom: 16rem\n}\n\n.snap-px-64 {\n scroll-padding-left: 16rem;\n scroll-padding-right: 16rem\n}\n\n.snap-py-px {\n scroll-padding-top: 1px;\n scroll-padding-bottom: 1px\n}\n\n.snap-px-px {\n scroll-padding-left: 1px;\n scroll-padding-right: 1px\n}\n\n.snap-pt-0 {\n scroll-padding-top: 0\n}\n\n.snap-pr-0 {\n scroll-padding-right: 0\n}\n\n.snap-pb-0 {\n scroll-padding-bottom: 0\n}\n\n.snap-pl-0 {\n scroll-padding-left: 0\n}\n\n.snap-pt-1 {\n scroll-padding-top: 0.25rem\n}\n\n.snap-pr-1 {\n scroll-padding-right: 0.25rem\n}\n\n.snap-pb-1 {\n scroll-padding-bottom: 0.25rem\n}\n\n.snap-pl-1 {\n scroll-padding-left: 0.25rem\n}\n\n.snap-pt-2 {\n scroll-padding-top: 0.5rem\n}\n\n.snap-pr-2 {\n scroll-padding-right: 0.5rem\n}\n\n.snap-pb-2 {\n scroll-padding-bottom: 0.5rem\n}\n\n.snap-pl-2 {\n scroll-padding-left: 0.5rem\n}\n\n.snap-pt-3 {\n scroll-padding-top: 0.75rem\n}\n\n.snap-pr-3 {\n scroll-padding-right: 0.75rem\n}\n\n.snap-pb-3 {\n scroll-padding-bottom: 0.75rem\n}\n\n.snap-pl-3 {\n scroll-padding-left: 0.75rem\n}\n\n.snap-pt-4 {\n scroll-padding-top: 1rem\n}\n\n.snap-pr-4 {\n scroll-padding-right: 1rem\n}\n\n.snap-pb-4 {\n scroll-padding-bottom: 1rem\n}\n\n.snap-pl-4 {\n scroll-padding-left: 1rem\n}\n\n.snap-pt-5 {\n scroll-padding-top: 1.25rem\n}\n\n.snap-pr-5 {\n scroll-padding-right: 1.25rem\n}\n\n.snap-pb-5 {\n scroll-padding-bottom: 1.25rem\n}\n\n.snap-pl-5 {\n scroll-padding-left: 1.25rem\n}\n\n.snap-pt-6 {\n scroll-padding-top: 1.5rem\n}\n\n.snap-pr-6 {\n scroll-padding-right: 1.5rem\n}\n\n.snap-pb-6 {\n scroll-padding-bottom: 1.5rem\n}\n\n.snap-pl-6 {\n scroll-padding-left: 1.5rem\n}\n\n.snap-pt-8 {\n scroll-padding-top: 2rem\n}\n\n.snap-pr-8 {\n scroll-padding-right: 2rem\n}\n\n.snap-pb-8 {\n scroll-padding-bottom: 2rem\n}\n\n.snap-pl-8 {\n scroll-padding-left: 2rem\n}\n\n.snap-pt-10 {\n scroll-padding-top: 2.5rem\n}\n\n.snap-pr-10 {\n scroll-padding-right: 2.5rem\n}\n\n.snap-pb-10 {\n scroll-padding-bottom: 2.5rem\n}\n\n.snap-pl-10 {\n scroll-padding-left: 2.5rem\n}\n\n.snap-pt-12 {\n scroll-padding-top: 3rem\n}\n\n.snap-pr-12 {\n scroll-padding-right: 3rem\n}\n\n.snap-pb-12 {\n scroll-padding-bottom: 3rem\n}\n\n.snap-pl-12 {\n scroll-padding-left: 3rem\n}\n\n.snap-pt-16 {\n scroll-padding-top: 4rem\n}\n\n.snap-pr-16 {\n scroll-padding-right: 4rem\n}\n\n.snap-pb-16 {\n scroll-padding-bottom: 4rem\n}\n\n.snap-pl-16 {\n scroll-padding-left: 4rem\n}\n\n.snap-pt-20 {\n scroll-padding-top: 5rem\n}\n\n.snap-pr-20 {\n scroll-padding-right: 5rem\n}\n\n.snap-pb-20 {\n scroll-padding-bottom: 5rem\n}\n\n.snap-pl-20 {\n scroll-padding-left: 5rem\n}\n\n.snap-pt-24 {\n scroll-padding-top: 6rem\n}\n\n.snap-pr-24 {\n scroll-padding-right: 6rem\n}\n\n.snap-pb-24 {\n scroll-padding-bottom: 6rem\n}\n\n.snap-pl-24 {\n scroll-padding-left: 6rem\n}\n\n.snap-pt-32 {\n scroll-padding-top: 8rem\n}\n\n.snap-pr-32 {\n scroll-padding-right: 8rem\n}\n\n.snap-pb-32 {\n scroll-padding-bottom: 8rem\n}\n\n.snap-pl-32 {\n scroll-padding-left: 8rem\n}\n\n.snap-pt-40 {\n scroll-padding-top: 10rem\n}\n\n.snap-pr-40 {\n scroll-padding-right: 10rem\n}\n\n.snap-pb-40 {\n scroll-padding-bottom: 10rem\n}\n\n.snap-pl-40 {\n scroll-padding-left: 10rem\n}\n\n.snap-pt-48 {\n scroll-padding-top: 12rem\n}\n\n.snap-pr-48 {\n scroll-padding-right: 12rem\n}\n\n.snap-pb-48 {\n scroll-padding-bottom: 12rem\n}\n\n.snap-pl-48 {\n scroll-padding-left: 12rem\n}\n\n.snap-pt-56 {\n scroll-padding-top: 14rem\n}\n\n.snap-pr-56 {\n scroll-padding-right: 14rem\n}\n\n.snap-pb-56 {\n scroll-padding-bottom: 14rem\n}\n\n.snap-pl-56 {\n scroll-padding-left: 14rem\n}\n\n.snap-pt-64 {\n scroll-padding-top: 16rem\n}\n\n.snap-pr-64 {\n scroll-padding-right: 16rem\n}\n\n.snap-pb-64 {\n scroll-padding-bottom: 16rem\n}\n\n.snap-pl-64 {\n scroll-padding-left: 16rem\n}\n\n.snap-pt-px {\n scroll-padding-top: 1px\n}\n\n.snap-pr-px {\n scroll-padding-right: 1px\n}\n\n.snap-pb-px {\n scroll-padding-bottom: 1px\n}\n\n.snap-pl-px {\n scroll-padding-left: 1px\n} \n" }, { "path": "test/generateCss.ts", "content": "import postcss from 'postcss';\nimport tailwindcss from 'tailwindcss';\nimport _ from 'lodash';\n\nexport default async function (\n\tplugin: any,\n\ttheme?: any,\n\tvariants: string[] = [],\n\tconfig?: any,\n\tbase: boolean = false,\n\tcomponents: boolean = false,\n\tutilities: boolean = true,\n\tplugins: string[] | false = false,\n) {\n\t_.set(theme, 'screens', false);\n\tconst process =\n\t\t(base ? '@tailwind base; ' : '') +\n\t\t(components ? '@tailwind components; ' : '') +\n\t\t(utilities ? '@tailwind utilities; ' : '');\n\tconst result = await postcss(\n\t\ttailwindcss({\n\t\t\t...config,\n\t\t\ttheme,\n\t\t\tvariants,\n\t\t\tcorePlugins: plugins,\n\t\t\tplugins: [plugin],\n\t\t}),\n\t).process(process, {\n\t\tfrom: undefined,\n\t});\n\treturn result.css;\n}\n" }, { "path": "test/plugins.test.ts", "content": "import type from '../src/plugins/type';\nimport align from '../src/plugins/align';\nimport stop from '../src/plugins/stop';\nimport margin from '../src/plugins/margin';\nimport padding from '../src/plugins/padding';\nimport cssMatcher from 'jest-matcher-css';\nimport generateCss from './generateCss';\nimport fs from 'fs';\nimport _ from 'lodash';\n\nexpect.extend({\n\ttoMatchCss: cssMatcher,\n});\n\ndescribe('ScrollSnapType', () => {\n\tit('generates utilities from default config', async () => {\n\t\tconst css = await generateCss(type);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .no-snap { scroll-snap-type: none }\n .snap { scroll-snap-type: var(--scroll-snap-direction, both) var(--scroll-snap-constraint, mandatory) }\n .snap-x { --scroll-snap-direction: x }\n .snap-y { --scroll-snap-direction: y }\n .snap-both { --scroll-snap-direction: both }\n .snap-block { --scroll-snap-direction: block }\n .snap-inline { --scroll-snap-direction: inline }\n .snap-mandatory { --scroll-snap-constraint: mandatory }\n .snap-proximity { --scroll-snap-constraint: proximity }\n `);\n\t});\n\n\tit('generates utilities from custom config', async () => {\n\t\tconst css = await generateCss(type, {\n\t\t\tscrollSnapType: {\n\t\t\t\t'snap-both-mandatory': 'both mandatory',\n\t\t\t},\n\t\t});\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-both-mandatory { scroll-snap-type: both mandatory }\n `);\n\t});\n\n\tit('generates variants', async () => {\n\t\tconst css = await generateCss(\n\t\t\ttype,\n\t\t\t{\n\t\t\t\tscrollSnapType: {\n\t\t\t\t\t'snap-both-mandatory': 'both mandatory',\n\t\t\t\t},\n\t\t\t},\n\t\t\t['hover'],\n\t\t);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-both-mandatory { scroll-snap-type: both mandatory }\n .hover\\\\:snap-both-mandatory:hover { scroll-snap-type: both mandatory }\n `);\n\t});\n});\n\ndescribe('ScrollSnapAlign', () => {\n\tit('generates utilities from default config', async () => {\n\t\tconst css = await generateCss(align);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-start { scroll-snap-align: start }\n .snap-end { scroll-snap-align: end }\n .snap-center { scroll-snap-align: center }\n `);\n\t});\n\n\tit('generates utilities from custom config', async () => {\n\t\tconst css = await generateCss(align, {\n\t\t\tscrollSnapAlign: {\n\t\t\t\t'snap-none': 'none',\n\t\t\t},\n\t\t});\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-none { scroll-snap-align: none }\n `);\n\t});\n\n\tit('generates variants', async () => {\n\t\tconst css = await generateCss(\n\t\t\talign,\n\t\t\t{\n\t\t\t\tscrollSnapAlign: {\n\t\t\t\t\t'snap-none': 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t\t['hover'],\n\t\t);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-none { scroll-snap-align: none }\n .hover\\\\:snap-none:hover { scroll-snap-align: none }\n `);\n\t});\n});\n\ndescribe('ScrollSnapStop', () => {\n\tit('generates utilities from default config', async () => {\n\t\tconst css = await generateCss(stop);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .always-stop { scroll-snap-stop: always }\n `);\n\t});\n\n\tit('generates utilities from custom config', async () => {\n\t\tconst css = await generateCss(stop, {\n\t\t\tscrollSnapStop: {\n\t\t\t\t'normal-snap': 'normal',\n\t\t\t},\n\t\t});\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .normal-snap { scroll-snap-stop: normal }\n `);\n\t});\n\n\tit('generates variants', async () => {\n\t\tconst css = await generateCss(\n\t\t\tstop,\n\t\t\t{\n\t\t\t\tscrollSnapStop: {\n\t\t\t\t\t'normal-snap': 'normal',\n\t\t\t\t},\n\t\t\t},\n\t\t\t['hover'],\n\t\t);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .normal-snap { scroll-snap-stop: normal }\n .hover\\\\:normal-snap:hover { scroll-snap-stop: normal }\n `);\n\t});\n});\n\ndescribe('ScrollMargin', () => {\n\tit('generates utilities from default config', async () => {\n\t\tconst css = await generateCss(margin);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(\n\t\t\tfs.readFileSync('test/bench/snap-margins.css').toString(),\n\t\t);\n\t});\n\n\tit('generates utilities from custom config', async () => {\n\t\tconst css = await generateCss(margin, {\n\t\t\tscrollMargin: {\n\t\t\t\ttight: '1rem',\n\t\t\t\tlose: '2rem',\n\t\t\t},\n\t\t});\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-m-tight { scroll-margin: 1rem }\n .snap-m-lose { scroll-margin: 2rem }\n .snap-my-tight { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }\n .snap-mx-tight { scroll-margin-left: 1rem; scroll-margin-right: 1rem }\n .snap-my-lose { scroll-margin-top: 2rem; scroll-margin-bottom: 2rem }\n .snap-mx-lose { scroll-margin-left: 2rem; scroll-margin-right: 2rem }\n .snap-mt-tight { scroll-margin-top: 1rem }\n .snap-mr-tight { scroll-margin-right: 1rem }\n .snap-mb-tight { scroll-margin-bottom: 1rem }\n .snap-ml-tight { scroll-margin-left: 1rem }\n .snap-mt-lose { scroll-margin-top: 2rem }\n .snap-mr-lose { scroll-margin-right: 2rem }\n .snap-mb-lose { scroll-margin-bottom: 2rem }\n .snap-ml-lose { scroll-margin-left: 2rem }\n `);\n\t});\n\n\tit('generates variants', async () => {\n\t\tconst css = await generateCss(\n\t\t\tmargin,\n\t\t\t{\n\t\t\t\tscrollMargin: {\n\t\t\t\t\ttight: '1rem',\n\t\t\t\t},\n\t\t\t},\n\t\t\t['hover'],\n\t\t);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-m-tight { scroll-margin: 1rem }\n .snap-my-tight { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }\n .snap-mx-tight { scroll-margin-left: 1rem; scroll-margin-right: 1rem }\n .snap-mt-tight { scroll-margin-top: 1rem }\n .snap-mr-tight { scroll-margin-right: 1rem }\n .snap-mb-tight { scroll-margin-bottom: 1rem }\n .snap-ml-tight { scroll-margin-left: 1rem }\n .hover\\\\:snap-m-tight:hover { scroll-margin: 1rem }\n .hover\\\\:snap-my-tight:hover { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem }\n .hover\\\\:snap-mx-tight:hover { scroll-margin-left: 1rem; scroll-margin-right: 1rem }\n .hover\\\\:snap-mt-tight:hover { scroll-margin-top: 1rem }\n .hover\\\\:snap-mr-tight:hover { scroll-margin-right: 1rem }\n .hover\\\\:snap-mb-tight:hover { scroll-margin-bottom: 1rem }\n .hover\\\\:snap-ml-tight:hover { scroll-margin-left: 1rem }\n `);\n\t});\n});\n\ndescribe('ScrollPadding', () => {\n\tit('generates utilities from default config', async () => {\n\t\tconst css = await generateCss(padding);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(\n\t\t\tfs.readFileSync('test/bench/snap-paddings.css').toString(),\n\t\t);\n\t});\n\n\tit('generates utilities from custom config', async () => {\n\t\tconst css = await generateCss(padding, {\n\t\t\tscrollPadding: {\n\t\t\t\ttight: '1rem',\n\t\t\t\tlose: '2rem',\n\t\t\t},\n\t\t});\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-p-tight { scroll-padding: 1rem }\n .snap-p-lose { scroll-padding: 2rem }\n .snap-py-tight { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }\n .snap-px-tight { scroll-padding-left: 1rem; scroll-padding-right: 1rem }\n .snap-py-lose { scroll-padding-top: 2rem; scroll-padding-bottom: 2rem }\n .snap-px-lose { scroll-padding-left: 2rem; scroll-padding-right: 2rem }\n .snap-pt-tight { scroll-padding-top: 1rem }\n .snap-pr-tight { scroll-padding-right: 1rem }\n .snap-pb-tight { scroll-padding-bottom: 1rem }\n .snap-pl-tight { scroll-padding-left: 1rem }\n .snap-pt-lose { scroll-padding-top: 2rem }\n .snap-pr-lose { scroll-padding-right: 2rem }\n .snap-pb-lose { scroll-padding-bottom: 2rem }\n .snap-pl-lose { scroll-padding-left: 2rem }\n `);\n\t});\n\n\tit('generates variants', async () => {\n\t\tconst css = await generateCss(\n\t\t\tpadding,\n\t\t\t{\n\t\t\t\tscrollPadding: {\n\t\t\t\t\ttight: '1rem',\n\t\t\t\t},\n\t\t\t},\n\t\t\t['hover'],\n\t\t);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(`\n .snap-p-tight { scroll-padding: 1rem }\n .snap-py-tight { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }\n .snap-px-tight { scroll-padding-left: 1rem; scroll-padding-right: 1rem }\n .snap-pt-tight { scroll-padding-top: 1rem }\n .snap-pr-tight { scroll-padding-right: 1rem }\n .snap-pb-tight { scroll-padding-bottom: 1rem }\n .snap-pl-tight { scroll-padding-left: 1rem }\n .hover\\\\:snap-p-tight:hover { scroll-padding: 1rem }\n .hover\\\\:snap-py-tight:hover { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem }\n .hover\\\\:snap-px-tight:hover { scroll-padding-left: 1rem; scroll-padding-right: 1rem }\n .hover\\\\:snap-pt-tight:hover { scroll-padding-top: 1rem }\n .hover\\\\:snap-pr-tight:hover { scroll-padding-right: 1rem }\n .hover\\\\:snap-pb-tight:hover { scroll-padding-bottom: 1rem }\n .hover\\\\:snap-pl-tight:hover { scroll-padding-left: 1rem }\n `);\n\t});\n});\n" }, { "path": "test/tailwind.test.ts", "content": "import plugin from '../src/plugin';\nimport generateCss from './generateCss';\nimport cssMatcher from 'jest-matcher-css';\nimport fs from 'fs';\n\nexpect.extend({\n\ttoMatchCss: cssMatcher,\n});\n\ndescribe('All plugins', () => {\n\tit('generates utilities for all plugins', async () => {\n\t\tconst css = await generateCss(plugin);\n\n\t\t// @ts-ignore\n\t\texpect(css).toMatchCss(\n\t\t\tfs.readFileSync('test/bench/scroll-snap.css').toString(),\n\t\t);\n\t});\n});\n" }, { "path": "tsconfig.json", "content": "{\n\t\"compilerOptions\": {\n\t\t\"module\": \"commonjs\",\n\t\t\"target\": \"es6\",\n\t\t\"declaration\": true,\n\t\t\"outDir\": \"dist\",\n\t\t\"moduleResolution\": \"node\",\n\t\t\"lib\": [\"es2017\"],\n\t\t\"resolveJsonModule\": true,\n\t\t\"esModuleInterop\": true\n\t},\n\t\"include\": [\"src\"],\n\t\"exclude\": [\"node_modules\"]\n}\n" } ]