Running `build` scripts on Windows does not generate CSS files for blocks

[Clorith]

Starting with WordPress 6.0, when running npm run build or npm run build:dev, no CSS files are generated for the blocks within wp-includes/blocks/**.

This was discovered while investigating #56615, it is currently unknown if they are related, this ticket is for reference and tracking.

[wildworks]

I took the diff between the results of the build with Windows OS and WSL (Ubuntu).
The following results occurred on Windows OS, including the issue of no CSS for blocks being generated.

All CSS Files aren't created

• build/wp-includes/blocks/{block}/

dist Directory isn't created

• build/wp-includes/css/dist/

These files have CRLFs

I think these files are set to CRLF when the git is cloned because they don't have end with a newline code.

• build/wp-admin/js/*.min.js
• build/wp-admin/js/widgets/*.min.js
• build/wp-admin/css/*.min.css
• build/wp-admin/css/*-rtl.css
• build/wp-admin/css/*-rtl.min.css
• build/wp-admin/css/colors/{slug}/colors-rtl.css
• build/wp-admin/css/colors/{slug}/colors-rtl.min.css
• build/wp-admin/css/colors/{slug}/colors.css
• build/wp-admin/css/colors/{slug}/colors.min.css
• build/wp-includes/js/*.min.js
• build/wp-includes/js/dist/*.min.js
• build/wp-includes/js/tinymce/wp-tinymce.js
• build/wp-includes/css/*.min.css
• build/wp-includes/css/*-rtl.css
• build/wp-includes/css/*-rtl.min.css

Trac ticket: https://core.trac.wordpress.org/ticket/56616

This patch unifies the forward slash as the delimiter character in the build process.

For Windows builds, path.join generates a backslashes. Thus, for example, the following process generates strange regular expressions:

​https://github.com/WordPress/wordpress-develop/blob/ac8cccac67a8f61e74824716507851e237826f4d/tools/webpack/blocks.js#L143-L148

{{{javascript
[

{

from: 'D:
Desktop
wp_dev
WordPress
wordpress
repo
node_modules
@wordpress
a11y
build-style
*.css',
to: 'D:
Desktop
wp_dev
WordPress
wordpress
repo
build
wp-includes
css
dist
a11y
[name].min.css',
transform: [Function (anonymous)],
noErrorOnMissing: true

},
{

from: 'D:
Desktop
wp_dev
WordPress
wordpress
repo
node_modules
@wordpress
annotations
build-style
*.css',
to: 'D:
Desktop
wp_dev
WordPress
wordpress
repo
build
wp-includes
css
dist
annotations
[name].min.css',
transform: [Function (anonymous)],
noErrorOnMissing: true

},
...

]
}}}

Furthermore, ​the webpack documentation recommends the use of forward slashes for from and to.

Don't use directly
in from option if it is a glob (i.e path\to\file.ext) option because on UNIX the backslash is a valid character inside a path component, i.e., it's not a separator. On Windows, the forward slash and the backward slash are both separators. Instead please use /.

In addition to paths containing regular expressions, I normalized all path.joins to forward slashes (to prevent problems caused by mixed path delimiters in the future).

In this patch, please check the following:

✅ On Mac/Unix, build results should match before and after applying the patch (In other words, no impact.).
✅ The build results after applying the patch should be the same on Mac/Unix and Windows.

_Note:_ As noted in the comments on Trac, some build files are CRLF on Windows and LF on Mac/Unix. It might be useful to add a new line at end of the file at build time.

As discussed with @Clorith, it would be cool if we could add some test coverage so CI will detect if these files are present in the build or not. (We can do that in a follow-up PR though.)

it would be cool if we could add some test coverage so CI will detect if these files are present in the build or not.

I'm new to Windows core CI, so a follow up PR would be nice 😅

@t-hamano, can you rebase this PR to check whether all CI jobs pass now? I landed ​https://github.com/WordPress/wordpress-develop/commit/108c92d8dd17b928b79a3304a8e03de0bf0b6069, and all checks are green again.

Done 🙂

[gziolo]

In 54307:

Tools: Fix running build scripts on Windows does not generate CSS files for blocks

Starting with WordPress 6.0, when running npm run build or npm run build:dev, no CSS files were generated for the blocks within wp-includes/blocks/**.

Props wildworks, clorith, sergeybiryukov.
Fixes #56616.

Committed with https://core.trac.wordpress.org/changeset/54307.