#633: refactor: move frontend source from assets/src to top-level src by deepaklalwani97 · Pull Request #668 · rtCamp/theme-elementary

deepaklalwani97 · 2026-04-17T11:59:10Z

Description

Move frontend source from assets/src/ to a top-level src/ directory with context-based subdirectories (frontend/, admin/, editor/). New files added under src/ are compiled automatically without editing the webpack config.

Technical Details

readAllFileEntries in webpack.config.js now scans frontend/, admin/, editor/ subdirectories within a given base directory, skipping files prefixed with _ or .. Falls back to a flat scan if no context directories exist (used for src/js/frontend/modules/).
scripts webpack entry changed from a hardcoded path to dynamic discovery via readAllFileEntries('./src/js').
CopyWebpackPlugin copies fonts from src/fonts/ and optimizes SVGs from src/images/svg/ (via SVGO transform) into assets/build/ during build:dev, build:prod, and start.
shared/, globals/, and mixins/ directories are intentionally excluded from entry point scanning — they hold partials loaded via @use/@forward.
Removed unused cross-env devDependency; added copy-webpack-plugin and svgo as explicit devDependencies.

Checklist

assets/src/ removed; all frontend source lives under src/
npm run build:dev and npm run build:prod produce correct output in assets/build/
npm start watches and rebuilds on file changes
All lint scripts target src/
No old assets/src/ path references remain in any config or script
Existing JS tests pass
Adding a new file to src/css/admin/ or src/js/editor/ is auto-discovered without webpack config changes
Files prefixed with _ are not compiled as entry points
README.md and docs/asset-building-process.md updated to reflect new structure

Screenshots

N/A — no visual changes; this is a build tooling and source layout refactor.

Fixes/Covers issue

Fixes #633

Reorganize the theme's frontend source into a top-level src/ directory with context-based subdirectories (frontend/, admin/, editor/) that webpack discovers automatically via readAllFileEntries. This separates source from compiled output (assets/build/) and removes the need for manual webpack entry configuration. - Move CSS and JS source files into src/{css,js}/frontend/ - Add placeholder directories for admin, editor, shared, globals, mixins - Update readAllFileEntries to scan context subdirectories automatically - Integrate font copying and SVGO optimization into the webpack pipeline - Update lint scripts to target src/ - Remove unused cross-env dependency, add copy-webpack-plugin and svgo - Update README.md and docs to reflect new structure

Copilot

Pull request overview

Refactors the theme’s frontend asset source layout by moving files from assets/src/ to a top-level src/ tree and updating the webpack pipeline so entry points are auto-discovered by context (frontend/, admin/, editor/), with additional build-time copying/optimization for fonts and SVGs.

Changes:

