Ok then this is a real config pbl 
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 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',
);
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).
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.
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 ?
Could this be relevant? Dart sass compiled vs uncompiled runtime performance?
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?
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
You rock @theMosaad ! I installed it @tailwindcss/jit: compiling is instant
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
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.
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.
This topic was automatically closed after 42 days. New replies are no longer allowed.