https://github.com/jonaskuske/postcss-smoothscroll-anchor-polyfill
⚙ Transform CSS for use with smoothscroll-anchor-polyfill
https://github.com/jonaskuske/postcss-smoothscroll-anchor-polyfill
anchor postcss postcss-plugin scroll smooth-scroll smooth-scrolling smoothscroll smoothscroll-anchor-polyfill
Last synced: 12 months ago
JSON representation
⚙ Transform CSS for use with smoothscroll-anchor-polyfill
- Host: GitHub
- URL: https://github.com/jonaskuske/postcss-smoothscroll-anchor-polyfill
- Owner: jonaskuske
- License: mit
- Created: 2019-06-11T22:33:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-10T23:38:33.000Z (almost 2 years ago)
- Last Synced: 2025-02-25T07:45:20.478Z (about 1 year ago)
- Topics: anchor, postcss, postcss-plugin, scroll, smooth-scroll, smooth-scrolling, smoothscroll, smoothscroll-anchor-polyfill
- Language: JavaScript
- Homepage: https://jonaskuske.github.io/smoothscroll-anchor-polyfill/#usage-css
- Size: 2 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
postcss-smoothscroll-anchor-polyfill
⚙ PostCSS plugin that updates the standard scroll-behavior property to work with smoothscroll-anchor-polyfill
```css
html {
scroll-behavior: smooth;
}
```
compiles to:
```css
html {
font-family: "scroll-behavior:smooth";
scroll-behavior: smooth;
}
```
or if all browsers in your [browserslist](https://github.com/browserslist/browserslist) support [CSS Custom Properties](https://caniuse.com/#feat=css-variables):
```css
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
}
```
## Existing `font` and `font-family`
Existing `font` and `font-family` declarations are kept and [smoothscroll-anchor-polyfill](https://github.com/jonaskuske/smoothscroll-anchor-polyfill) will still work:
> 👉🏻 Even though the original font declarations are kept, using `html { }` only for `scroll-behavior` and declaring your font styles on `body { }` is prefered.
```css
html {
scroll-behavior: smooth;
font-family: "Helvetica Neue";
}
/* Compiles to: */
html {
scroll-behavior: smooth;
font-family: "scroll-behavior:smooth", "Helvetica Neue";
}
```
```css
html {
scroll-behavior: smooth;
font: strong 1em/1.4 "Helvetica Neue";
}
/* Compiles to: */
html {
scroll-behavior: smooth;
font: strong 1em/1.4 "Helvetica Neue";
font-family: "scroll-behavior:smooth", "Helvetica Neue";
}
```
## Installation
**npm**:
```
npm install postcss-smoothscroll-anchor-polyfill --save-dev
```
**or yarn**:
```bash
yarn add --dev postcss-smoothscroll-anchor-polyfill
```
## Usage
```js
postcss([ require('postcss-smoothscroll-anchor-polyfill') ])
```
See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment.
## Thanks to
This PostCSS plugin is based on a fork of [postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images), which was built by:
* [Michael Shick](https://www.github.com/mshick)
* [Federico Brigante](https://www.github.com/bfred-it)