Merge branch 'add/legacy-assets-build' into trunk

.gitignore

@@ -40,6 +40,10 @@ vendor/
 # TypeScript files
 tsconfig.tsbuildinfo
 
+# WooCommerce Plugin built files
+plugins/woocommerce/assets/css/
+plugins/woocommerce/assets/js/
+
 # wp-env config
 .wp-env.override.json
 

plugins/woocommerce/.gitignore

@@ -7,12 +7,11 @@ none
 # Sass
 .sass-cache/
 
-# Compiled CSS
-/assets/css/*.css
-/assets/css/photoswipe/**/*.min.css
+# All CSS
+/assets/css/*
 
-# Minified JS
-/assets/js/**/*.min.js
+# All JS
+/assets/js/*
 
 # Behat/CLI Tests
 tests/cli/installer
@@ -34,6 +33,9 @@ tests/cli/vendor
 # Logs
 /logs
 
+# TypeScript files
+tsconfig.tsbuildinfo
+
 # Composer
 /vendor/
 /bin/composer/**/vendor/

plugins/woocommerce/Gruntfile.js

@@ -1,231 +0,0 @@
-module.exports = function( grunt ) {
-	'use strict';
-	var sass = require( 'node-sass' );
-
-	grunt.initConfig({
-
-		// Setting folder templates.
-		dirs: {
-			css: 'assets/css',
-			fonts: 'assets/fonts',
-			images: 'assets/images',
-			js: 'assets/js',
-			php: 'includes'
-		},
-
-		// JavaScript linting with ESLint.
-		eslint: {
-			src: [
-				'<%= dirs.js %>/admin/*.js',
-				'!<%= dirs.js %>/admin/*.min.js',
-				'<%= dirs.js %>/frontend/*.js',
-				'!<%= dirs.js %>/frontend/*.min.js'
-			]
-		},
-
-		// Sass linting with Stylelint.
-		stylelint: {
-			options: {
-				configFile: '.stylelintrc'
-			},
-			all: [
-				'<%= dirs.css %>/*.scss',
-				'!<%= dirs.css %>/select2.scss'
-			]
-		},
-
-		// Minify .js files.
-		uglify: {
-			options: {
-				ie8: true,
-				parse: {
-					strict: false
-				},
-				output: {
-					comments : /@license|@preserve|^!/
-				}
-			},
-			js_assets: {
-				files: [{
-					expand: true,
-					cwd: '<%= dirs.js %>/',
-					src: [
-						'**/*.js',
-						'!**/*.min.js'
-					],
-					extDot: 'last',
-					dest: '<%= dirs.js %>',
-					ext: '.min.js'
-				}]
-			}
-		},
-
-		// Compile all .scss files.
-		sass: {
-			compile: {
-				options: {
-					implementation: sass,
-					sourceMap: 'none'
-				},
-				files: [{
-					expand: true,
-					cwd: '<%= dirs.css %>/',
-					src: ['*.scss'],
-					dest: '<%= dirs.css %>/',
-					ext: '.css'
-				}]
-			}
-		},
-
-		// Generate RTL .css files.
-		rtlcss: {
-			woocommerce: {
-				expand: true,
-				cwd: '<%= dirs.css %>',
-				src: [
-					'*.css',
-					'!select2.css',
-					'!*-rtl.css'
-				],
-				dest: '<%= dirs.css %>/',
-				ext: '-rtl.css'
-			}
-		},
-
-		// Minify all .css files.
-		cssmin: {
-			minify: {
-				files: [
-					{
-						expand: true,
-						cwd: '<%= dirs.css %>/',
-						src: ['*.css'],
-						dest: '<%= dirs.css %>/',
-						ext: '.css'
-					},
-					{
-						expand: true,
-						cwd: '<%= dirs.css %>/photoswipe/',
-						src: ['*.css', '!*.min.css'],
-						dest: '<%= dirs.css %>/photoswipe/',
-						ext: '.min.css'
-					},
-					{
-						expand: true,
-						cwd: '<%= dirs.css %>/photoswipe/default-skin/',
-						src: ['*.css', '!*.min.css'],
-						dest: '<%= dirs.css %>/photoswipe/default-skin/',
-						ext: '.min.css'
-					}
-				]
-			}
-		},
-
-		// Concatenate select2.css onto the admin.css files.
-		concat: {
-			admin: {
-				files: {
-					'<%= dirs.css %>/admin.css' : ['<%= dirs.css %>/select2.css', '<%= dirs.css %>/admin.css'],
-					'<%= dirs.css %>/admin-rtl.css' : ['<%= dirs.css %>/select2.css', '<%= dirs.css %>/admin-rtl.css']
-				}
-			}
-		},
-
-		// Watch changes for assets.
-		watch: {
-			css: {
-				files: ['<%= dirs.css %>/*.scss'],
-				tasks: ['sass', 'rtlcss', 'postcss', 'cssmin', 'concat']
-			},
-			js: {
-				files: [
-					'GruntFile.js',
-					'<%= dirs.js %>/**/*.js',
-					'!<%= dirs.js %>/**/*.min.js'
-				],
-				tasks: ['eslint','newer:uglify']
-			}
-		},
-
-		// PHP Code Sniffer.
-		phpcs: {
-			options: {
-				bin: 'vendor/bin/phpcs'
-			},
-			dist: {
-				src:  [
-					'**/*.php', // Include all php files.
-					'!includes/api/legacy/**',
-					'!includes/libraries/**',
-					'!node_modules/**',
-					'!tests/cli/**',
-					'!tmp/**',
-					'!vendor/**'
-				]
-			}
-		},
-
-		// Autoprefixer.
-		postcss: {
-			options: {
-				processors: [
-					require( 'autoprefixer' )
-				]
-			},
-			dist: {
-				src: [
-					'<%= dirs.css %>/*.css'
-				]
-			}
-		}
-	});
-
-	// Load NPM tasks to be used here.
-	grunt.loadNpmTasks( 'grunt-sass' );
-	grunt.loadNpmTasks( 'grunt-phpcs' );
-	grunt.loadNpmTasks( 'grunt-rtlcss' );
-	grunt.loadNpmTasks( 'grunt-postcss' );
-	grunt.loadNpmTasks( 'grunt-stylelint' );
-	grunt.loadNpmTasks( 'gruntify-eslint' );
-	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
-	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
-	grunt.loadNpmTasks( 'grunt-contrib-concat' );
-	grunt.loadNpmTasks( 'grunt-contrib-copy' );
-	grunt.loadNpmTasks( 'grunt-contrib-watch' );
-	grunt.loadNpmTasks( 'grunt-contrib-clean' );
-	grunt.loadNpmTasks( 'grunt-newer' );
-
-	// Register tasks.
-	grunt.registerTask( 'default', [
-		'js',
-		'css'
-	]);
-
-	grunt.registerTask( 'js', [
-		'eslint',
-		'uglify:js_assets'
-	]);
-
-	grunt.registerTask( 'css', [
-		'sass',
-		'rtlcss',
-		'postcss',
-		'cssmin',
-		'concat'
-	]);
-
-	grunt.registerTask( 'assets', [
-		'js',
-		'css'
-	]);
-
-	grunt.registerTask( 'e2e-build', [
-		'uglify:js_assets',
-		'css'
-	]);
-
-	// Only an alias to 'default' task.
-	grunt.registerTask( 'dev', [
-		'default'
-	]);
-};

plugins/woocommerce/includes/class-woocommerce.php

@@ -932,7 +932,7 @@ final class WooCommerce {
 			return;
 		}
 
-		$message_one = __( 'You have installed a development version of WooCommerce which requires files to be built and minified. From the plugin directory, run <code>grunt assets</code> to build and minify assets.', 'woocommerce' );
+		$message_one = __( 'You have installed a development version of WooCommerce which requires files to be built and minified. From the plugin directory, run <code>pnpm install</code> and then <code>pnpm nx build woocommerce-legacy-assets</code> to build and minify assets.', 'woocommerce' );
 		$message_two = sprintf(
 			/* translators: 1: URL of WordPress.org Repository 2: URL of the GitHub Repository release page */
 			__( 'Or you can download a pre-built version of the plugin from the <a href="%1$s">WordPress.org repository</a> or by visiting <a href="%2$s">the releases page in the GitHub repository</a>.', 'woocommerce' ),

plugins/woocommerce/legacy/.browserslistrc

@@ -0,0 +1,3 @@
+> 0.1%
+ie 8
+ie 9

plugins/woocommerce/legacy/.eslintignore

@@ -0,0 +1,21 @@
+*.min.js
+
+/js/accounting/**
+/js/flexslider/**
+/js/jquery-blockui/**
+/js/jquery-cookie/**
+/js/jquery-flot/**
+/js/jquery-payment/**
+/js/jquery-qrcode/**
+/js/jquery-serializejson/**
+/js/jquery-tiptip/**
+/js/jquery-ui-touch-punch/**
+/js/js-cookie/**
+/js/photoswipe/**
+/js/prettyPhoto/**
+/js/round/**
+/js/select2/**
+/js/selectWoo/**
+/js/stupidtable/**
+/js/zeroclipboard/**
+/js/zoom/**

plugins/woocommerce/legacy/.eslintrc.js

@@ -0,0 +1,31 @@
+/** @format */
+
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		es6: true,
+		node: true
+	},
+	globals: {
+		wp: true,
+		wpApiSettings: true,
+		wcSettings: true,
+		es6: true
+	},
+	rules: {
+		camelcase: 0,
+		indent: 0,
+		'max-len': [ 2, { 'code': 140 } ],
+		'no-console': 1
+	},
+	parser: 'babel-eslint',
+	parserOptions: {
+		ecmaVersion: 8,
+		ecmaFeatures: {
+			modules: true,
+			experimentalObjectRestSpread: true,
+			jsx: true
+		}
+	},
+};

