[8.x] Update styled_components_files.js to include all files that i…

…mport `styled-components` (#206084)

## Summary

This is a manual backport of
#205011 with regenerated
`styled_components_files.js` to match `8.x` code.

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

.buildkite/scripts/steps/checks/quick_checks.txt

@@ -17,3 +17,4 @@
 .buildkite/scripts/steps/checks/prettier_topology.sh
 .buildkite/scripts/steps/checks/renovate.sh
 .buildkite/scripts/steps/checks/native_modules.sh
+.buildkite/scripts/steps/checks/styled_components_mapping.sh

.buildkite/scripts/steps/checks/styled_components_mapping.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+source .buildkite/scripts/common/util.sh
+
+echo --- Check styled-components mapping
+cmd="node scripts/styled_components_mapping"
+
+eval "$cmd"
+check_for_changed_files "$cmd" true

.github/CODEOWNERS

@@ -942,6 +942,7 @@ packages/kbn-storybook @elastic/kibana-operations
 x-pack/solutions/observability/plugins/streams_app @simianhacker @flash1293 @dgieselaar
 x-pack/solutions/observability/plugins/streams @simianhacker @flash1293 @dgieselaar
 x-pack/packages/kbn-streams-schema @elastic/streams-program-team
+packages/kbn-styled-components-mapping-cli @elastic/kibana-operations @elastic/eui-team
 x-pack/solutions/observability/plugins/synthetics/e2e @elastic/obs-ux-management-team
 x-pack/solutions/observability/plugins/synthetics @elastic/obs-ux-management-team
 x-pack/packages/kbn-synthetics-private-location @elastic/obs-ux-management-team

package.json

@@ -1504,6 +1504,7 @@
     "@kbn/spec-to-console": "link:packages/kbn-spec-to-console",
     "@kbn/stdio-dev-helpers": "link:packages/kbn-stdio-dev-helpers",
     "@kbn/storybook": "link:packages/kbn-storybook",
+    "@kbn/styled-components-mapping-cli": "link:packages/kbn-styled-components-mapping-cli",
     "@kbn/synthetics-e2e": "link:x-pack/solutions/observability/plugins/synthetics/e2e",
     "@kbn/synthetics-private-location": "link:x-pack/packages/kbn-synthetics-private-location",
     "@kbn/telemetry-tools": "link:packages/kbn-telemetry-tools",

packages/kbn-styled-components-mapping-cli/README.md

@@ -0,0 +1,10 @@
+# @kbn/styled-components-mapping-cli
+
+A helper tool that looks up components using `styled-components` and generates
+a mapping file for Babel to help with proper stylesheet loading.
+
+## Usage
+
+```shell
+node scripts/styled_components_mapping
+```

packages/kbn-styled-components-mapping-cli/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-styled-components-mapping-cli'],
+};

packages/kbn-styled-components-mapping-cli/kibana.jsonc

@@ -0,0 +1,6 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/styled-components-mapping-cli",
+  "owner": ["@elastic/kibana-operations", "@elastic/eui-team"],
+  "devOnly": true
+}

packages/kbn-styled-components-mapping-cli/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/styled-components-mapping-cli",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "main": "./src/run_styled_components_mapping_cli.ts"
+}

