Include Style & Editor Webpack Entries

[michealengland]

Include Style & Editor Webpack Entries

Note: This is a temporary solution until Webpack 5 is release which we will resume using splitChunks as recommended by mini-css-extract-plugin.

Special props shoutout to @salcode for helping simplify this PR dramatically.

This update is a workaround for extracting all CSS into a singular file based on entry name. The recommended method from mini-css-extract-plugin is to use splitChunks. However, this feature breaks the main entry JS file. According to this thread https://github.com/webpack-contrib/mini-css-extract-plugin/issues/147 the feature is fixed for Webpack 5 and is not being worked on for Webpack 4 which is our current version. There is not an official release Webpack 5 at this time.

Proposed Solution

Using glob.sync() we'll conditionally check the /src directory for all style.scss or editor.scss files and add to a glob which will be used as an entry point. If no files are located for either style.scss or editor.scss then no entry points will be added.

Example Directory Structure 📦src ┣ 📂directory-1 ┃ ┣ 📜editor.scss ┃ ┣ 📜index.js ┃ ┗ 📜style.scss ┣ 📂directory-2 ┃ ┣ 📜editor.scss ┃ ┣ 📜index.js ┃ ┗ 📜style.scss ┣ 📂directory-3 ┃ ┣ 📂d3-nested ┃ ┃ ┣ 📜editor.scss ┃ ┃ ┗ 📜index.js ┃ ┣ 📜index.js ┃ ┗ 📜style.scss ┣ 📜index.js ┗ 📜readme.md

Once all of the files have been located the entry points will transcode into a singular editor.css and style.css in the /build directory. It's worth mentioning that additional files are generated and ignored with the Emit plugin. See ignored files.

Example Build Files 📦build ┣ 📜editor.css ┣ 📜index.js ┗ 📜style.css

Ignored Files

'editor.asset.php',
'editor.js',
'style.asset.php',
'style.js',

Additional Notes

• Due to the use of glob.sync() stylesheets or sass files with a name of style or editor will be auto-loaded if they're located in /src directory. Each file will be transcoded into a style.css or editor.css based on the name. This could be an unwanted feature since it's common practice for styles to be imported in the JS.
• In Webpack 5 we will be using imports which will cause future breaking changes once that update is released because the imports must be included in the JS.
• Using glob.sync() is not as performant as splitChunks.
• If no style sheets are located, styles will not be bundled.

How to Test

1. You'll need to setup this branch on a local installation.
2. Using npm run start or npm run build will generate build files.
3. Experiment with the use style.scss or editor.scss and verify that your assets are being generated as expected.

If you have any questions or need help, I'm available.

[salcode]

@michealengland Thank you for your work on this. Would you be willing to create a branch off of feature/conditional-css-imports with an additional commit that adds multiple blocks in the src directory (perhaps the branch could be called feature/conditional-css-imports-demo).

Then all of the reviewers could pull down that branch, run npm install && npm run build and see this updated webpack config in action?

I know this is asking extra of you (and I very much appreciate all you have already done). I do think overall it would streamline the review process so reviewers aren't duplicating this work.

[michealengland]

@michealengland Thank you for your work on this. Would you be willing to create a branch off of feature/conditional-css-imports with an additional commit that adds multiple blocks in the src directory (perhaps the branch could be called feature/conditional-css-imports-demo).

This is a great idea, I'll get a test branch created and posted shortly.

[michealengland]

@salcode Here is a quick test branch I put together.

example/conditional-css-imports-demo

This branch demonstrates the following scenarios

• Multiple block directories with styles transcoded into a singular entry based file
• Use of Sass imports in src/example-block-1/style.scss
• Demonstration import hierarchy in the compiled style.css and edtior.css that happens automatically with the use of glob.sync().
• Shows the use of a nested directory to represent a component with styles inside of a block (notice the change in order for example-block-2

Note: While creating this branch I learned that // comments in the .scss files were throwing errors and not compiling. This is unrelated to this PR and will PostCSS configuration is finalized.