html {
    scroll-behavior: smooth;
}

compiles to:

html {
    font-family: "scroll-behavior:smooth";
    scroll-behavior: smooth;
}

or if all browsers in your browserslist support CSS Custom Properties:

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}

Existing font and font-family

Existing font and font-family declarations are kept and 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.

html {
    scroll-behavior: smooth;
    font-family: "Helvetica Neue";
}

/* Compiles to: */

html {
    scroll-behavior: smooth;
    font-family: "scroll-behavior:smooth", "Helvetica Neue";
}

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:

yarn add --dev postcss-smoothscroll-anchor-polyfill

Usage

postcss([ require('postcss-smoothscroll-anchor-polyfill') ])

See PostCSS docs for examples for your environment.

Thanks to

This PostCSS plugin is based on a fork of postcss-object-fit-images, which was built by:

• Michael Shick
• Federico Brigante