Update webpack.config.js to discover JS/CSS entries from src/js/** and src/css/** (context-aware) and to copy fonts + optimize/copy SVGs into assets/build/.
Update npm scripts/dependencies to match the new build pipeline (remove cross-env, add copy-webpack-plugin + svgo, retarget linting to ./src).
Add/move initial src/ scaffolding (context directories, shared partial locations) and update docs/README to reflect the new structure.

Reviewed changes

Copilot reviewed 9 out of 20 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`webpack.config.js`	Entry auto-discovery from `src/`, plus CopyWebpackPlugin + SVGO integration.
`package.json`	Build/lint script updates; devDependency changes for the new pipeline.
`package-lock.json`	Lockfile updates reflecting dependency additions/removals.
`src/js/frontend/core-navigation.js`	Updates SCSS import path to the new `src/css/frontend/` location.
`src/js/frontend/modules/media-text.js`	Adds an Interactivity API module entry under the new modules path.
`src/css/frontend/styles.scss`	Adds initial frontend global stylesheet entry.
`src/css/frontend/core-navigation.scss`	Adds initial frontend stylesheet entry for core navigation.
`src/css/shared/README.md`	Documents that shared styles aren’t compiled as entries.
`src/css/mixins/_index.scss`	Adds mixin barrel placeholder.
`src/css/globals/_index.css`	Adds globals placeholder for custom properties/media.
`src/js/admin/.gitkeep`	Keeps new directory structure in git.
`src/js/editor/.gitkeep`	Keeps new directory structure in git.
`src/js/shared/.gitkeep`	Keeps new directory structure in git.
`src/css/admin/.gitkeep`	Keeps new directory structure in git.
`src/css/editor/.gitkeep`	Keeps new directory structure in git.
`src/fonts/.gitkeep`	Keeps new directory structure in git.
`src/images/svg/.gitkeep`	Keeps new directory structure in git.
`docs/asset-building-process.md`	Updates build documentation for the new structure and copy/optimize steps.
`README.md`	Updates repository structure documentation to reflect `src/` move.
`.stylelintignore`	Ignores markdown files now that `lint-style ./src` traverses docs/READMEs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

aryanjasala · 2026-04-27T07:00:18Z

+					noErrorOnMissing: true,
+					transform: {
+						transformer( content ) {
+							return svgoOptimize( content.toString() ).data;


The svgoOptimize call can fail on malformed SVGs or non-SVG files (e.g., .gitkeep is present in the svg directory). If svgoOptimize returns an object without data (or throws), this will crash the build. Consider adding a guard or filtering to only process .svg files.

Suggested change

return svgoOptimize( content.toString() ).data;

transformer( content, absoluteFilename ) {

if ( ! absoluteFilename.endsWith( '.svg' ) ) {

return content;

}

const result = svgoOptimize( content.toString() );

return result.data || content;

}

Fixed in 01ca73e

aryanjasala · 2026-04-27T07:00:19Z

+		fs.readdirSync( scanDir ).forEach( ( fileName ) => {
+			const fullPath = path.join( scanDir, fileName );
+			if (
+				! fs.lstatSync( fullPath ).isDirectory() &&
+				! fileName.startsWith( '_' ) &&
+				! fileName.startsWith( '.' )
+			) {
+				entries[ `${ prefix }${ fileName.replace( /\.[^/.]+$/, '' ) }` ] = fullPath;
+			}
+		} );


The readAllFileEntries function only scans one level deep within each context directory. Files in nested subdirectories (e.g., src/js/frontend/utils/helper.js) will be silently ignored. Can we make it more robust, so that it can scan sub-directories as well?

Fixed in 9e5c17f

Copilot

Pull request overview

Refactors the theme’s frontend asset source layout by moving from assets/src/ to a top-level src/ with context subdirectories, and updates the Webpack build pipeline to auto-discover entries and copy/optimize static assets into assets/build/.

Changes:

Updated webpack.config.js to auto-discover JS/CSS entry points under src/{js,css}/{frontend,admin,editor} and added copying of fonts + SVGO optimization/copying of SVGs into assets/build/.
Updated PHP asset registration paths to match the new nested output structure (e.g. js/frontend/..., css/frontend/...) and adjusted build-time file version typing.
Updated npm scripts/dependencies, docs, and ignore files to reflect the new source structure.

Reviewed changes

Copilot reviewed 11 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
webpack.config.js	Switches to dynamic entry discovery from top-level `src/`, adds CopyWebpackPlugin for fonts/SVGs, updates module entry location.
package.json	Removes `cross-env`, adds `copy-webpack-plugin` + `svgo`, updates build/lint scripts to target `src/`.
package-lock.json	Locks dependency changes for added/removed build tooling packages.
inc/Framework/Traits/AssetLoaderTrait.php	Adjusts filemtime version to be returned as a string.
inc/Core/Assets.php	Updates registered/enqueued asset paths to match new nested build outputs.
docs/asset-building-process.md	Documentation updates for new `src/` structure and build pipeline behavior (including fonts/SVG handling).
README.md	Updates documented repo structure to reflect `src/` and `assets/build/` split.
.stylelintignore	Ignores Markdown files (to avoid linting non-styles content under `src/`).
.gitignore	Adds `.vscode` to ignored files.
src/js/frontend/core-navigation.js	Updates SCSS import path for relocated stylesheet.
src/js/frontend/modules/media-text.js	Adds an Interactivity API module entry under the new `src/js/frontend/modules/` path.
src/js/shared/.gitkeep	Keeps `shared/` directory present in the repository.
src/js/admin/.gitkeep	Keeps `admin/` directory present in the repository.
src/js/editor/.gitkeep	Keeps `editor/` directory present in the repository.
src/css/frontend/styles.scss	Adds frontend global styles entry under new structure.
src/css/frontend/core-navigation.scss	Adds frontend styles entry for core navigation (new location).
src/css/admin/.gitkeep	Keeps `admin/` styles directory present.
src/css/editor/.gitkeep	Keeps `editor/` styles directory present.
src/css/shared/README.md	Documents that shared styles are partials and not entry points.
src/css/mixins/_index.scss	Adds mixin barrel for Sass module usage.
src/css/globals/_index.css	Adds globals index file (currently documented as Sass-loadable).
src/fonts/.gitkeep	Keeps fonts directory present for CopyWebpackPlugin input.
src/images/svg/.gitkeep	Keeps SVG directory present for CopyWebpackPlugin + SVGO input.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

abhishekxix · 2026-04-27T12:12:00Z

+		$this->register_script( 'core-navigation', 'js/frontend/core-navigation.js' );
+		$this->register_style( 'core-navigation', 'css/frontend/core-navigation.css' );
+		$this->register_style( 'elementary-theme-styles', 'css/frontend/styles.css' );


Fixed in 1a47812

abhishekxix · 2026-04-27T12:12:52Z

@@ -0,0 +1 @@
+/* CSS custom properties and @custom-media definitions. Load via @use where needed. */


