Add JS and CSS linting via wp-scripts. #86 (#156)

* Adds wp-scripts dependency for JS, CSS, and package.json linting.
studiopress · Jul 8, 2019 · 517fc47 · 517fc47
1 parent 652cbb6
commit 517fc47
Show file tree

Hide file tree

Showing 110 changed files with 21,516 additions and 7,818 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -80,7 +80,7 @@ jobs:
           clone-wordpress-develop: false
       - run:
           working_directory: wordpress-develop/src/wp-content/plugins/atomic-blocks/
-          command: composer phpcs
+          command: composer phpcs && npm run lint:js
 
 commands:
   prepare-environment:
@@ -90,7 +90,7 @@ commands:
         type: boolean
         default: true
     steps:
-      - run: apk add --no-cache git
+      - run: apk add --no-cache git nodejs npm
       - run:
           command: |
             php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
@@ -109,7 +109,7 @@ commands:
           path: wordpress-develop/src/wp-content/plugins/atomic-blocks
       - run:
           working_directory: wordpress-develop/src/wp-content/plugins/atomic-blocks/
-          command: composer install --prefer-dist --no-suggest --optimize-autoloader
+          command: composer install --prefer-dist --no-suggest --optimize-autoloader && npm install
 
 workflows:
   version: 2

diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+**/*.min.js
+**/*.build.js
+config/
+node_modules/
+scripts/
+vendor/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+	"extends": "wordpress",
+	"env": {
+		"es6": true
+	},
+	"parser": "babel-eslint",
+	"parserOptions": {
+		"sourceType": "module",
+		"ecmaVersion": 6,
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"rules": {
+		"camelcase": 0
+	}
+}
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,3 @@
+**/*.build.css
+node_modules/
+vendor/
diff --git a/config/paths.js b/config/paths.js
@@ -17,5 +17,5 @@ module.exports = {
 	pluginSrc: resolvePlugin( 'src' ), // Plugin src folder path.
 	pluginBlocksJs: resolvePlugin( 'src/blocks.js' ),
 	yarnLockFile: resolvePlugin( 'yarn.lock' ),
-	pluginDist: resolvePlugin( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/.
+	pluginDist: resolvePlugin( '.' ) // We are in ./dist folder already so the path '.' resolves to ./dist/.
 };
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -25,62 +25,68 @@ const autoprefixer = require( 'autoprefixer' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 
 // Extract style.css for both editor and frontend styles.
-const blocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './dist/blocks.style.build.css',
-} );
+const blocksCSSPlugin = new ExtractTextPlugin({
+	filename: './dist/blocks.style.build.css'
+});
 
 // Extract editor.css for editor styles.
-const editBlocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './dist/blocks.editor.build.css',
-} );
+const editBlocksCSSPlugin = new ExtractTextPlugin({
+	filename: './dist/blocks.editor.build.css'
+});
 
 // Configuration for the ExtractTextPlugin — DRY rule.
 const extractConfig = {
 	use: [
+
 		// "postcss" loader applies autoprefixer to our CSS.
 		{ loader: 'raw-loader' },
 		{
 			loader: 'postcss-loader',
 			options: {
 				ident: 'postcss',
 				plugins: [
-					autoprefixer( {
+					autoprefixer({
 						browsers: [
 							'>1%',
 							'last 4 versions',
 							'Firefox ESR',
-							'not ie < 9', // React doesn't support IE8 anyway
+							'not ie < 9' // React doesn't support IE8 anyway
 						],
 						flexbox: 'no-2009',
-						grid: true,
-					} ),
-				],
-			},
+						grid: true
+					})
+				]
+			}
 		},
+
 		// "sass" loader converst SCSS to CSS.
 		{
 			loader: 'sass-loader',
 			options: {
+
 				// Add common CSS file for variables and mixins.
 				data: '@import "./src/common.scss";\n',
-				outputStyle: 'nested',
-			},
-		},
-	],
+				outputStyle: 'nested'
+			}
+		}
+	]
 };
 
 // Export configuration.
 module.exports = {
 	entry: {
-		'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
+		'./dist/blocks.build': paths.pluginBlocksJs // 'name' : 'path/file.ext'.
 	},
 	output: {
+
 		// Add /* filename */ comments to generated require()s in the output.
 		pathinfo: true,
+
 		// The dist folder.
 		path: paths.pluginDist,
-		filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
+		filename: '[name].js' // [name] = './dist/blocks.build' as defined above.
 	},
+
 	// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 	devtool: 'cheap-eval-source-map',
 	module: {
@@ -91,28 +97,30 @@ module.exports = {
 				use: {
 					loader: 'babel-loader',
 					options: {
-						
+
 						// This is a feature of `babel-loader` for webpack (not Babel itself).
 						// It enables caching results in ./node_modules/.cache/babel-loader/
 						// directory for faster rebuilds.
-						cacheDirectory: true,
-					},
-				},
+						cacheDirectory: true
+					}
+				}
 			},
 			{
 				test: /style\.s?css$/,
 				exclude: /(node_modules|bower_components)/,
-				use: blocksCSSPlugin.extract( extractConfig ),
+				use: blocksCSSPlugin.extract( extractConfig )
 			},
 			{
 				test: /editor\.s?css$/,
 				exclude: /(node_modules|bower_components)/,
-				use: editBlocksCSSPlugin.extract( extractConfig ),
-			},
-		],
+				use: editBlocksCSSPlugin.extract( extractConfig )
+			}
+		]
 	},
+
 	// Add plugins.
 	plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ],
-	stats: 'minimal',
+	stats: 'minimal'
+
 	// stats: 'errors-only',
 };
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -26,65 +26,71 @@ const autoprefixer = require( 'autoprefixer' );
 const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP === 'true';