packages/kbn-styled-components-mapping-cli/src/find_files.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+
+const SOURCE_DIRS = ['x-pack', 'src', 'packages'];
+const SOURCE_FILE_REGEX = /(^.?|\.[^d]|[^.]d|[^.][^d])\.tsx?$/;
+const STYLED_COMPONENTS_IMPORT_REGEX =
+  /import\s+(?:{[^{}]+}|.*?)\s*(?:from)?\s*['"](styled-components)['"]/;
+const EMOTION_STYLED_IMPORT_REGEX =
+  /import\s+(?:{[^{}]+}|.*?)\s*(?:from)?\s*['"](@emotion\/styled)['"]/;
+
+export interface Meta {
+  path: string;
+  usesStyledComponents: boolean;
+  usesOnlyStyledComponents?: boolean;
+  files?: Meta[];
+}
+
+const walkDirectory = async (dirPath: string): Promise<Meta> => {
+  const files: Meta[] = [];
+  let usesStyledComponents = false;
+  let usesOnlyStyledComponents = true;
+
+  for (const file of await fs.readdir(dirPath, { withFileTypes: true })) {
+    const fullPath = path.join(file.path, file.name);
+
+    if (file.isDirectory()) {
+      const meta = await walkDirectory(fullPath);
+      if (meta.usesStyledComponents) {
+        usesStyledComponents = true;
+      }
+      if (usesOnlyStyledComponents && !meta.usesOnlyStyledComponents) {
+        usesOnlyStyledComponents = false;
+      }
+      files.push(meta);
+      continue;
+    }
+
+    if (!SOURCE_FILE_REGEX.test(file.name) || !file.isFile()) {
+      continue;
+    }
+
+    const meta: Meta = {
+      path: fullPath,
+      usesStyledComponents: false,
+    };
+
+    const contents = await fs.readFile(fullPath, 'utf8');
+    const usesEmotionStyled = EMOTION_STYLED_IMPORT_REGEX.test(contents);
+    meta.usesStyledComponents = STYLED_COMPONENTS_IMPORT_REGEX.test(contents);
+
+    if (usesEmotionStyled) {
+      usesOnlyStyledComponents = false;
+    }
+
+    if (usesEmotionStyled || meta.usesStyledComponents) {
+      files.push(meta);
+    }
+  }
+
+  return {
+    path: dirPath,
+    files,
+    usesStyledComponents,
+    usesOnlyStyledComponents: usesStyledComponents && usesOnlyStyledComponents,
+  };
+};
+
+export const findFiles = async (rootDirPath: string) => {
+  return Promise.all(SOURCE_DIRS.map((dir) => walkDirectory(path.join(rootDirPath, dir))));
+};

packages/kbn-styled-components-mapping-cli/src/generate_regex_array.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import * as path from 'node:path';
+import type { Meta } from './find_files';
+
+export const pathToRegexString = (modulePath: string): string => {
+  modulePath = modulePath.replace(/[\\\/]/g, '[\\/\\\\]');
+
+  return `/${modulePath}/`;
+};
+
+export const generateRegexStringArray = (files: Meta[], rootDirPath: string): string[] => {
+  const array: string[] = [];
+
+  for (const meta of files) {
+    if (meta.files) {
+      if (meta.usesOnlyStyledComponents) {
+        array.push(pathToRegexString(path.relative(rootDirPath, meta.path)));
+      } else {
+        array.push(...generateRegexStringArray(meta.files, rootDirPath));
+      }
+    } else if (meta.usesStyledComponents) {
+      array.push(pathToRegexString(path.relative(rootDirPath, meta.path)));
+    }
+  }
+
+  return array;
+};

packages/kbn-styled-components-mapping-cli/src/run_styled_components_mapping_cli.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import * as path from 'node:path';
+import { run } from '@kbn/dev-cli-runner';
+import { createFailError } from '@kbn/dev-cli-errors';
+import { REPO_ROOT } from '@kbn/repo-info';
+import { findFiles } from './find_files';
+import { generateRegexStringArray } from './generate_regex_array';
+import { updateFile } from './update_file';
+
+const mappingFilePath = 'packages/kbn-babel-preset/styled_components_files.js';
+const mappingFileAbsolutePath = path.join(REPO_ROOT, mappingFilePath);
+
+run(
+  async ({ log }) => {
+    log.info(`Looking for source files importing 'styled-components'...`);
+
+    const files = await findFiles(REPO_ROOT);
+    const regexStringArray = generateRegexStringArray(files, REPO_ROOT);
+
+    try {
+      await updateFile(mappingFileAbsolutePath, regexStringArray);
+    } catch (err) {
+      createFailError(err);
+    }
+
+    log.info(`Generated ${mappingFilePath} with ${regexStringArray.length} regex expressions`);
+  },
+  {
+    usage: `node scripts/styled_components_mapping`,
+    description: 'Update styled-components babel mapping when converting styles to Emotion',
+  }
+);

packages/kbn-styled-components-mapping-cli/src/update_file.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import * as fs from 'node:fs/promises';
+
+const babelFilePrefix = `/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  /**
+   * Synchronized list of all source files that use styled-components.
+   * Please keep this list up-to-date when converting component styles
+   * from styled-components to Emotion.
+   *
+   * Babel's MatchPattern can be a regex or a string which follows standard
+   * Node.js path logic as described here:
+   * https://babeljs.io/docs/options#matchpattern
+   *
+   * Used by \`kbn-babel-preset\` and \`kbn-eslint-config\`.
+   */
+  USES_STYLED_COMPONENTS: [
+    /packages[\\/\\\\]kbn-ui-shared-deps-npm[\\/\\\\]/,
+    /packages[\\/\\\\]kbn-ui-shared-deps-src[\\/\\\\]/,
+`;
+
+const babelFileSuffix = `  ],
+};
+`;
+
+export const updateFile = async (filePath: string, regexStringArray: string[]) => {
+  const contents = `${babelFilePrefix}\n    ${regexStringArray.join(
+    ',\n    '
+  )},\n${babelFileSuffix}`;
+
+  return fs.writeFile(filePath, contents);
+};

packages/kbn-styled-components-mapping-cli/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/dev-cli-runner",
+    "@kbn/dev-cli-errors",
+    "@kbn/repo-info",
+  ]
+}

scripts/styled_components_mapping.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+require('../src/setup_node_env');
+require('@kbn/styled-components-mapping-cli');

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_dotnet/elasticsearch_dotnet_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_go/elasticsearch_go_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_java/elasticsearch_java_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_js/elasticsearch_js_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_php/elasticsearch_php_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_py/elasticsearch_py_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/elasticsearch_ruby/elasticsearch_ruby_readme.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 
 import {

src/platform/plugins/shared/custom_integrations/public/components/fleet_integration/sample/sample_client_readme.tsx

@@ -9,7 +9,6 @@
 
 import React, { useState } from 'react';
 
-// eslint-disable-next-line @kbn/eslint/module_migration
 import styled from 'styled-components';
 import { createId } from '@paralleldrive/cuid2';
 

tsconfig.base.json

@@ -1878,6 +1878,8 @@
       "@kbn/streams-plugin/*": ["x-pack/solutions/observability/plugins/streams/*"],
       "@kbn/streams-schema": ["x-pack/packages/kbn-streams-schema"],
       "@kbn/streams-schema/*": ["x-pack/packages/kbn-streams-schema/*"],
+      "@kbn/styled-components-mapping-cli": ["packages/kbn-styled-components-mapping-cli"],
+      "@kbn/styled-components-mapping-cli/*": ["packages/kbn-styled-components-mapping-cli/*"],
       "@kbn/synthetics-e2e": ["x-pack/solutions/observability/plugins/synthetics/e2e"],
       "@kbn/synthetics-e2e/*": ["x-pack/solutions/observability/plugins/synthetics/e2e/*"],
       "@kbn/synthetics-plugin": ["x-pack/solutions/observability/plugins/synthetics"],

x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx

@@ -8,7 +8,7 @@
 import * as React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-// eslint-disable-next-line @kbn/eslint/module_migration
+
 import { ThemeProvider } from 'styled-components';
 import { mountWithIntl, nextTick } from '@kbn/test-jest-helpers';
 import ActionsConnectorsList from './actions_connectors_list';