Skip to content

Create shared configuration builders.#1

Open
Hug0-Drelon wants to merge 6 commits intomasterfrom
feat/create-config-builders
Open

Create shared configuration builders.#1
Hug0-Drelon wants to merge 6 commits intomasterfrom
feat/create-config-builders

Conversation

@Hug0-Drelon
Copy link
Member

@Hug0-Drelon Hug0-Drelon commented Feb 2, 2026

What?

Let's refactor webpack.config.js from all our plugins.

How?

Create new API to generate webpack configurations:

  • getVanillaConfig for Vanilla JS and CSS files (meaning no complex build rules nor JSX transpilation).
  • getReactifiedConfig for React-like JS and CSS files (perfect for custom sidebars or blocks for instance).
  • Cover it with Jest unit tests.
  • Take the opportunity to add ESLint and a proper CI.
  • Lint already existing files and rename them (their inner code is kept untouched).

@Hug0-Drelon Hug0-Drelon self-assigned this Feb 2, 2026
@Hug0-Drelon Hug0-Drelon added the enhancement New feature or request label Feb 2, 2026
@Marianne380 Marianne380 self-requested a review February 2, 2026 13:18
@Hug0-Drelon
Copy link
Member Author

@Marianne380 I've added SASS transpilation in reactified.js (see sassRulesMinified and sassRulesUnminified). Sorry for the modification during your review... 😅

Comment on lines 93 to 137
const sassRulesMinified =
sassLoadPaths.length > 0
? [
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
loadPaths: sassLoadPaths,
outputStyle: 'compressed',
sourceMap: ! isProduction,
},
},
},
],
},
]
: [];

const sassRulesUnminified =
sassLoadPaths.length > 0
? [
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
loadPaths: sassLoadPaths,
outputStyle: 'expanded',
sourceMap: ! isProduction,
},
},
},
],
},
]
: [];

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since outputStyle seems to be the only difference, could it be refactored ?

Maybe something to use like :

module: {
  rules: [ ...transpilationRules, ...getSassRules( 'compressed' ) ],
}

module: {
  rules: [ ...transpilationRules, ...getSassRules( 'expanded' ) ],
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, I've been a bit further in 8ec204f.

"test": "wp-scripts test-unit-js",
"lint": "wp-scripts lint-js"
},
"peerDependencies": {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add sass-loader ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, done in 8ec204f.

verbose: false,
cleanOnceBeforeBuildPatterns: [],
cleanAfterEveryBuildPatterns: [
path.join( process.cwd(), '**/*.work' ),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this existed before, but noticed cleanAfterEveryBuildPatterns uses process.cwd() which cleans **/*.work in the entire project, right ?

Should we scope it to destination instead to only clean the build directory?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're right. But .work files are artifact that must be deleted anyway so there is not risk to leave it as it is right now.
Since it is really old code and that our three plugins depends on it, I'd like to cover it with tests before modifying it.
Is it ok for you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants