Roots Discourse

Sage 10 browsersync issue with reload

I’ve just installed sage 10 (current version) and everything is working fine. But if I use in app.scss some tailwind styling with @apply, mix compiles (very slowly) but the page doesn’t not reload. Is there something to change in the mix config ? And is there a way to make the compiling faster. Apparently If I use @apply in a SCSS file, mix recompiles everything: fonts, js, manifest.asset.php, and both css (app and editor).
Here is my (untouched) webpack.mix.js - besides the url in browsersync where I had to put https:// in front of my local domain (i use local by flywheel).

const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.
 |
 */

mix
  .setPublicPath('./public')
  .browserSync('https://galiffe.test');

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('tailwindcss')],
  });

mix
  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })
  .extract();

mix
  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');

mix
  .sourceMaps()
  .version();

Any help is welcome ! Thank you.

Are you building on WSL 2?

no I’m on mac latest os.

This seems to be a known issue with Laravel Mix and Tailwind:
https://github.com/tailwindlabs/tailwindcss/discussions/1514

Possible workaround:

Thank you but as you can see in the config: processCssUrls is already set to false…

How high goes the CPU? Are all cores used? Are you using a SSD?

Does this discussion describe your issue?
https://laracasts.com/discuss/channels/elixir/laravel-mix-extremly-slow

My mac Monitor controls shows a node process rising to 150% during the build time which is about 8 secondes.
it is a powerbook from 2018 with an SSD with the latest mac os - I think my mac is fine !

I’ve read it. but no I don’t think it changes anything. but can you reproduce this ? It is just a bare bone sage 10 installed with “composer create-project roots/sage your-theme-name dev-master” as mentionned in the official repo. Do you think it could be linked to Local by Flywheel (latest version 5.9.9) ?

Same issue with WSL 2. When even just one @apply is used, build becomes unbearably slow.

Ok then this is a real config pbl :wink: hopefully there is a fix soon ! Thank you for taking the time for this.

The build is very long with normal build and watch, so I don’t think this is caused by watching but rather by the build itself.

Not reloading is a feature not a bug. It applies the new CSS without browser reloading.
For the slow build, SASS triggers a Tailwind build every change, I recommend you switch to normal css with postcss-nested.

Hello,
I’ve tried with postcss and postcss-nested but a simple background-color takes 7 seconds to compile, this is not really usable.
Do you have a working config ?
Here is mine (not sure how to handle the 2 css files but this is another pbl.

const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.
 |
 */

mix
  .setPublicPath('./public')
  .browserSync('https://galiffe.test');

// mix
  // .sass('resources/styles/app.scss', 'styles')
  // .sass('resources/styles/editor.scss', 'styles')
  // .options({
  //   processCssUrls: false,
  //   postCss: [require('tailwindcss')],
  // });


mix
  .options({processCssUrls: false})
  .postCss('resources/styles/app.css', 'styles', [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    // require('postcss-custom-properties'),
    require('autoprefixer'),
  ]);
  // .postCss('resources/styles/editor.css', 'styles', [
  //   require('postcss-import'),
  //   require('tailwindcss'),
  //   require('postcss-nested'),
  //   // require('postcss-custom-properties'),
  //   require('autoprefixer'),
  // ]);
mix
  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({
    jquery: ['$', 'window.jQuery'],
  })
  .extract();

mix
  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');

mix
  .sourceMaps()
  .version();

That’s caused by the postcss-import package. You also don’t need to explicitly require autorprefixer as Mix includes it by default
This part of your config should look something like this

mix
  .postCss('resources/styles/app.css', 'styles')
  .postCss('resources/styles/editor.css', 'styles')
  .options({
    processCssUrls: false,
    postCss: [
      require('tailwindcss'),
      require('postcss-nested'),
    ],
  });

Note: a drawback to removing postcss-import is having to restart yarn start whenever you add a new class via tailwind’s config and need to use it via @apply

That works thank you. But it stays incredibly slow: 5-6 seconds if I had something as simple

body {
  @apply bg-red-500;
}

And it is the same if I rather add

body {
  background-color: red;
}

In both case, no styles is injected, I have to manually reload the page to see the change.
Is there a way to have the style injected and make the compiling faster ? Or is it normal like this ?
I repeat, I just installed latest sage 10 with “composer create-project roots/sage your-theme-name dev-master” on brand new install of wordpress on latest local by flywheel setup. There are no styles injected and the compile time is more or less always between 5 and 8 seconds, whatever config I use: the one delivered (sass) or postCss.
here is the postCSS config:

const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');

mix
  .setPublicPath('./public')
  .browserSync(
  'https://galiffe.test',
   );

mix
  .postCss('resources/styles/app.css', 'styles')
  .postCss('resources/styles/editor.css', 'styles')
  .options({
    processCssUrls: false,
    postCss: [
      require('tailwindcss'),
      require('postcss-nested'),
    ],
  });

mix
  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({
    jquery: ['$', 'window.jQuery'],
  })
  .extract();

mix
  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');

mix
  .sourceMaps()
  .version();

I tried to profile the build using VSCode with the nodejs debugger.
However, the resulting profile wasn’t very telling… Maybe you have more luck?

I don’t know what is profiling :wink: Nevermind, I’m sure plenty of people will have some ideas about this - which is well above my competence ! Thank you.

Profiling is a way to measure the performance of an application/script. It usually shows a tree of methods with information about how many times they are called and how long their execution need. This allows to spot the parts that take all the build time (probably some loop issue).

Might be related to https as it’s the only thing different from my setup. Can you try with http?
Mine looks like this:

mix
  .setPublicPath('./public')
  .browserSync(
  'galiffe.test',
   );