Scripts: Add lint-style script based on stylelint (#12722)

* Scripts: Add lint-css script based on stylelint

* Update packages/scripts/README.md

Co-Authored-By: gziolo <grzegorz@gziolo.pl>

* Update default config for lint-style script

* Scripts: Extend description for the package

package.json

@@ -107,7 +107,6 @@
 		"shallowequal": "1.1.0",
 		"sprintf-js": "1.1.1",
 		"source-map-loader": "0.2.3",
-		"stylelint": "9.5.0",
 		"stylelint-config-wordpress": "13.1.0",
 		"uuid": "3.3.2",
 		"webpack": "4.8.3",
@@ -164,11 +163,11 @@
 		"fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate",
 		"lint": "concurrently \"npm run lint-js\" \"npm run lint-pkg-json\" \"npm run lint-css\"",
 		"lint-js": "wp-scripts lint-js .",
-		"lint-js:fix": "wp-scripts lint-js . --fix",
+		"lint-js:fix": "npm run lint-js -- --fix",
 		"lint-php": "docker-compose run --rm composer run-script lint",
 		"lint-pkg-json": "wp-scripts lint-pkg-json ./packages",
-		"lint-css": "stylelint '**/*.scss'",
-		"lint-css:fix": "stylelint '**/*.scss' --fix",
+		"lint-css": "wp-scripts lint-style '**/*.scss'",
+		"lint-css:fix": "npm run lint-css -- --fix",
 		"package-plugin": "./bin/build-plugin-zip.sh",
 		"postinstall": "npm run check-licenses && npm run build:packages",
 		"pot-to-php": "./bin/pot-to-php.js",
@@ -193,7 +192,7 @@
 			"wp-scripts lint-pkg-json"
 		],
 		"*.scss": [
-			"stylelint"
+			"wp-scripts lint-style"
 		],
 		"*.js": [
 			"wp-scripts lint-js"

packages/scripts/CHANGELOG.md

@@ -3,8 +3,9 @@
 ### New Features
 
 - Added support for `check-engines` script ([#12721](https://github.com/WordPress/gutenberg/pull/12721))
-- Added support for `test-e2e` script ([#12437](https://github.com/WordPress/gutenberg/pull/12437)).
-- Update default config provided for `lint-js` script ([#12845](https://github.com/WordPress/gutenberg/pull/12845)).
+- Added support for `lint-style` script ([#12722](https://github.com/WordPress/gutenberg/pull/12722))
+- Added support for `test-e2e` script ([#12437](https://github.com/WordPress/gutenberg/pull/12437))
+- Update default config provided for `lint-js` script ([#12845](https://github.com/WordPress/gutenberg/pull/12845))
 
 ## 2.4.4 (2018-11-20)
 

packages/scripts/README.md

@@ -1,6 +1,10 @@
 # Scripts
 
-Collection of JS scripts for WordPress development.
+Collection of reusable scripts for WordPress development.
+
+Command-line interfaces help to turn working with an app into a pleasant experience, but it is still not enough to keep it easy to maintain in the long run. Developers are left on their own to keep all configurations and dependent tools up to date. This problem multiplies when they own more than one project which shares the same setup. Fortunately, there is a pattern that can simplify maintainers life – reusable scripts. This idea boils down to moving all the necessary configurations and scripts to one single tool dependency. In most cases, it should be possible to accomplish all tasks using the default settings, but some customization is allowed, too. With all that in place updating all projects should become a very straightforward task.
+
+_This package is inspired by [react-scripts](https://www.npmjs.com/package/react-scripts) and [kcd-scripts](https://www.npmjs.com/package/kcd-scripts)._
 
 ## Installation
 
@@ -21,6 +25,7 @@ _Example:_
 	"scripts": {
 		"check-engines": "wp-scripts check-engines",
 		"check-licenses": "wp-scripts check-licenses --production",
+		"lint:css": "wp-scripts lint-style '**/*.css'",
 		"lint:js": "wp-scripts lint-js .",
 		"lint:pkg-json": "wp-scripts lint-pkg-json .",
 		"test:e2e": "wp-scripts test-e2e",
@@ -84,7 +89,7 @@ _Example:_
 ```
 
 This is how you execute the script with presented setup:
-* `npm run lint:js` - lints JavaScripts files in the whole project's.
+* `npm run lint:js` - lints JavaScript files in the entire project's directories.
 
 ### `lint-pkg-json`
 
@@ -103,6 +108,23 @@ _Example:_
 This is how you execute those scripts using the presented setup:
 * `npm run lint:pkg-json` - lints `package.json` file in the project's root folder.
 
+### `lint-style`
+
+Helps enforce coding style guidelines for your style files. It uses [stylelint](https://github.com/stylelint/stylelint) with the [stylelint-config-wordpress](https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress) configuration per the [WordPress CSS Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/). You can override them with your own rules as described in [stylelint user guide](https://github.com/stylelint/stylelint/docs/user-guide.md).
+
+_Example:_
+
+```json
+{
+	"scripts": {
+		"lint:css": "wp-scripts lint-style '**/*.css'"
+	}
+}
+```
+
+This is how you execute the script with presented setup:
+* `npm run lint:css` - lints CSS files in the whole project's directory.
+
 ### `test-e2e`
 
 Launches the End-To-End (E2E) test runner. It uses [Jest](https://facebook.github.io/jest/) behind the scenes and you are able to utilize all of its [CLI options](https://facebook.github.io/jest/docs/en/cli.html). You can also run `./node_modules/.bin/wp-scripts test:e2e --help` or `npm run test:e2e:help` (as presented below) to view all of the available options.
@@ -154,8 +176,4 @@ This is how you execute those scripts using the presented setup:
 * `npm run test:unit:help` - prints all available options to configure unit tests runner.
 * `npm run test:unit:watch` - runs all unit tests in the watch mode.
 
-## Inspiration
-
-This package is inspired by [react-scripts](https://www.npmjs.com/package/react-scripts) and [kcd-scripts](https://www.npmjs.com/package/kcd-scripts).
-
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/scripts/config/.stylelintrc.json

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

packages/scripts/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@wordpress/scripts",
 	"version": "2.4.4",
-	"description": "Collection of JS scripts for WordPress development.",
+	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
@@ -44,7 +44,9 @@
 		"npm-package-json-lint": "^3.3.1",
 		"puppeteer": "1.6.1",
 		"read-pkg-up": "^1.0.1",
-		"resolve-bin": "^0.4.0"
+		"resolve-bin": "^0.4.0",
+		"stylelint": "^9.5.0",
+		"stylelint-config-wordpress": "^13.1.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/scripts/scripts/lint-style.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+const { sync: spawn } = require( 'cross-spawn' );
+const { sync: resolveBin } = require( 'resolve-bin' );
+
+/**
+ * Internal dependencies
+ */
+const {
+	fromConfigRoot,
+	getCliArgs,
+	hasCliArg,
+	hasProjectFile,
+	hasPackageProp,
+} = require( '../utils' );
+
+const args = getCliArgs();
+
+const hasStylelintConfig = hasCliArg( '--config' ) ||
+	hasProjectFile( '.stylelintrc' ) ||
+	hasProjectFile( '.stylelintrc.js' ) ||
+	hasProjectFile( '.stylelintrc.json' ) ||
+	hasProjectFile( '.stylelintrc.yaml' ) ||
+	hasProjectFile( '.stylelintrc.yml' ) ||
+	hasProjectFile( '.stylelint.config.js' ) ||
+	hasPackageProp( 'stylelint' );
+
+const config = ! hasStylelintConfig ?
+	[ '--config', fromConfigRoot( '.stylelintrc.json' ) ] :
+	[];
+
+const result = spawn(
+	resolveBin( 'stylelint' ),
+	[ ...config, ...args ],
+	{ stdio: 'inherit' }
+);
+
+process.exit( result.status );