+const shouldUseSourceMap = 'true' === process.env.GENERATE_SOURCEMAP;
 
 // Extract style.css for both editor and frontend styles.
-const blocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './dist/blocks.style.build.css',
-} );
+const blocksCSSPlugin = new ExtractTextPlugin({
+	filename: './dist/blocks.style.build.css'
+});
 
 // Extract editor.css for editor styles.
-const editBlocksCSSPlugin = new ExtractTextPlugin( {
-	filename: './dist/blocks.editor.build.css',
-} );
+const editBlocksCSSPlugin = new ExtractTextPlugin({
+	filename: './dist/blocks.editor.build.css'
+});
 
 // Configuration for the ExtractTextPlugin — DRY rule.
 const extractConfig = {
 	use: [
+
 		// "postcss" loader applies autoprefixer to our CSS.
 		{ loader: 'raw-loader' },
 		{
 			loader: 'postcss-loader',
 			options: {
 				ident: 'postcss',
 				plugins: [
-					autoprefixer( {
+					autoprefixer({
 						browsers: [
 							'>1%',
 							'last 4 versions',
 							'Firefox ESR',
-							'not ie < 9', // React doesn't support IE8 anyway
+							'not ie < 9' // React doesn't support IE8 anyway
 						],
 						flexbox: 'no-2009',
-						grid: true,
-					} ),
-				],
-			},
+						grid: true
+					})
+				]
+			}
 		},
+
 		// "sass" loader converst SCSS to CSS.
 		{
 			loader: 'sass-loader',
 			options: {
+
 				// Add common CSS file for variables and mixins.
 				data: '@import "./src/common.scss";\n',
-				outputStyle: 'compressed',
-			},
-		},
-	],
+				outputStyle: 'compressed'
+			}
+		}
+	]
 };
 
 // Export configuration.
 module.exports = {
 	entry: {
-		'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
+		'./dist/blocks.build': paths.pluginBlocksJs // 'name' : 'path/file.ext'.
 	},
 	output: {
+
 		// Add /* filename */ comments to generated require()s in the output.
 		pathinfo: true,
+
 		// The dist folder.
 		path: paths.pluginDist,
-		filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
+		filename: '[name].js' // [name] = './dist/blocks.build' as defined above.
 	},
+
 	// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 	devtool: shouldUseSourceMap ? 'source-map' : false,
 	module: {
@@ -95,52 +101,57 @@ module.exports = {
 				use: {
 					loader: 'babel-loader',
 					options: {
-						
+
 						// This is a feature of `babel-loader` for webpack (not Babel itself).
 						// It enables caching results in ./node_modules/.cache/babel-loader/
 						// directory for faster rebuilds.
-						cacheDirectory: true,
-					},
-				},
+						cacheDirectory: true
+					}
+				}
 			},
 			{
 				test: /style\.s?css$/,
 				exclude: /(node_modules|bower_components)/,
-				use: blocksCSSPlugin.extract( extractConfig ),
+				use: blocksCSSPlugin.extract( extractConfig )
 			},
 			{
 				test: /editor\.s?css$/,
 				exclude: /(node_modules|bower_components)/,
-				use: editBlocksCSSPlugin.extract( extractConfig ),
-			},
-		],
+				use: editBlocksCSSPlugin.extract( extractConfig )
+			}
+		]
 	},
+
 	// Add plugins.
 	plugins: [
 		blocksCSSPlugin,
 		editBlocksCSSPlugin,
+
 		// Minify the code.
-		new webpack.optimize.UglifyJsPlugin( {
+		new webpack.optimize.UglifyJsPlugin({
 			compress: {
 				warnings: false,
+
 				// Disabled because of an issue with Uglify breaking seemingly valid code:
 				// https://github.com/facebookincubator/create-react-app/issues/2376
 				// Pending further investigation:
 				// https://github.com/mishoo/UglifyJS2/issues/2011
-				comparisons: false,
+				comparisons: false
 			},
 			mangle: {
-				safari10: true,
+				safari10: true
 			},
 			output: {
 				comments: false,
+
 				// Turned on because emoji and regex is not minified properly using default
 				// https://github.com/facebookincubator/create-react-app/issues/2488
-				ascii_only: true,
+				ascii_only: true
 			},
-			sourceMap: shouldUseSourceMap,
-		} ),
+			sourceMap: shouldUseSourceMap
+		})
 	],
-	stats: 'minimal',
+	stats: 'minimal'
+
 	// stats: 'errors-only',
 };
diff --git a/dist/assets/js/dismiss.js b/dist/assets/js/dismiss.js
@@ -4,24 +4,24 @@
 
 document.addEventListener( 'DOMContentLoaded', function() {
 
-	var notices = document.querySelectorAll('.ab-block-notice.ab-dismissable[data-id]' );
+	var notices = document.querySelectorAll( '.ab-block-notice.ab-dismissable[data-id]' );
 
 	notices.forEach( function( element ) {
 
 		var uid = element.getAttribute( 'data-id' );
 
-		if ( ! localStorage.getItem('notice-' + uid ) ) {
+		var dismissible = element.querySelector( '.ab-notice-dismiss' );
+
+		if ( ! localStorage.getItem( 'notice-' + uid ) ) {
 			element.style.display = 'block';
 		}
 
-		var dismissible = element.querySelector( '.ab-notice-dismiss' );
-
 		if ( dismissible ) {
 			dismissible.addEventListener( 'click', function( event ) {
 				event.preventDefault();
 				localStorage.setItem( 'notice-' + uid, '1' );
 				element.style.display = '';
-			} );
+			});
 		}
-	} );
-} );
+	});
+});