Running gulp postcss in parallel with webpack - css

Question

I'm working on a project with a pre-configured webpack setup, that I cannot change. I do have access to the package.json though.
I'd like to use nesting in the css files. Every component in src/component has its own folder with a styles.css file. There is auto-reloading for the browser, when I change and save a .css file while the webpack based dev process is running.
I found a workaround hack to get nested css working with postcss by running a gulp watch process in parallel. The gulpfile.js looks like this:
const { src, dest, watch, series, parallel } = require('gulp')
const postcss = require('gulp-postcss')
const rename = require('gulp-rename')
const watchPcss = () => {
watch(['src/**/*.pcss'], { followSymlinks: false }, series(pcss))
}
const pcss = () => {
return src('src/**/*.pcss')
.pipe(postcss([require('autoprefixer'), require('postcss-nested')]))
.pipe(
rename((path) => {
path.extname = '.css'
}),
)
.pipe(dest('./src'))
}
exports.watch = series(watchPcss)
exports.default = series(pcss)
I have additional style.pcss files in each folder, in which I can use nesting. The gulp watch task looks for changes in .pcss files and then runs postcss to convert it to a normal css styles.css file.
This does work. The styles.css files get correctly generated. And saving changes in the .pcss files, do not trigger the webpack watch process.
My plan was that the generated/updated styles.css would trigger webpack and therefore update site in the browser. However, this only works sometimes. Most of the time, all the styles in the .css of the corresponding changed .pcss are not there at all (also not the styles that were in the file before the changes). I then have to save the .css file manually to make the styles show.
Is it possible that the gulp process does not "update" the file, but deletes it and creates a new file? And the webpack watch process notices the "deleting" of the file, but the creating of the new file happens too soon for the watch process to be triggered again?
Is there a way to fix this? Maybe just "touch" the .css file again after xxx ms?

Answer 1

This is probably not the best or "correct" way to make it work, but it seems to do the trick:
const { src, dest, watch, series, parallel } = require('gulp')
const postcss = require('gulp-postcss')
const rename = require('gulp-rename')
const touch = require('gulp-touch-cmd')
const watchPcss = () => {
watch(['src/**/*.pcss'], { followSymlinks: false }, series(pcss, css))
}
const css = () => {
return src('src/**/*.css').pipe(touch())
}
const pcss = () => {
return src('src/**/*.pcss')
.pipe(postcss([require('autoprefixer'), require('postcss-nested')]))
.pipe(
rename((path) => {
path.extname = '.css'
}),
)
.pipe(dest('./src'))
}
exports.watch = parallel(watchPcss)
exports.default = series(pcss)