@aryanjasala, could you please confirm if this is intentional? Or should I rename it to be a .scss file instead?

This should be renamed to .scss file

abhishekxix · 2026-04-27T12:13:20Z

+ * Recurses one level into each context subdirectory (frontend/, admin/,
+ * editor/) inside the given directory, collecting every file whose name
+ * does not start with `_` or `.`. If none of the context subdirectories
+ * exist, the directory itself is scanned instead.


#668 (comment)

deepaklalwani97 added 2 commits April 17, 2026 17:17

fix: add markdown files to stylelintignore

62fd3d6

deepaklalwani97 marked this pull request as ready for review April 17, 2026 12:20

deepaklalwani97 requested review from aryanjasala and Copilot April 17, 2026 12:21

Copilot started reviewing on behalf of deepaklalwani97 April 17, 2026 12:21 View session

Copilot AI reviewed Apr 17, 2026

View reviewed changes

Comment thread webpack.config.js

Comment thread webpack.config.js

deepaklalwani97 added 2 commits April 17, 2026 18:12

fix: cast filemtime return value to string in get_file_version method

35f27e0

refactor: reorganize asset paths and update webpack configuration

d851294

aryanjasala requested review from abhishekxix and bhavz-10 April 22, 2026 12:31

abhishekxix approved these changes Apr 24, 2026

View reviewed changes

aryanjasala requested changes Apr 27, 2026

View reviewed changes

aryanjasala requested a review from Copilot April 27, 2026 07:18

Copilot started reviewing on behalf of aryanjasala April 27, 2026 07:18 View session

Copilot AI reviewed Apr 27, 2026

View reviewed changes

abhishekxix added 3 commits April 27, 2026 14:44

Make readAllFileEntries recursive

9e5c17f

Fix svg optimizer filter

01ca73e

Update get_asset_meta to work with the new nested build paths

1a47812

abhishekxix requested a review from aryanjasala April 27, 2026 12:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#633: refactor: move frontend source from assets/src to top-level src#668

#633: refactor: move frontend source from assets/src to top-level src#668
deepaklalwani97 wants to merge 7 commits intotheme-elementary-v2from
refactor/frontend-source-reorganization

deepaklalwani97 commented Apr 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

aryanjasala Apr 27, 2026

Uh oh!

abhishekxix Apr 27, 2026

Uh oh!

aryanjasala Apr 27, 2026

Uh oh!

abhishekxix Apr 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

abhishekxix Apr 27, 2026

Uh oh!

abhishekxix Apr 27, 2026

Uh oh!

deepaklalwani97 Apr 27, 2026

Uh oh!

abhishekxix Apr 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-							return svgoOptimize( content.toString() ).data;
+						transformer( content, absoluteFilename ) {
+								if ( ! absoluteFilename.endsWith( '.svg' ) ) {
+									return content;
+								}
+								const result = svgoOptimize( content.toString() );
+								return result.data || content;
+							}

		@@ -0,0 +1 @@
		/* CSS custom properties and @custom-media definitions. Load via @use where needed. */

Conversation

deepaklalwani97 commented Apr 17, 2026

Description

Technical Details

Checklist

Screenshots

Fixes/Covers issue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants