Format files using prettier rules (Automattic#798)

This also adds prettier ignores to eslint and stylelint so the linters
won't go bonkers during CI. This includes adding the necessary npm
packages to the package.json and package-lock.json.

This commit is strictly to prepare for merging the try/wp-prettier
branch (see Automattic#631 ).

Author: Kristófer Reykjalín

.eslintrc

@@ -3,7 +3,7 @@
 {
 	"root": true,
 	"parser": "babel-eslint",
-	"extends": [ "wpcalypso/react", "plugin:jsx-a11y/recommended" ],
+	"extends": [ "wpcalypso/react", "plugin:jsx-a11y/recommended", "prettier" ],
 	"plugins": [ "jsx-a11y", "jest" ],
 	"env": {
 		"browser": true,
@@ -36,9 +36,15 @@
 		"wpcalypso/import-no-redux-combine-reducers": "off",
 		"wpcalypso/jsx-classname-namespace": "off",
 		"wpcalypso/redux-no-bound-selectors": "warn",
-		"react/jsx-curly-spacing": [ 2, { "when": "always", "children": { "when": "always" } } ],
-		"jsx-a11y/label-has-for": [ "error", {
-			"required": "id"
-		} ]
+		"react/jsx-curly-spacing": [
+			2,
+			{ "when": "always", "children": { "when": "always" } }
+		],
+		"jsx-a11y/label-has-for": [
+			"error",
+			{
+				"required": "id"
+			}
+		]
 	}
 }

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-	"extends": "stylelint-config-wordpress",
+	"extends": [ "stylelint-config-wordpress", "stylelint-config-prettier" ],
 	"rules": {
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,
@@ -12,10 +12,12 @@
 		"font-weight-notation": null,
 		"function-url-quotes": "always",
 		"max-line-length": null,
+		"media-feature-parentheses-space-inside": "always",
 		"no-descending-specificity": null,
 		"no-duplicate-selectors": null,
 		"rule-empty-line-before": null,
 		"selector-class-pattern": null,
+		"selector-pseudo-class-parentheses-space-inside": "always",
 		"string-quotes": "single",
 		"value-keyword-case": null,
 		"value-list-comma-newline-after": null

assets/css/admin.css

@@ -1,23 +1,30 @@
 /* TODO: When merging into WooCommerce Core, integrate these icons into the WooCommerce.ttf icon font */
 @font-face {
 	font-family: 'WCPay';
-	src: url('../fonts/WCPay.eot');
-	src: url('../fonts/WCPay.eot?#iefix') format('embedded-opentype'),
-		url('../fonts/WCPay.woff') format('woff'),
-		url('../fonts/WCPay.ttf') format('truetype'),
-		url('../fonts/WCPay.svg#WCPay') format('svg');
+	src: url( '../fonts/WCPay.eot' );
+	src: url( '../fonts/WCPay.eot?#iefix' ) format( 'embedded-opentype' ),
+		url( '../fonts/WCPay.woff' ) format( 'woff' ),
+		url( '../fonts/WCPay.ttf' ) format( 'truetype' ),
+		url( '../fonts/WCPay.svg#WCPay' ) format( 'svg' );
 	font-weight: normal;
 	font-style: normal;
 }
-
-#adminmenu #toplevel_page_wc-admin-path--payments-deposits .menu-icon-generic div.wp-menu-image::before,
-#adminmenu #toplevel_page_wc-admin-path--payments-connect .menu-icon-generic div.wp-menu-image::before {
+/* stylelint-disable selector-id-pattern */
+#adminmenu
+	#toplevel_page_wc-admin-path--payments-deposits
+	.menu-icon-generic
+	div.wp-menu-image::before,
+#adminmenu
+	#toplevel_page_wc-admin-path--payments-connect
+	.menu-icon-generic
+	div.wp-menu-image::before {
 	font-family: 'WCPay' !important;
 	content: '\e900';
 	width: 24px;
 	font-size: 24px;
 	margin-top: -2px;
 }
+/* stylelint-enable selector-id-pattern */
 
 .payment-method__brand {
 	display: inline-block;
@@ -28,33 +35,33 @@
 }
 
 .payment-method__brand--amex {
-	background: no-repeat url('../images/cards/amex.svg');
+	background: no-repeat url( '../images/cards/amex.svg' );
 }
 
 .payment-method__brand--diners {
-	background: no-repeat url('../images/cards/diners.svg');
+	background: no-repeat url( '../images/cards/diners.svg' );
 }
 
 .payment-method__brand--discover {
-	background: no-repeat url('../images/cards/discover.svg');
+	background: no-repeat url( '../images/cards/discover.svg' );
 }
 
 .payment-method__brand--jcb {
-	background: no-repeat url('../images/cards/jcb.svg');
+	background: no-repeat url( '../images/cards/jcb.svg' );
 }
 
 .payment-method__brand--mastercard {
-	background: no-repeat url('../images/cards/mastercard.svg');
+	background: no-repeat url( '../images/cards/mastercard.svg' );
 }
 
 .payment-method__brand--unionpay {
-	background: no-repeat url('../images/cards/unionpay.svg');
+	background: no-repeat url( '../images/cards/unionpay.svg' );
 }
 
 .payment-method__brand--visa {
-	background: no-repeat url('../images/cards/visa.svg');
+	background: no-repeat url( '../images/cards/visa.svg' );
 }
 
 .payment-method__brand--unknown {
-	background: no-repeat url('../images/cards/unknown.svg');
+	background: no-repeat url( '../images/cards/unknown.svg' );
 }

assets/css/wcpay-checkout.css

@@ -1,4 +1,8 @@
-#payment .payment_methods li .payment_box.payment_method_woocommerce_payments fieldset {
+#payment
+	.payment_methods
+	li
+	.payment_box.payment_method_woocommerce_payments
+	fieldset {
 	padding: 0;
 }