Skip to content

Commit 211d4a6

Browse files
authored
Update styled_components_files.js to include all files that import styled-components (#205011)
1 parent ca5a08d commit 211d4a6

File tree

32 files changed

+904
-34
lines changed

32 files changed

+904
-34
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
.buildkite/scripts/steps/checks/renovate.sh
1919
.buildkite/scripts/steps/checks/native_modules.sh
2020
.buildkite/scripts/steps/checks/test_files_missing_owner.sh
21+
.buildkite/scripts/steps/checks/styled_components_mapping.sh
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#!/usr/bin/env bash
2+
3+
set -euo pipefail
4+
5+
source .buildkite/scripts/common/util.sh
6+
7+
echo --- Check styled-components mapping
8+
cmd="node scripts/styled_components_mapping"
9+
10+
eval "$cmd"
11+
check_for_changed_files "$cmd" true

.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ packages/kbn-sort-package-json @elastic/kibana-operations
255255
packages/kbn-sort-predicates @elastic/kibana-visualizations
256256
packages/kbn-stdio-dev-helpers @elastic/kibana-operations
257257
packages/kbn-storybook @elastic/kibana-operations
258+
packages/kbn-styled-components-mapping-cli @elastic/kibana-operations @elastic/eui-team
258259
packages/kbn-telemetry-tools @elastic/kibana-core
259260
packages/kbn-test @elastic/kibana-operations @elastic/appex-qa
260261
packages/kbn-test-eui-helpers @elastic/kibana-visualizations

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1508,6 +1508,7 @@
15081508
"@kbn/sort-package-json": "link:packages/kbn-sort-package-json",
15091509
"@kbn/stdio-dev-helpers": "link:packages/kbn-stdio-dev-helpers",
15101510
"@kbn/storybook": "link:packages/kbn-storybook",
1511+
"@kbn/styled-components-mapping-cli": "link:packages/kbn-styled-components-mapping-cli",
15111512
"@kbn/synthetics-e2e": "link:x-pack/solutions/observability/plugins/synthetics/e2e",
15121513
"@kbn/telemetry-tools": "link:packages/kbn-telemetry-tools",
15131514
"@kbn/test": "link:packages/kbn-test",

packages/kbn-babel-preset/styled_components_files.js

Lines changed: 608 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# @kbn/styled-components-mapping-cli
2+
3+
A helper tool that looks up components using `styled-components` and generates
4+
a mapping file for Babel to help with proper stylesheet loading.
5+
6+
## Usage
7+
8+
```shell
9+
node scripts/styled_components_mapping
10+
```
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the "Elastic License
4+
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
5+
* Public License v 1"; you may not use this file except in compliance with, at
6+
* your election, the "Elastic License 2.0", the "GNU Affero General Public
7+
* License v3.0 only", or the "Server Side Public License, v 1".
8+
*/
9+
10+
module.exports = {
11+
preset: '@kbn/test/jest_node',
12+
rootDir: '../..',
13+
roots: ['<rootDir>/packages/kbn-styled-components-mapping-cli'],
14+
};
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"type": "shared-common",
3+
"id": "@kbn/styled-components-mapping-cli",
4+
"owner": ["@elastic/kibana-operations", "@elastic/eui-team"],
5+
"devOnly": true
6+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "@kbn/styled-components-mapping-cli",
3+
"private": true,
4+
"version": "1.0.0",
5+
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
6+
"main": "./src/run_styled_components_mapping_cli.ts"
7+
}
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the "Elastic License
4+
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
5+
* Public License v 1"; you may not use this file except in compliance with, at
6+
* your election, the "Elastic License 2.0", the "GNU Affero General Public
7+
* License v3.0 only", or the "Server Side Public License, v 1".
8+
*/
9+
10+
import * as fs from 'node:fs/promises';
11+
import * as path from 'node:path';
12+
13+
const SOURCE_DIRS = ['x-pack', 'src', 'packages'];
14+
const SOURCE_FILE_REGEX = /(^.?|\.[^d]|[^.]d|[^.][^d])\.tsx?$/;
15+
const STYLED_COMPONENTS_IMPORT_REGEX =
16+
/import\s+(?:{[^{}]+}|.*?)\s*(?:from)?\s*['"](styled-components)['"]/;
17+
const EMOTION_STYLED_IMPORT_REGEX =
18+
/import\s+(?:{[^{}]+}|.*?)\s*(?:from)?\s*['"](@emotion\/styled)['"]/;
19+
20+
export interface Meta {
21+
path: string;
22+
usesStyledComponents: boolean;
23+
usesOnlyStyledComponents?: boolean;
24+
files?: Meta[];
25+
}
26+
27+
const walkDirectory = async (dirPath: string): Promise<Meta> => {
28+
const files: Meta[] = [];
29+
let usesStyledComponents = false;
30+
let usesOnlyStyledComponents = true;
31+
32+
for (const file of await fs.readdir(dirPath, { withFileTypes: true })) {
33+
const fullPath = path.join(file.path, file.name);
34+
35+
if (file.isDirectory()) {
36+
const meta = await walkDirectory(fullPath);
37+
if (meta.usesStyledComponents) {
38+
usesStyledComponents = true;
39+
}
40+
if (usesOnlyStyledComponents && !meta.usesOnlyStyledComponents) {
41+
usesOnlyStyledComponents = false;
42+
}
43+
files.push(meta);
44+
continue;
45+
}
46+
47+
if (!SOURCE_FILE_REGEX.test(file.name) || !file.isFile()) {
48+
continue;
49+
}
50+
51+
const meta: Meta = {
52+
path: fullPath,
53+
usesStyledComponents: false,
54+
};
55+
56+
const contents = await fs.readFile(fullPath, 'utf8');
57+
const usesEmotionStyled = EMOTION_STYLED_IMPORT_REGEX.test(contents);
58+
meta.usesStyledComponents = STYLED_COMPONENTS_IMPORT_REGEX.test(contents);
59+
60+
if (usesEmotionStyled) {
61+
usesOnlyStyledComponents = false;
62+
}
63+
64+
if (usesEmotionStyled || meta.usesStyledComponents) {
65+
files.push(meta);
66+
}
67+
}
68+
69+
return {
70+
path: dirPath,
71+
files,
72+
usesStyledComponents,
73+
usesOnlyStyledComponents: usesStyledComponents && usesOnlyStyledComponents,
74+
};
75+
};
76+
77+
export const findFiles = async (rootDirPath: string) => {
78+
return Promise.all(SOURCE_DIRS.map((dir) => walkDirectory(path.join(rootDirPath, dir))));
79+
};

0 commit comments

Comments
 (0)