Adding Styled Components linter w/ default config as pre-commit hook and dev/script (#25441)

* Initial pass at adding styled comp linter and pre-commit hook
* Added project support to stylelint dev script, error/success logging on pre-commit hook, and fixed stylelint errors in secops project

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ]
+}

package.json

@@ -210,7 +210,6 @@
     "semver": "^5.5.0",
     "socket.io": "^2.1.1",
     "stream-stream": "^1.2.6",
-    "style-loader": "0.19.0",
     "tar": "2.2.0",
     "tinygradient": "0.3.0",
     "tinymath": "1.1.0",
@@ -380,6 +379,11 @@
     "simple-git": "1.37.0",
     "sinon": "^5.0.7",
     "strip-ansi": "^3.0.1",
+    "style-loader": "0.19.0",
+    "stylelint": "^9.7.1",
+    "stylelint-processor-styled-components": "^1.5.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-config-standard": "^18.2.0",
     "supertest": "^3.1.0",
     "supertest-as-promised": "^4.0.2",
     "tree-kill": "^1.1.0",

scripts/stylelint.js

@@ -0,0 +1,21 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+require('../src/setup_node_env');
+require('../src/dev/stylelint').runStylelintCli();

src/dev/run_precommit_hook.js

@@ -20,6 +20,7 @@
 import { run, combineErrors } from './run';
 import * as Eslint from './eslint';
 import * as Tslint from './tslint';
+import * as Stylelint from './stylelint';
 import { getFilesForCommit, checkFileCasing } from './precommit_hook';
 
 run(async ({ log }) => {
@@ -32,7 +33,7 @@ run(async ({ log }) => {
     errors.push(error);
   }
 
-  for (const Linter of [Eslint, Tslint]) {
+  for (const Linter of [Eslint, Tslint, Stylelint]) {
     const filesToLint = Linter.pickFilesToLint(log, files);
     if (filesToLint.length > 0) {
       try {

src/dev/stylelint/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { runStylelintCli } from './run_stylelint_cli';
+export { lintFiles } from './lint_files';
+export { pickFilesToLint } from './pick_files_to_lint';

src/dev/stylelint/lint_files.ts

@@ -0,0 +1,41 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ToolingLog } from '@kbn/dev-utils';
+import { File } from '../file';
+import { createFailError } from '../run';
+
+/**
+ * Lints a list of files with eslint. eslint reports are written to the log
+ * and a FailError is thrown when linting errors occur.
+ *
+ * @param  {ToolingLog} log
+ * @param  {Array<File>} files
+ * @return {undefined}
+ */
+export async function lintFiles(log: ToolingLog, files: File[]) {
+  const paths = files.map(file => file.getRelativePath());
+  await require('stylelint/lib/cli')(paths);
+
+  if (process.exitCode === 2) {
+    throw createFailError('[stylelint] failure', 1);
+  } else {
+    log.success('[stylelint] staged files linted successfully');
+  }
+}

src/dev/stylelint/pick_files_to_lint.ts

@@ -0,0 +1,26 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ToolingLog } from '@kbn/dev-utils';
+
+import { File } from '../file';
+
+export function pickFilesToLint(log: ToolingLog, files: File[]) {
+  return files.filter(file => file.isTypescript() && !file.isFixture());
+}

src/dev/stylelint/run_stylelint_cli.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function runStylelintCli() {
+  const args = process.argv.slice(2);
+  let opts = '**/*.tsx';
+
+  if (args.length > 0) {
+    opts = args.map(el => `x-pack/plugins/${el}/**/*.tsx`).join(' ');
+  }
+
+  require('stylelint/lib/cli')(opts);
+}

tasks/config/run.js

@@ -84,6 +84,15 @@ module.exports = function (grunt) {
       ]
     },
 
+    // used by dev/run_precommit_hook.js
+    //    runs the stylelint script to check for linting errors in Style Components
+    stylelint: {
+      cmd: process.execPath,
+      args: [
+        require.resolve('../../scripts/stylelint')
+      ]
+    },
+
     // used by the test and jenkins:unit tasks
     //    runs the tslint script to check for Typescript linting errors
     tslint: {

x-pack/plugins/secops/public/components/timeline/body/column_headers/index.tsx

@@ -29,6 +29,7 @@ const ColumnHeadersSpan = styled.span`
   display: flex;
 `;
 
+/* stylelint-disable block-no-empty */
 const ColumnHeaderContainer = styled.div``;
 
 const Flex = styled.div`

x-pack/plugins/secops/public/components/timeline/body/renderers/suricata_row_renderer.tsx

@@ -47,7 +47,7 @@ const SuricataRow = styled.div`
   padding-top: 10px;
   padding-bottom: 20px;
   animation: ${dropInEffect} 2s;
-  margin-left -1px;
+  margin-left: -1px;
   transition: 700ms background, 700ms border-color, 1s transform, 1s box-shadow;
   transition-delay: 0s;
   &:hover {