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: 24 days 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-10T23:38:33.000Z (5 months ago)
• Last Synced: 2024-10-03T12:19:01.243Z (about 1 month 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)