From edd6f7f3495c4d5f974935003cf4ceda9ed7dd86 Mon Sep 17 00:00:00 2001 From: George Taveras Date: Tue, 16 Jan 2024 19:43:44 -0500 Subject: [PATCH 1/6] fix(core): loading of downstream CSS modules --- lib/sass/source-to-class-names.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/lib/sass/source-to-class-names.ts b/lib/sass/source-to-class-names.ts index 3fbf9e4..64dddf2 100644 --- a/lib/sass/source-to-class-names.ts +++ b/lib/sass/source-to-class-names.ts @@ -1,6 +1,26 @@ +import * as proxy from "identity-obj-proxy"; import postcss from "postcss"; import PostcssModulesPlugin from "postcss-modules"; +/** + * Use identity-obj-proxy for any imported CSS modules + * + * This should not affect the final types for a given file, since the types are + * generated only using the classes defined in the current file and not its imports. + * + * This has the added benefit of reducing system calls and disk access, + * so may perform faster in large projects. + * + * The only drawback is that this does not process the import tree + * the way in which it is intended to be used, so broken imports + * will not be surfaced by this tool. + */ +class IdentityObjProxyLoader { + async fetch() { + return proxy; + } +} + /** * Converts a CSS source string to a list of exports (class names, keyframes, etc.) */ @@ -11,6 +31,7 @@ export const sourceToClassNames = async ( let result: Record = {}; await postcss([ PostcssModulesPlugin({ + Loader: IdentityObjProxyLoader, getJSON: (_, json) => { result = json; }, From 8fde95418cfd4a4a0f9a8011d35d87db017c930e Mon Sep 17 00:00:00 2001 From: George Taveras Date: Tue, 16 Jan 2024 19:46:56 -0500 Subject: [PATCH 2/6] fix(package.json): add identity-obj-proxy as dependency --- package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 45 insertions(+) diff --git a/package-lock.json b/package-lock.json index e10d82e..ffe087d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "chokidar": "^3.5.3", "esbuild": "^0.14.21", "glob": "^7.2.0", + "identity-obj-proxy": "^3.0.0", "joycon": "^3.1.1", "postcss": "^8.4.27", "postcss-modules": "^6.0.0", @@ -33,6 +34,7 @@ "@commitlint/config-conventional": "^16.2.1", "@commitlint/prompt-cli": "^16.2.1", "@types/glob": "^7.2.0", + "@types/identity-obj-proxy": "^3.0.2", "@types/jest": "^29.5.3", "@types/node": "^17.0.18", "@types/node-sass": "^4.11.3", @@ -3174,6 +3176,12 @@ "@types/node": "*" } }, + "node_modules/@types/identity-obj-proxy": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/identity-obj-proxy/-/identity-obj-proxy-3.0.2.tgz", + "integrity": "sha512-0WfmImclMEjbt2oOC4BvvoypsR9Bgsp6OeqEjzSpNBYa1FEHbMGwxADaW/y5liIcnUyMotWtntl3WGWUbSebEw==", + "dev": true + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", "dev": true, @@ -6113,6 +6121,11 @@ "node": ">=6" } }, + "node_modules/harmony-reflect": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", + "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==" + }, "node_modules/has": { "version": "1.0.3", "dev": true, @@ -6262,6 +6275,17 @@ "postcss": "^8.1.0" } }, + "node_modules/identity-obj-proxy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", + "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==", + "dependencies": { + "harmony-reflect": "^1.4.6" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -16547,6 +16571,12 @@ "@types/node": "*" } }, + "@types/identity-obj-proxy": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/identity-obj-proxy/-/identity-obj-proxy-3.0.2.tgz", + "integrity": "sha512-0WfmImclMEjbt2oOC4BvvoypsR9Bgsp6OeqEjzSpNBYa1FEHbMGwxADaW/y5liIcnUyMotWtntl3WGWUbSebEw==", + "dev": true + }, "@types/istanbul-lib-coverage": { "version": "2.0.4", "dev": true @@ -18494,6 +18524,11 @@ "version": "2.1.0", "dev": true }, + "harmony-reflect": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", + "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==" + }, "has": { "version": "1.0.3", "dev": true, @@ -18589,6 +18624,14 @@ "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", "requires": {} }, + "identity-obj-proxy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", + "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==", + "requires": { + "harmony-reflect": "^1.4.6" + } + }, "ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", diff --git a/package.json b/package.json index 79df8ac..7596785 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@types/reserved-words": "^0.1.0", "@types/sass": "^1.16.0", "@types/yargs": "^17.0.8", + "@types/identity-obj-proxy": "^3.0.2", "@typescript-eslint/eslint-plugin": "^6.3.0", "@typescript-eslint/parser": "^6.3.0", "babel-jest": "^29.6.2", @@ -87,6 +88,7 @@ } }, "dependencies": { + "identity-obj-proxy": "^3.0.0", "bundle-require": "^3.0.4", "chalk": "4.1.2", "change-case": "^4.1.2", From 2accf06de38de0784dfb32f5c9504a0a30d266a7 Mon Sep 17 00:00:00 2001 From: George Taveras Date: Tue, 16 Jan 2024 19:48:53 -0500 Subject: [PATCH 3/6] docs: add more info in comment --- lib/sass/source-to-class-names.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/sass/source-to-class-names.ts b/lib/sass/source-to-class-names.ts index 64dddf2..b3d79d2 100644 --- a/lib/sass/source-to-class-names.ts +++ b/lib/sass/source-to-class-names.ts @@ -3,7 +3,9 @@ import postcss from "postcss"; import PostcssModulesPlugin from "postcss-modules"; /** - * Use identity-obj-proxy for any imported CSS modules + * Use identity-obj-proxy for any imported CSS modules. This is to ignore any + * css module imports via `composes: ` or `@value` statements as the rules to propoerly + * resolve these requests may be totally arbitrary and different accross projects. * * This should not affect the final types for a given file, since the types are * generated only using the classes defined in the current file and not its imports. From 58e803c3f67f6adf36e89a56cf4201114c29804a Mon Sep 17 00:00:00 2001 From: George Taveras Date: Tue, 16 Jan 2024 19:52:11 -0500 Subject: [PATCH 4/6] docs: add more info about identity-obj-proxy in comment --- lib/sass/source-to-class-names.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/lib/sass/source-to-class-names.ts b/lib/sass/source-to-class-names.ts index b3d79d2..1cbbf10 100644 --- a/lib/sass/source-to-class-names.ts +++ b/lib/sass/source-to-class-names.ts @@ -7,6 +7,24 @@ import PostcssModulesPlugin from "postcss-modules"; * css module imports via `composes: ` or `@value` statements as the rules to propoerly * resolve these requests may be totally arbitrary and different accross projects. * + * The identity-obj-proxy is a simple object that returns the requested key as the value. + * + * So files with the following request + * + * ```css + * .foo { + * composes: bar from "./baz.css"; + * } + * ``` + * + * will generate something like + * + * ```js + * { + * foo: "foo-HASH123 bar", // the `bar` class is not resolved, and stubbed by the proxy + * } + * ``` + * * This should not affect the final types for a given file, since the types are * generated only using the classes defined in the current file and not its imports. * From 743103d2c3c644ffaae2ca930e32d1cf87300679 Mon Sep 17 00:00:00 2001 From: George Taveras Date: Tue, 16 Jan 2024 19:53:36 -0500 Subject: [PATCH 5/6] docs: add more info in comment --- lib/sass/source-to-class-names.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/sass/source-to-class-names.ts b/lib/sass/source-to-class-names.ts index 1cbbf10..f5c2da6 100644 --- a/lib/sass/source-to-class-names.ts +++ b/lib/sass/source-to-class-names.ts @@ -29,7 +29,7 @@ import PostcssModulesPlugin from "postcss-modules"; * generated only using the classes defined in the current file and not its imports. * * This has the added benefit of reducing system calls and disk access, - * so may perform faster in large projects. + * so may perform faster in large projects in comparison to properly resolving these requests. * * The only drawback is that this does not process the import tree * the way in which it is intended to be used, so broken imports From e4d45ced2aa4491e40281d4880dc586855a65d65 Mon Sep 17 00:00:00 2001 From: George Taveras Date: Tue, 16 Jan 2024 20:01:43 -0500 Subject: [PATCH 6/6] docs: add more info in comment --- lib/sass/source-to-class-names.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/sass/source-to-class-names.ts b/lib/sass/source-to-class-names.ts index f5c2da6..9ce0067 100644 --- a/lib/sass/source-to-class-names.ts +++ b/lib/sass/source-to-class-names.ts @@ -5,7 +5,9 @@ import PostcssModulesPlugin from "postcss-modules"; /** * Use identity-obj-proxy for any imported CSS modules. This is to ignore any * css module imports via `composes: ` or `@value` statements as the rules to propoerly - * resolve these requests may be totally arbitrary and different accross projects. + * resolve these requests may be totally arbitrary and different accross projects. Additionally, + * this is a simple way to avoid needing to write a sass loader for this tool. (To handle import of + * css modules written in SASS). * * The identity-obj-proxy is a simple object that returns the requested key as the value. *