zachleat/postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies.

postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies. Based heavily on netlify/postcss-fout-with-a-class.

Documentation currently only has Gulp config examples but is open to contributions with other build tool configurations! This works anywhere postcss does.

Installation

npm install postcss-foft-classes

Sample: FOUT, Single Stage

See the full FOUT with a Class example code, with font faces and the JavaScript code that goes with it.

Gulp Config

See this working in ./gulp-test/.

.pipe(
  postcss([
    foftLoadedClasses({
      groups: [
        {
          families: ["Lato"],
          classNames: ["fonts-loaded"]
        }
      ]
    })
  ])
)

Input CSS

body {
  font-family: Lato, sans-serif;
}

Output CSS

body {
  font-family: sans-serif;
}

.fonts-loaded body {
  font-family: Lato;
}

Sample: FOFT, Two Stages

See the full FOFT example code, with font faces and the JavaScript code that goes with it.

Gulp Config

See this working in ./gulp-test/.

.pipe(
  postcss([
    foftLoadedClasses({
      groups: [
        {
          families: ["LatoInitial", "Lato"],
          classNames: ["fonts-loaded", "fonts-loaded-2"]
        }
      ]
    })
  ])
)

Input CSS

body {
  font-family: Lato, sans-serif;
}

Output CSS

body {
  font-family: sans-serif;
}

.fonts-loaded body {
  font-family: LatoInitial;
}

.fonts-loaded-2 body {
  font-family: Lato;
}

postcss-foft-classes's Issues

Loading two fonts with one class gives an error

Using this code:

.pipe(
  postcss([
    foftLoadedClasses({
      groups: [
      {
        families: ["ff-meta-serif-web-pro", "ff-meta-web-pro"],
        classNames: ["fonts-loaded"]
      }
    ]
    }) // font loading
  ])
)

gives an error:

Message:
Cannot read property 'split' of undefined
Details:
fileName: style.css
domainEmitter: [object Object]
domainThrown: false

But when I use only one font, it works fine:

.pipe(
  postcss([
    foftLoadedClasses({
      groups: [
      {
        families: ["ff-meta-serif-web-pro"],
        classNames: ["fonts-loaded"]
      }
    ]
    }) // font loading
  ])
)

Am I misunderstanding the syntax for multiple families?

Postcss 8 compatible

Upgraded my setup to Webpack 5 and Postcss 8 and got:

foft-classes: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

Was wondering if you were going to make this postcss8 compatible?

Edit: made a PR : #6

Add possibility to allow multiple CSS classes for one font

Hi,

I'd like to apply more than one CSS class for one web font.

For example:

.pipe(postcss([
  foftLoadedClasses({
	groups: [
	  {
		families: ['Taz'],
		classNames: [
		  ['js_fonts-loaded', 'no-js'],
		],
	  },
	],
   }),
]))

Which currently results in:

.js_fonts-loaded,
no-js body {
  font-family: Taz
}

It should result in:

.js_fonts-loaded body,
.no-js body {
  font-family: Taz
}

Here I'd like to ensure that the web font is loading even if JS (with FontFaceObserver) isn't available.

Would this be possible?

Best regards

vaxul