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!

[vitorjaguat]

Hi Greg.
Thank you for your answer.
But no, I didn't deploy the development version. I followed then docs, and deployed the zip file generated by npm run bundle.

Here is a screenshot from the moment I upload my zip file generated by npm run bundle. You can see it shows the same theme, with equal version number.

Is it normal? I thought npm run bundle and precisely the script javascript/node_scripts/zip.js would replace the version with a new one each time I call the bundle command...

[gregsullivan]

I think there may be a bit of a misunderstanding in terms of what the versioning is meant to do: The actual version number of the plugin isn't changed; instead, the version code used for static assets (CSS and JavaScript) is updated with a date-based asset version. For example, as I type this response, the asset version on underscoretw.com can be seen in this link to the CSS file:

https://underscoretw.com/wp-content/themes/_tw/style.css?ver=si69j2

si69j2 is the timestamp from when npm run bundle was run, converted to base 36. (This is the way Drupal used to do it, and possibly still does in some circumstances.) It only appears as the asset version and isn't used elsewhere in the theme.