PostCSS fonts

[jho406]

When including styles from node_modules, sometimes the font faces refer to the packages font files. When PostCSS process that, it doesn't copy the font files over. For example with primereact installed at node_modules/primereact/resources/themes/lara-dark-amber/theme.css

@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}

Suspenders didn't add additional postcss modules, but this is what I had to do to get that working:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-nesting'),
    require('autoprefixer'),
    require('postcss-url')({
      url: 'copy',
      assetsPath: 'static'
    })
  ],
}

[stevepolitodesign]

Thank you for opening this.

When including styles from node_modules, sometimes the font faces refer to the packages font files

Can you provide an example of how you included these styles? I want to get a better understanding of the use case.

[jho406]

First

npm install primereact

In your application.postcss.css, add the following

@import "primereact/resources/themes/lara-light-cyan/theme.css";

Build the css and go to the root path of your rails app. Notice the console it says its missing a font.

Then add

    require('postcss-url')({
      url: 'copy',
      assetsPath: 'static'
    })

to your postcss.config.js. Rebuild the css, notice the new files located in assets/static. Go to the root path, now the error is gone.

[stevepolitodesign]

Fixed in #1191