Internal: Refactor theme build scripts [TMZ-457] (#484)

.buildignore

@@ -1,10 +1,8 @@
 *.zip
 karma.conf.js
-assets/dev/
-assets/scss/
-assets/js/qunit-tests*
 bin/
-build/
+dev/
+modules/**/assets/
 composer.json
 composer.lock
 Gruntfile.js
@@ -15,6 +13,8 @@ package.json
 phpcs.xml
 README.md
 webpack.config.js
+.DS_Store
+.git/
 
 .github/
 .buildignore
@@ -23,3 +23,4 @@ webpack.config.js
 .browserslistrc
 .eslintignore
 .eslintrc.js
+.npmrc

.gitignore

@@ -1,11 +1,12 @@
 .idea/
 node_modules/
 .sass-cache/
-build/
+build/**
+assets/
 hello-elementor/
+elementor-hello-theme/
 log/
 vendor/
-composer.lock
 .DS_Store
 .project
 Thumbs.db
@@ -13,7 +14,6 @@ Thumbs.db
 *.map
 yarn.lock
 assets/js/
-*.css
 *.zip
 .npmrc
 .env

Gruntfile.js

@@ -1,138 +0,0 @@
-/**
- * Hello Elementor theme Makefile
- */
-'use strict';
-
-module.exports = function( grunt ) {
-	require( 'load-grunt-tasks' )( grunt );
-
-	const sass = require( 'sass' );
-
-	// Project configuration.
-	grunt.initConfig( {
-		pkg: grunt.file.readJSON( 'package.json' ),
-
-		sass: {
-			options: {
-				implementation: sass,
-			},
-			dist: {
-				files: 'production' === grunt.option( 'environment' ) ? [ {
-					expand: true,
-					cwd: 'assets/scss',
-					src: '*.scss',
-					dest: './',
-					ext: '.css',
-				} ] : [ {
-					expand: true,
-					cwd: 'assets/scss',
-					src: '*.scss',
-					dest: './',
-					ext: '.css',
-				} ],
-			},
-		},
-
-		postcss: {
-			dev: {
-				options: {
-					//map: true,
-
-					processors: [
-						require( 'autoprefixer' )(),
-					],
-				},
-				files: [ {
-					src: [
-						'*.css',
-						'!*.min.css',
-					],
-				} ],
-			},
-			minify: {
-				options: {
-					processors: [
-						require( 'autoprefixer' )(),
-						require( 'cssnano' )( {
-							reduceIdents: false,
-							zindex: false,
-						} ),
-					],
-				},
-				files: [ {
-					expand: true,
-					src: 'production' === grunt.option( 'environment' ) ? [
-						'*.css',
-						'!*.min.css',
-					] : [
-						'*.css',
-						'!*.min.css',
-					],
-					ext: '.min.css',
-				} ],
-			},
-		},
-
-		watch: {
-			styles: {
-				files: [
-					'assets/scss/**/*.scss',
-				],
-				tasks: [ 'styles' ],
-			},
-		},
-
-		checktextdomain: {
-			options: {
-				text_domain: 'hello-elementor',
-				correct_domain: true,
-				keywords: [
-					// WordPress keywords
-					'__:1,2d',
-					'_e:1,2d',
-					'_x:1,2c,3d',
-					'esc_html__:1,2d',
-					'esc_html_e:1,2d',
-					'esc_html_x:1,2c,3d',
-					'esc_attr__:1,2d',
-					'esc_attr_e:1,2d',
-					'esc_attr_x:1,2c,3d',
-					'_ex:1,2c,3d',
-					'_n:1,2,4d',
-					'_nx:1,2,4c,5d',
-					'_n_noop:1,2,3d',
-					'_nx_noop:1,2,3c,4d',
-				],
-			},
-			files: {
-				src: [
-					'**/*.php',
-					'!docs/**',
-					'!bin/**',
-					'!node_modules/**',
-					'!build/**',
-					'!tests/**',
-					'!.github/**',
-					'!vendor/**',
-					'!*~',
-				],
-				expand: true,
-			},
-		},
-	} );
-
-	grunt.registerTask( 'i18n', [
-		'checktextdomain',
-	] );
-
-	grunt.registerTask( 'styles', [
-		'sass',
-		'postcss',
-	] );
-
-	// Default task(s).
-	grunt.registerTask( 'default', [
-		'i18n',
-		'styles',
-	] );
-};

dev/scss/reset.scss

@@ -0,0 +1,5 @@
+@forward "reset/variables";
+@forward "reset/reset";
+@forward "reset/forms";
+@forward "reset/table";
+@forward "reset/list";

functions.php

@@ -131,12 +131,10 @@ if ( ! function_exists( 'hello_elementor_scripts_styles' ) ) {
 	 * @return void
 	 */
 	function hello_elementor_scripts_styles() {
-		$min_suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-
 		if ( apply_filters( 'hello_elementor_enqueue_style', true ) ) {
 			wp_enqueue_style(
 				'hello-elementor',
-				get_template_directory_uri() . '/style' . $min_suffix . '.css',
+				HELLO_THEME_STYLE_URL . 'reset.css',
 				[],
 				HELLO_ELEMENTOR_VERSION
 			);
@@ -145,7 +143,7 @@ if ( ! function_exists( 'hello_elementor_scripts_styles' ) ) {
 		if ( apply_filters( 'hello_elementor_enqueue_theme_style', true ) ) {
 			wp_enqueue_style(
 				'hello-elementor-theme-style',
-				get_template_directory_uri() . '/theme' . $min_suffix . '.css',
+				HELLO_THEME_STYLE_URL . 'theme.css',
 				[],
 				HELLO_ELEMENTOR_VERSION
 			);
@@ -154,7 +152,7 @@ if ( ! function_exists( 'hello_elementor_scripts_styles' ) ) {
 		if ( hello_elementor_display_header_footer() ) {
 			wp_enqueue_style(
 				'hello-elementor-header-footer',
-				get_template_directory_uri() . '/header-footer' . $min_suffix . '.css',
+				HELLO_THEME_STYLE_URL . 'header-footer.css',
 				[],
 				HELLO_ELEMENTOR_VERSION
 			);

includes/customizer-functions.php

@@ -74,12 +74,9 @@ add_action( 'customize_register', 'hello_customizer_register_elementor_pro_upsel
  * @return void
  */
 function hello_customizer_styles() {
-
-	$min_suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-
 	wp_enqueue_style(
 		'hello-elementor-customizer',
-		get_template_directory_uri() . '/customizer' . $min_suffix . '.css',
+		HELLO_THEME_STYLE_URL . 'customizer.css',
 		[],
 		HELLO_ELEMENTOR_VERSION
 	);

includes/elementor-functions.php

@@ -139,7 +139,7 @@ add_action( 'elementor/editor/after_enqueue_scripts', function() {
 
 	wp_enqueue_script(
 		'hello-theme-editor',
-		get_template_directory_uri() . '/assets/js/hello-editor' . $suffix . '.js',
+		HELLO_THEME_SCRIPTS_URL . 'hello-editor.js',
 		[ 'jquery', 'elementor-editor' ],
 		HELLO_ELEMENTOR_VERSION,
 		true
@@ -147,7 +147,7 @@ add_action( 'elementor/editor/after_enqueue_scripts', function() {
 
 	wp_enqueue_style(
 		'hello-editor',
-		get_template_directory_uri() . '/editor' . $suffix . '.css',
+		HELLO_THEME_STYLE_URL . 'editor.css',
 		[],
 		HELLO_ELEMENTOR_VERSION
 	);
@@ -162,11 +162,9 @@ add_action( 'wp_enqueue_scripts', function() {
 		return;
 	}
 
-	$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
-
 	wp_enqueue_script(
 		'hello-theme-frontend',
-		get_template_directory_uri() . '/assets/js/hello-frontend' . $suffix . '.js',
+		HELLO_THEME_SCRIPTS_URL . 'hello-frontend.js',
 		[],
 		HELLO_ELEMENTOR_VERSION,
 		true

includes/script.php

@@ -18,10 +18,10 @@ class Script {
 
 	public function enqueue() {
 		$asset_path = HELLO_THEME_SCRIPTS_PATH . $this->handle . '.asset.php';
-		$asset_url  = HELLO_THEME_SCRIPTS_URL;
+		$asset_url = HELLO_THEME_SCRIPTS_URL;
 
 		if ( ! file_exists( $asset_path ) ) {
-			throw new \Exception( 'You need to run `npm run build` for the "hello-elementor" first.' );
+			throw new \Exception( $asset_path . ' - You need to run `npm run build` for the "hello-elementor" first.' );
 		}
 
 		$script_asset = require $asset_path;
@@ -32,7 +32,7 @@ class Script {
 
 		wp_enqueue_script(
 			$this->handle,
-			$asset_url . "$this->handle.min.js",
+			$asset_url . "$this->handle.js",
 			$script_asset['dependencies'],
 			$script_asset['version'],
 			true

modules/admin-home/assets/js/components/settings/theme.js

@@ -28,18 +28,18 @@ export const Theme = () => {
 			</Alert>
 			<Setting
 				value={ helloStyle }
-				label={ __( 'Deregister Hello style.css', 'hello-elementor' ) }
+				label={ __( 'Deregister Hello reset.css', 'hello-elementor' ) }
 				onSwitchClick={ () => updateSetting( 'HELLO_STYLE', ! helloStyle ) }
-				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s primary stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
-				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/style.min.css" />` }
-				tip={ __( 'Tip: Deregistering style.css can make your website load faster. Disable it only if you’re using another style reset method, such as with a child theme.', 'hello-elementor' ) }
+				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s reset stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
+				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/assets/css/reset.css" />` }
+				tip={ __( 'Tip: Deregistering reset.css can make your website load faster. Disable it only if you’re using another style reset method, such as with a child theme.', 'hello-elementor' ) }
 			/>
 			<Setting
 				value={ helloTheme }
 				label={ __( 'Deregister Hello theme.css', 'hello-elementor' ) }
 				onSwitchClick={ () => updateSetting( 'HELLO_THEME', ! helloTheme ) }
-				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s primary stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
-				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/theme.min.css" />` }
+				description={ __( 'What it does: Turns off CSS reset rules by disabling the theme’s reset stylesheet. CSS reset rules make sure your website looks the same in different browsers.', 'hello-elementor' ) }
+				code={ `<link rel="stylesheet" href="${ window.location.origin }/wp-content/themes/hello-elementor/assets/css/theme.css" />` }
 				tip={ __( 'Tip: Deregistering theme.css can make your website load faster. Disable it only if you are not using any WordPress elements on your website, or if you want to style them yourself. Examples of WordPress elements include comments area, pagination box, and image align classes.', 'hello-elementor' ) }
 			/>
 		</Stack>

package.json

@@ -1,69 +1,42 @@
 {
-    "name": "elementor-hello-theme",
+    "name": "hello-elementor",
     "slug": "elementor-hello-theme",
     "homepage": "https://elementor.com/",
     "description": "A sample theme for Elementor.",
     "version": "3.4.3",
     "last_beta_version": "2.4.0-beta3",
     "scripts": {
-        "update-version": "node .github/scripts/update-version-in-files.js",
-        "build:prod": "grunt default --environment=production && WP_SRC_DIRECTORY=$(pwd) wp-scripts build --env=production",
-        "build:dev": "concurrently \"grunt default\" \"webpack --env=development\"",
-        "build:dev:watch": "concurrently \"grunt default watch\" \"webpack --env=developmentLocal\"",
-        "clean:build": "rimraf build && rimraf hello-elementor",
-        "zip": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . hello-elementor && zip -r hello-elementor.$npm_package_version.zip hello-elementor/*",
-        "lint:js": "eslint ."
+        "start": "wp-scripts start",
+        "build:dev": "composer update && composer install && wp-scripts build --env=developemntWithWatch",
+        "build:prod": "composer install --no-dev && wp-scripts build --env=production",
+        "lint:js": "wp-scripts lint-js",
+        "clean:build": "rimraf assets && rimraf $npm_package_name",
+        "build:dir": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . $npm_package_name",
+        "package": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . $npm_package_name",
+        "package:zip": "npm run package && zip -r $npm_package_name.$npm_package_version.zip ./$npm_package_name/*",
+        "zip": "npm run clean:build && npm run build:prod && rsync -av --exclude-from=.buildignore . $npm_package_name && zip -r $npm_package_name.$npm_package_version.zip $npm_package_name/*",
+        "update-version": "node .github/scripts/update-version-in-files.js"
     },
     "devDependencies": {
-        "@babel/core": "~7.18.0",
-        "@babel/plugin-proposal-class-properties": "^7.2.1",
-        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/preset-env": "^7.12.11",
-        "@wordpress/components": "^25.7.0",
-        "@wordpress/eslint-plugin": "^12.1.0",
-        "@wordpress/i18n": "^4.41.0",
-        "@wordpress/notices": "^4.9.0",
-        "@wordpress/scripts": "^26.12.0",
-        "autoprefixer": "~10.4.19",
-        "babel-eslint": "^8.2.6",
-        "babel-loader": "8.0.0",
-        "concurrently": "^6.2.0",
-        "cssnano": "4.1.11",
-        "eslint": "8.36.0",
-        "eslint-config-wordpress": "^2.0.0",
+        "@wordpress/components": "^29.9.0",
+        "@wordpress/eslint-plugin": "^22.9.0",
+        "@wordpress/i18n": "^5.23.0",
+        "@wordpress/notices": "^5.23.0",
+        "@wordpress/scripts": "^30.16.0",
         "eslint-plugin-babel": "^5.3.1",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-no-jquery": "^2.7.0",
-        "eslint-plugin-react": "^7.29.4",
-        "eslint-webpack-plugin": "^4.0.0",
-        "grunt": "^1.4.1",
-        "grunt-checktextdomain": "^1.0.1",
-        "grunt-contrib-sass": "~1.0.0",
-        "grunt-contrib-watch": "~1.1.0",
-        "grunt-sass": "~3.1.0",
-        "grunt-text-replace": "~0.4.0",
-        "grunt-webpack": "^6.0.0",
-        "grunt-wp-readme-to-markdown-with-extra": "~2.2.0",
-        "load-grunt-tasks": "^4.0.0",
-        "matchdep": "~2.0.0",
-        "npm-build-zip": "^1.0.3",
-        "rimraf": "^3.0.2",
-        "sass": "^1.53.0",
-        "terser-webpack-plugin": "^5.0.3",
-        "webpack": "^5.11.0",
-        "webpack-cli": "^4.7.2"
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "eslint-plugin-no-jquery": "^3.1.1",
+        "eslint-plugin-react": "^7.37.5",
+        "webpack-cli": "^6.0.1",
+        "webpack-remove-empty-scripts": "^1.0.4"
     },
     "dependencies": {
-        "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-        "@babel/plugin-transform-runtime": "^7.3.4",
-        "@elementor/icons": "1.37.0",
+        "@elementor/icons": "1.42.0",
         "@elementor/ui": "1.34.2",
-        "@lodder/grunt-postcss": "^3.1.1",
-        "grunt-autoprefixer": "^3.0.4",
-        "grunt-cssnano": "^2.1.0",
-        "html-entities": "^2.5.2",
+        "copy-webpack-plugin": "^13.0.0",
+        "html-entities": "^2.6.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "sass": "^1.89.0"
     }
 }

style.css

@@ -14,9 +14,3 @@
 	Text Domain: hello-elementor
 	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
 */
-
-@forward "reset/variables";
-@forward "reset/reset";
-@forward "reset/forms";
-@forward "reset/table";
-@forward "reset/list";

webpack.config.js

@@ -1,111 +1,63 @@
-/**
- * Grunt webpack task config
- *
- * @package
- */
-const path = require( 'path' );
+// WordPress webpack config:
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
 
-const TerserPlugin = require( 'terser-webpack-plugin' );
+//Plugins:
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
 
-const entry = {
-	'hello-editor': path.resolve( __dirname, './assets/dev/js/editor/hello-editor.js' ),
-	'hello-frontend': path.resolve( __dirname, './assets/dev/js/frontend/hello-frontend.js' ),
-	'hello-home-app': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-admin.js' ),
-	'hello-elementor-menu': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-menu.js' ),
-	'hello-elementor-settings': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-settings.js' ),
-	'hello-elementor-topbar': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-topbar.js' ),
-	'hello-conversion-banner': path.resolve( __dirname, './modules/admin-home/assets/js/hello-elementor-conversion-banner.js' ),
+//Utilities
+const path = require( 'path' );
+const imagesPath = path.resolve( __dirname, './assets/images' );
+const modulesDir = process.cwd() + '/modules/';
+
+const entryPoints = {
+	'css/reset': path.resolve( __dirname, './dev/scss', 'reset.scss' ),
+	'css/theme': path.resolve( __dirname, './dev/scss', 'theme.scss' ),
+	'css/header-footer': path.resolve( __dirname, './dev/scss', 'header-footer.scss' ),
+	'css/editor-styles': path.resolve( __dirname, './dev/scss', 'editor-styles.scss' ),
+	'css/editor': path.resolve( __dirname, './dev/scss', 'editor.scss' ),
+	'css/customizer': path.resolve( __dirname, './dev/scss', 'customizer.scss' ),
+
+	'js/hello-editor': path.resolve( __dirname, './dev/js/editor', 'hello-editor.js' ),
+	'js/hello-frontend': path.resolve( __dirname, './dev/js/frontend', 'hello-frontend.js' ),
+	'js/hello-home-app': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-admin.js' ),
+	'js/hello-elementor-menu': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-menu.js' ),
+	'js/hello-elementor-settings': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-settings.js' ),
+	'js/hello-elementor-topbar': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-topbar.js' ),
+	'js/hello-conversion-banner': path.resolve( modulesDir, 'admin-home/assets/js', 'hello-elementor-conversion-banner.js' ),
 };
 
-const moduleRules = {
-	rules: [
-		...defaultConfig.module.rules,
-		{
-			test: /\.js$/,
-			exclude: /node_modules/,
-			use: [
-				{
-					loader: 'babel-loader',
-					options: {
-						presets: [ '@babel/preset-env', '@babel/preset-react' ],
-						plugins: [
-							[ '@babel/plugin-proposal-class-properties' ],
-							[ '@babel/plugin-transform-runtime' ],
-							[ '@babel/plugin-transform-modules-commonjs' ],
-							[ '@babel/plugin-proposal-optional-chaining' ],
-							[ '@babel/plugin-syntax-dynamic-import' ],
-						],
-					},
-				},
-			],
-		},
-	],
-};
-
-const commonConfig = {
+module.exports = {
 	...defaultConfig,
-	target: 'web',
-	context: __dirname,
-	module: moduleRules,
-	entry,
-	output: {
-		...defaultConfig.output,
-		path: path.resolve( __dirname, './assets/js' ),
-		filename: '[name].js',
-	},
-};
+	...{
+		entry: entryPoints,
+		output: {
+			...defaultConfig.output,
+			path: path.resolve( __dirname, './assets' ),
+			chunkFilename: 'js/[name].js',
+			clean: false,
+		},
+		plugins: [
+			// Include WP's plugin config.
+			...defaultConfig.plugins,
 
-const webpackConfig = {
-	...commonConfig,
-	mode: 'development',
-	output: {
-		...commonConfig.output,
-		devtoolModuleFilenameTemplate: './[resource]',
-	},
-	entry: {
-		...entry,
-	},
-	devtool: 'source-map',
-};
-
-const webpackProductionConfig = {
-	...commonConfig,
-	mode: 'production',
-	optimization: {
-		...defaultConfig.optimization || {},
-		minimize: true,
-		minimizer: [
-			new TerserPlugin( {
-				terserOptions: {
-					keep_fnames: true,
-				},
-				include: /\.min\.js$/,
+			new CopyWebpackPlugin( {
+				patterns: [
+					{
+						from: path.resolve( modulesDir, 'admin-home/assets/images' ),
+						to: imagesPath,
+					},
+					{
+						from: path.resolve( __dirname, 'dev/images' ),
+						to: imagesPath,
+					},
+				],
+			} ),
+			// Removes the empty `.js` files generated by webpack but
+			// sets it after WP has generated its `*.asset.php` file.
+			new RemoveEmptyScriptsPlugin( {
+				stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
 			} ),
 		],
 	},
-	performance: { hints: false },
-};
-
-// Add minified entry points
-Object.entries( webpackProductionConfig.entry ).forEach( ( [ wpEntry, value ] ) => {
-	webpackProductionConfig.entry[ wpEntry + '.min' ] = value;
-} );
-
-webpackProductionConfig.plugins = defaultConfig.plugins;
-
-module.exports = ( env ) => {
-	if ( env.developmentLocal ) {
-		return { ...webpackConfig, watch: true };
-	}
-
-	if ( env.production ) {
-		return webpackProductionConfig;
-	}
-
-	if ( env.development ) {
-		return webpackConfig;
-	}
-
-	throw new Error( 'missing or invalid --env= development/production/developmentWithWatch/productionWithWatch' );
 };