Versioning Issue with npm run bundle

[vitorjaguat]

Hi Greg,

First of all, thank you for sharing your time and the result of such dedicated research with all of us.

I’m relatively new to the WP universe; my original stack is based on Next.js and React. It’s been a pleasure writing a theme using Tailwind, so thank you for that!

I’m facing an issue when generating new versions of my theme using npm run bundle. It seems that the generated zip file doesn’t update the styles and scripts versions with the current timestamp at the moment of bundling. For instance, I checked the style.css file inside the zipped folder, and it still shows version 0.1.0. Shouldn’t that number have changed?

As a result, when I upload the zipped folder in the WP admin panel, it doesn’t recognize the version change and fails to load the new styles or scripts I’ve added.

Here’s the output I get when running npm run bundle:

bash
Copy code
npm run bundle

> bundle
> run-s production zip


> production
> run-p "production:**"


> production:tailwind:editor:extra
> cross-env NODE_ENV=production npm run development:tailwind:editor:extra -- --minify


> production:tailwind:frontend
> cross-env NODE_ENV=production npm run development:tailwind:frontend -- --minify


> production:esbuild
> npm run development:esbuild -- --minify


> production:tailwind:editor
> cross-env NODE_ENV=production npm run development:tailwind:editor -- --minify


> development:esbuild
> npx esbuild ./javascript/script.js ./javascript/block-editor.js --target=esnext --bundle --outdir=./theme/js --out-extension:.js=.min.js --minify


> development:tailwind:editor:extra
> cross-env _TW_TARGET=editor npx tailwindcss --postcss -i tailwind/tailwind-editor-extra.css -c ./tailwind/tailwind.config.js -o ./theme/style-editor-extra.css --minify


> development:tailwind:editor
> cross-env _TW_TARGET=editor npx tailwindcss --postcss -i ./tailwind/tailwind.css -c ./tailwind/tailwind.config.js -o ./theme/style-editor.css --minify


> development:tailwind:frontend
> npx tailwindcss --postcss -i ./tailwind/tailwind.css -c ./tailwind/tailwind.config.js -o ./theme/style.css --minify


  theme/js/script.min.js        44.5kb
  theme/js/block-editor.min.js   1.0kb

⚡ Done in 15ms

Rebuilding...

Rebuilding...

Rebuilding...

Done in 272ms.

Done in 420ms.

Done in 431ms.

> zip
> node node_scripts/zip.js lb_uint

75762 total bytes.
Theme ZIP file created.
Date-based versioning string successfully added to `./functions.php`.

If you need any additional information, please let me know.
I really appreciate your attention.

Thank you!

[vitorjaguat]

I had to deactivate the theme, delete it, then upload it again. And then the new styles and scripts were there.
That shouldn't be needed, right?

[gregsullivan]

Hi Vitor—Thanks for posting this, and you're very welcome! I'm happy to hear you're enjoying working with _tw.

In terms of your question—and this might be a sign of a gap in the documentation—my guess is that you deployed the development version of the theme and then uploaded the zip file of the theme from npm run bundle. The latter won't override the former, so you would need to activate the version from npm run bundle after uploading it, and you would see two themes with the same name.

The development version never needs to be uploaded to production, but if it is, you can simply delete as you described above.

Do you think that could be what happened? I'm happy to discuss further if you don't think that was the case!