plugins/woocommerce/legacy/.gitignore

@@ -0,0 +1,3 @@
+js/**/*.min.js
+css/*.css
+css/photoswipe/**/*.min.css

plugins/woocommerce/legacy/.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-wordpress",
+}

plugins/woocommerce/legacy/Gruntfile.js

@@ -0,0 +1,271 @@
+module.exports = function ( grunt ) {
+	'use strict';
+	var sass = require( 'node-sass' );
+
+	grunt.initConfig( {
+		// Setting folder templates.
+		dirs: {
+			css: 'css',
+			cssDest: '../assets/css',
+			fonts: 'assets/fonts',
+			images: 'assets/images',
+			js: 'js',
+			jsDest: '../assets/js',
+			php: 'includes',
+		},
+
+		// JavaScript linting with ESLint.
+		eslint: {
+			src: [
+				'<%= dirs.js %>/admin/*.js',
+				'!<%= dirs.js %>/admin/*.min.js',
+				'<%= dirs.js %>/frontend/*.js',
+				'!<%= dirs.js %>/frontend/*.min.js',
+			],
+		},
+
+		// Sass linting with Stylelint.
+		stylelint: {
+			options: {
+				configFile: '.stylelintrc',
+			},
+			all: [ '<%= dirs.css %>/*.scss', '!<%= dirs.css %>/select2.scss' ],
+		},
+
+		// Minify .js files.
+		uglify: {
+			options: {
+				ie8: true,
+				parse: {
+					strict: false,
+				},
+				output: {
+					comments: /@license|@preserve|^!/,
+				},
+			},
+			js_assets: {
+				files: [
+					{
+						expand: true,
+						cwd: '<%= dirs.jsDest %>/',
+						src: [ '**/*.js', '!**/*.min.js' ],
+						extDot: 'last',
+						dest: '<%= dirs.jsDest %>',
+						ext: '.min.js',
+					},
+				],
+			},
+		},
+
+		// Compile all .scss files.
+		sass: {
+			compile: {
+				options: {
+					implementation: sass,
+					sourceMap: false,
+				},
+				files: [
+					{
+						expand: true,
+						cwd: '<%= dirs.css %>/',
+						src: [ '*.scss' ],
+						dest: '<%= dirs.css %>/',
+						ext: '.css',
+					},
+				],
+			},
+		},
+
+		// Generate RTL .css files.
+		rtlcss: {
+			woocommerce: {
+				expand: true,
+				cwd: '<%= dirs.css %>',
+				src: [ '*.css', '!select2.css', '!*-rtl.css' ],
+				dest: '<%= dirs.css %>/',
+				ext: '-rtl.css',
+			},
+		},
+
+		// Minify all .css files.
+		cssmin: {
+			minify: {
+				files: [
+					{
+						expand: true,
+						cwd: '<%= dirs.css %>/',
+						src: [ '*.css' ],
+						dest: '<%= dirs.css %>/',
+						ext: '.css',
+					},
+					{
+						expand: true,
+						cwd: '<%= dirs.css %>/photoswipe/',
+						src: [ '*.css', '!*.min.css' ],
+						dest: '<%= dirs.css %>/photoswipe/',
+						ext: '.min.css',
+					},
+					{
+						expand: true,
+						cwd: '<%= dirs.css %>/photoswipe/default-skin/',
+						src: [ '*.css', '!*.min.css' ],
+						dest: '<%= dirs.css %>/photoswipe/default-skin/',
+						ext: '.min.css',
+					},
+				],
+			},
+		},
+
+		// Concatenate select2.css onto the admin.css files.
+		concat: {
+			admin: {
+				files: {
+					'<%= dirs.css %>/admin.css': [
+						'<%= dirs.css %>/select2.css',
+						'<%= dirs.css %>/admin.css',
+					],
+					'<%= dirs.css %>/admin-rtl.css': [
+						'<%= dirs.css %>/select2.css',
+						'<%= dirs.css %>/admin-rtl.css',
+					],
+				},
+			},
+		},
+
+		// Watch changes for assets.
+		watch: {
+			css: {
+				files: [ '<%= dirs.css %>/*.scss' ],
+				tasks: [
+					'sass',
+					'rtlcss',
+					'postcss',
+					'cssmin',
+					'concat',
+					'move:css',
+					'copy:css',
+				],
+			},
+			js: {
+				files: [
+					'GruntFile.js',
+					'<%= dirs.js %>/**/*.js',
+					'!<%= dirs.js %>/**/*.min.js',
+				],
+				tasks: [ 'eslint', 'copy:js', 'newer:uglify' ],
+			},
+		},
+
+		// PHP Code Sniffer.
+		phpcs: {
+			options: {
+				bin: 'vendor/bin/phpcs',
+			},
+			dist: {
+				src: [
+					'**/*.php', // Include all php files.
+					'!includes/api/legacy/**',
+					'!includes/libraries/**',
+					'!node_modules/**',
+					'!tests/cli/**',
+					'!tmp/**',
+					'!vendor/**',
+				],
+			},
+		},
+
+		// Autoprefixer.
+		postcss: {
+			options: {
+				processors: [ require( 'autoprefixer' ) ],
+			},
+			dist: {
+				src: [ '<%= dirs.css %>/*.css' ],
+			},
+		},
+
+		// Specifying different src/dest for postcss broke everything,
+		// so we'll just move files to their new location afterwards.
+		move: {
+			css: {
+				files: [
+					{
+						src: '<%= dirs.css %>/*.css',
+						dest: '<%= dirs.cssDest %>/',
+					},
+					{
+						src: '<%= dirs.css %>/photoswipe/*.min.css',
+						dest: '<%= dirs.cssDest %>/photoswipe/',
+					},
+					{
+						src:
+							'<%= dirs.css %>/photoswipe/default-skin/*.min.css',
+						dest: '<%= dirs.cssDest %>/photoswipe/default-skin/',
+					},
+				],
+			},
+		},
+		copy: {
+			css: {
+				files: [
+					{
+						cwd: '<%= dirs.css %>',
+						expand: true,
+						src: 'photoswipe/**',
+						dest: '<%= dirs.cssDest %>/',
+					},
+					{
+						cwd: '<%= dirs.css %>',
+						expand: true,
+						src: 'jquery-ui/**',
+						dest: '<%= dirs.cssDest %>/',
+					},
+				],
+			},
+			js: {
+				cwd: '<%= dirs.js %>/',
+				expand: true,
+				src: '**',
+				dest: '<%= dirs.jsDest %>/',
+			},
+		},
+	} );
+
+	// Load NPM tasks to be used here.
+	grunt.loadNpmTasks( 'grunt-sass' );
+	grunt.loadNpmTasks( 'grunt-phpcs' );
+	grunt.loadNpmTasks( 'grunt-rtlcss' );
+	grunt.loadNpmTasks( 'grunt-postcss' );
+	grunt.loadNpmTasks( 'grunt-stylelint' );
+	grunt.loadNpmTasks( 'gruntify-eslint' );
+	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
+	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
+	grunt.loadNpmTasks( 'grunt-contrib-concat' );
+	grunt.loadNpmTasks( 'grunt-contrib-copy' );
+	grunt.loadNpmTasks( 'grunt-contrib-watch' );
+	grunt.loadNpmTasks( 'grunt-contrib-clean' );
+	grunt.loadNpmTasks( 'grunt-newer' );
+	grunt.loadNpmTasks( 'grunt-move' );
+
+	// Register tasks.
+	grunt.registerTask( 'default', [ 'js', 'css' ] );
+
+	grunt.registerTask( 'js', [ 'eslint', 'copy:js', 'uglify:js_assets' ] );
+
+	grunt.registerTask( 'css', [
+		'sass',
+		'rtlcss',
+		'postcss',
+		'cssmin',
+		'concat',
+		'move:css',
+		'copy:css',
+	] );
+
+	grunt.registerTask( 'assets', [ 'js', 'css' ] );
+
+	grunt.registerTask( 'e2e-build', [ 'uglify:js_assets', 'css' ] );
+
+	// Only an alias to 'default' task.
+	grunt.registerTask( 'dev', [ 'default' ] );
+};