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.