Sage 10 browsersync issue with reload

sage
21

I tried (had to remove the local certificate provided by Local) but same: about 6 secondes for a background body !
Do you have a repo ? what dev environment do you use ?
I’m on node v14.15.3 yarn 1.22.4 and here is my package.json

{
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=12.14.0"
  },
  "scripts": {
    "build": "mix",
    "build:production": "mix --production",
    "start": "mix watch",
    "hot": "mix watch --hot",
    "clear": "wp acorn optimize:clear",
    "test": "npm run lint",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.4.0",
    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
    "@wordpress/babel-preset-default": "^5.0.1",
    "@wordpress/browserslist-config": "^3.0.1",
    "@wordpress/dependency-extraction-webpack-plugin": "^3.0.1",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "eslint": "^7.20.0",
    "eslint-plugin-import": "^2.22.1",
    "laravel-mix": "^6.0.11",
    "postcss": "^8.2.6",
    "sass": "^1.32.7",
    "sass-loader": "11.0.1",
    "stylelint": "^13.10.0",
    "stylelint-config-standard": "^20.0.0",
    "tailwindcss": "^2.0.3"
  },
  "dependencies": {
    "@barba/core": "^2.9.7",
    "@barba/css": "^2.1.15",
    "jquery": "^3.5.1",
    "postcss-import": "^14.0.0",
    "postcss-nested": "^5.0.5"
  }
}

And by the way, this is not related to barba. I’ve disabled it and it is the same (about 6 seconds and no injection).

22

It’s not instant for me either. Takes around 3s. So I assume that depends on the power of your PC.
It’s acceptable for me as I don’t write a lot of external CSS and it’s way better than the original 30s with Sass.
Did it solve the style not updating though?
Working on Trellis and Local for me btw. I’m on Linux.

23

No… no style injection. my mac is not the last one but a macbook pro 13’ 2018 with 16gb or Ram. That should do it, correct ? or is that we need a real workhorse now ?

24

Could this be relevant? Dart sass compiled vs uncompiled runtime performance?

25

haha no, your setup should actually be compiling faster!
I just tested the same project on trellis vs local and while trellis reflects the changes instantly, with local, I open the dev tools and see the css file being swapped in the head instantly but it takes 5 or more seconds to see the change.
Can you try opening the dev tools and see if you see the same?

26

By the way, I found a way to use sass with tailwind without the slow build. which is by using @tailwindcss/jit
It’ll be public on Monday, but works great for me so far.

1 Like
27

You rock @theMosaad ! I installed it @tailwindcss/jit: compiling is instant :wink:

I still had to rollback to browser-sync@2.21.0 in order for the styles to be injected, though.

So regarding this @knowler, there might still be an issue with the current recommended package.json version of browser-sync (2.26.14) - at least for those using Local as dev environment.

Thank you very much for your help @theMosaad @strarsis and @knowler !

2 Likes
28

The styles started getting injected instantly when using local after restarting my PC. I’m using browser-sync@^2.26.14
Not sure if you had a delay or it wasn’t injecting for you at all, but glad you got figured out a solution that works for you.

29

Not for me. I restarted and tried various version of browser-sync, the only one that injects the style is browser-sync@2.21.0. That’s strange because it is a version from 2018 ! Nevermind…
I’m not alone apparently see this.
Thank you.

30

This topic was automatically closed after 42 days. New replies are no longer allowed.