Font src calls missing semi-colon

vite
1

Trying to work with Sage 11 and getting this really weird issue when trying to compile a custom font file.

The error:

[vite:css] [postcss] /Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/resources/css/app.css:2:40692: Missed semicolon
file: /Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/resources/css/app.css:2:40691
    at Input.error (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/input.js:113:16)
    at Parser.checkMissedSemicolon (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/parser.js:138:22)
    at Parser.decl (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/parser.js:296:12)
    at Parser.other (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/parser.js:401:18)
    at Parser.parse (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/parser.js:472:16)
    at parse (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/lazy-result.js:165:16)
    at Processor.process (/Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/postcss/lib/processor.js:53:14)
    at runPostCSS (file:///Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:43824:52)
    at async compilePostCSS (file:///Users/rory/Sites/nursegrid/wp-content/themes/nursegrid/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:43794:18)

The call:

@font-face {
  font-family: 'Recife';
  font-style: normal;
  font-weight: 400;
  src: url("../../fonts/Recife/RecifeDisplayWeb-Medium.woff2") format("woff2");
}

My vite.config.js

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

import tailwindcss from '@tailwindcss/vite';
import laravel from 'laravel-vite-plugin';
import inject from '@rollup/plugin-inject';
import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';

export default defineConfig(({ command }) => ({
  base: command === 'serve' ? '/' : '/wp-content/themes/nursegrid/public/build/',

  esbuild: {
    jsxFactory: 'wp.element.createElement',
    jsxFragment: 'wp.element.Fragment',
  },

  plugins: [
    wordpressPlugin(),
    wordpressThemeJson(),

    tailwindcss(),

    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
    }),

    inject({
      include: [path.resolve(__dirname, 'resources/js/common/**/*.js')],
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],

  resolve: {
    alias: {
      '@scripts': path.resolve(__dirname, 'resources/js'),
      '@styles': path.resolve(__dirname, 'resources/styles'),
      '@fonts': path.resolve(__dirname, 'resources/fonts'),
      '@images': path.resolve(__dirname, 'resources/images'),
    },
  },
}));
2

I’m not able to reproduce this. Does using the @fonts alias change anything?

- src: url("../../fonts/Recife/RecifeDisplayWeb-Medium.woff2") format("woff2");
+ src: url("@fonts/Recife/RecifeDisplayWeb-Medium.woff2") format("woff2");
3

I get the same issue with that change

4

This is the minified file? When you jump to that position using an editor, what CSS ends there where a semicolon would be expected?

5

This is whats being generated. Seems like it drops the semi-colon on the display and skips the font src entirely

@font-face{font-family:Recife;font-style:normal;font-weight:400;font-display:swap}

6

Dropping the last semicolon should be fine (and save a character).
The official W3C CSS validator deems it 100% valid. The CSS is also fine for the PostCSS playground.

What postcss version is that project using (npm ls postcss)?

7

It’d be worth attempting following the fonts guide on a fresh Sage 11 install with no changes. Your post makes it seem like there’s quite a bit of changes — maybe something you’ve modified is responsible for what’s going on.

We’re not sure what’s causing this in your setup, but this shouldn’t be happening on a new install

8

└─┬ vite@6.3.5
└── postcss@8.5.3

9

A completely fresh install does work, yes. Doesn’t solve our issue with the changes we’ve made to account for custom react blocks we’re migrating in from older themes, but gives us a baseline. Ideallly would like to figure out whats wrong with ours

10

Sounds like you have a good path for further debugging and figuring this out. Let us know what you find out?