search

zachleat / postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies.
MIT License
90 stars 4 forks source link

Add possibility to allow multiple CSS classes for one font #2

Closed vaxul closed 6 years ago

vaxul commented 6 years ago

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

zachleat commented 6 years ago

Available in now published v1.0.3. Use ['js_fonts-loaded no-js'], spaces to separate multiple classes for a single stage.