Sage 10 FOUC on page load

Hi there,

Is anybody else having issues with FOUC with the latest sage release? I’ve developed sites using sage 10 (pre Bud) but the latest one the FOUC is noticeable on almost every page load. Example site here:

https://staging.reefandrainforest.co.uk/

I’m wondering if it has anything to do with how I’m setting up my JS and what the best practices are. I’m using the following structure:

import {domReady} from '@roots/sage/client';
import { gsap } from 'gsap';
import jquery from 'jquery';
import bla from 'bla';


// Set any global vars e.g.
const body = document.body

// Some Function
const initSomeFunction = () => {
  
}

function initScript(){
  initSomeFunction();
  initSomeOtherFunction();
}

const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err); 
  }

  initScript();

}

Another thing I’m noticing since adding sass support is that anytime I use a css custom prop the styles get output twice. E.g.

[data-theme~=light] {
    background-color: transparent;
    color: #04080e;
    color: var(--black);
}

This is happenning on every CSS var.

Here is my package.json:

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config/current"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "test": "npm run lint"
  },
  "devDependencies": {
    "@roots/bud": "6.4.3",
    "@roots/bud-eslint": "^6.4.3",
    "@roots/bud-prettier": "^6.4.3",
    "@roots/bud-sass": "^6.4.3",
    "@roots/eslint-config": "^6.4.3",
    "@roots/sage": "6.4.3"
  },
  "dependencies": {
    "@studio-freight/lenis": "^0.2.6",
    "@studio-freight/tempus": "^0.0.30",
    "embla-carousel": "^7.0.3",
    "gsap": "npm:@gsap/shockingly",
    "jquery": "^3.6.1",
    "lozad": "^1.16.0",
    "mmenu-js": "^9.2.0",
    "money": "^0.2.0",
    "swiper": "^8.4.2"
  }
}

Bud Config:

export default async (app) => {

  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://reefandrainforest.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/wp/wp-content/themes/reef_v7/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
      .settings({
        color: {
          custom: false,
          customGradient: false,
          defaultPalette: false,
          defaultGradients: false,
        },
        custom: {
          spacing: {},
          typography: {
            'font-size': {},
            'line-height': {},
          },
        },
        spacing: {
          padding: true,
          units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
        },
        typography: {
          customFontSize: false,
        },
      })
      .enable()

  app.sass.importGlobal([
    '@src/styles/common/viewports.scss',
  ])

  //app.sass.importGlobal('@src/styles/common/viewports.scss')     

};

Has anybody else had this issue? Loving the new sage btw! It’s always a steeper learning curve then anticipated but I always feel like I’m learning things that are super useful outside of just the WP space so thank you so much for all the effort you put in.

1 Like

There is nothing in Sage 10 that would set you up out of the box to suffer from FOUC issues. FOUC issues would be coming from how you’ve built out your site on top of Sage.

These styles aren’t being output twice…

I think that can be changed by modifying the browserslist config to only target browsers that already support CSS custom properties

1 Like

I did a write-up of where to start if this bothers you and you can’t get browserslist to stick:

I’d recommend keeping the default. It isn’t set by bud, it’s set by postcss. One day it won’t be anymore. That’ll be the day I recommend removing it.

1 Like

Thanks guys. Much appreciated