feature: add theme colors for diff and patch files (#21)

* feature: add dark theme colors for diffs

* chore: add example diff to test

* feature: add light theme colors for diffs

* fix: convert `background` from hsl to hex colors when defined in `settings`

* fix: add missing `background` settings to diff lines

This is not (yet) supported by vscode, but once it does, it has the same colors as our docs.

See: microsoft/vscode#3429

example-languages/example.patch

@@ -0,0 +1,72 @@
+diff --git a/build/autolinking/findModules.js b/build/autolinking/findModules.js
+index 8468bb879a9200b125c87e1c49f4f5cb87950824..d8db696c22e489c73ea9f2d4265dcb9318fa9acb 100644
+--- a/build/autolinking/findModules.js
++++ b/build/autolinking/findModules.js
+@@ -109,7 +109,16 @@ function addRevisionToResults(results, name, revision) {
+  */
+ async function findPackagesConfigPathsAsync(searchPath) {
+     const bracedFilenames = '{' + EXPO_MODULE_CONFIG_FILENAMES.join(',') + '}';
+-    const paths = await (0, fast_glob_1.default)([`*/${bracedFilenames}`, `@*/*/${bracedFilenames}`, `./${bracedFilenames}`], {
++    const paths = await (0, fast_glob_1.default)([
++        `*/${bracedFilenames}`,
++        `@*/*/${bracedFilenames}`,
++        `./${bracedFilenames}`,
++        // This is a hacky workaround to force autolinking to search for all available install locations.
++        // Check the structure of `node_modules` for more info, it only contains the direct dependencies of the project.
++        // Everything is installed in `node_modules/.pnpm/**`, so that's where we should look for pnpm.
++        `.pnpm/*/node_modules/*/${bracedFilenames}`,
++        `.pnpm/*/node_modules/@*/*/${bracedFilenames}`,
++    ], {
+         cwd: searchPath,
+     });
+     // If the package has multiple configs (e.g. `unimodule.json` and `expo-module.config.json` during the transition time)
+diff --git a/scripts/ios/autolinking_manager.rb b/scripts/ios/autolinking_manager.rb
+index d570ad23fd614b9bdc1ec1e50a0cd33843003ce6..0320df5ceee5405198330372bf5092854f95db28 100644
+--- a/scripts/ios/autolinking_manager.rb
++++ b/scripts/ios/autolinking_manager.rb
+@@ -178,7 +178,8 @@ module Expo
+         'node',
+         '--no-warnings',
+         '--eval',
+-        'require(\'expo-modules-autolinking\')(process.argv.slice(1))',
++        # The working directory will stil be set at `<projectRoot>/ios`, so we need to provide the location of this file when resolving the paths
++        'require(require.resolve(\'expo-modules-autolinking\', { paths: [\'' + __dir__ + '\'] }))(process.argv.slice(1))',
+         command_name,
+         '--platform',
+         'ios'
+diff --git a/scripts/ios/react_import_patcher.rb b/scripts/ios/react_import_patcher.rb
+index 4acf193bf1613b9135c21fd73ea0fbb8aac00f95..a477d373e3f7c82cfc7498d3fbf2211d98fbf9fa 100644
+--- a/scripts/ios/react_import_patcher.rb
++++ b/scripts/ios/react_import_patcher.rb
+@@ -14,7 +14,8 @@ module Expo
+         'node',
+         '--no-warnings',
+         '--eval',
+-        'require(\'expo-modules-autolinking\')(process.argv.slice(1))',
++        # The working directory will stil be set at `<projectRoot>/ios`, so we need to provide the location of this file when resolving the paths
++        'require(require.resolve(\'expo-modules-autolinking\', { paths: [\'' + __dir__ + '\'] }))(process.argv.slice(1))',
+         'patch-react-imports',
+         '--pods-root',
+         File.expand_path(@root),
+diff --git a/src/autolinking/findModules.ts b/src/autolinking/findModules.ts
+index 7b86a145892792529f765cdb94b74beaa757402b..fb036f7168f5d2248274feed4ec9cdc29928dd4a 100644
+--- a/src/autolinking/findModules.ts
++++ b/src/autolinking/findModules.ts
+@@ -132,7 +132,16 @@ function addRevisionToResults(
+ async function findPackagesConfigPathsAsync(searchPath: string): Promise<string[]> {
+   const bracedFilenames = '{' + EXPO_MODULE_CONFIG_FILENAMES.join(',') + '}';
+   const paths = await glob(
+-    [`*/${bracedFilenames}`, `@*/*/${bracedFilenames}`, `./${bracedFilenames}`],
++    [
++      `*/${bracedFilenames}`,
++      `@*/*/${bracedFilenames}`,
++      `./${bracedFilenames}`,
++      // This is a hacky workaround to force autolinking to search for all available install locations.
++      // Check the structure of `node_modules` for more info, it only contains the direct dependencies of the project.
++      // Everything is installed in `node_modules/.pnpm/**`, so that's where we should look for pnpm.
++      `.pnpm/*/node_modules/*/${bracedFilenames}`,
++      `.pnpm/*/node_modules/@*/*/${bracedFilenames}`,
++    ],
+     {
+       cwd: searchPath,
+     }

src/blueprint.ts

@@ -41,10 +41,11 @@ function makeTokenColors(
   }
 
   if (isTokenColor(definition)) {
-    const { foreground } = definition.settings;
-    if (foreground) {
-      definition.settings.foreground = hslToHex(foreground) ?? foreground;
-    }
+    const { foreground, background } = definition.settings;
+
+    if (!definition.name) definition.name = scope;
+    if (foreground) definition.settings.foreground = hslToHex(foreground) ?? foreground;
+    if (background) definition.settings.background = hslToHex(background) ?? background;
 
     return [{ ...definition, scope }];
   }

src/themes/expo-dark.ts

@@ -275,5 +275,31 @@ export default makeTheme({
       'support.class': palette.dark.orange10,
       'variable.parameter': palette.dark.red10,
     },
+
+    'source.diff': {
+      'meta.diff.header': palette.dark.blue11,
+      'meta.diff.header.from-file': {
+        settings: {
+          background: palette.dark.red2,
+          foreground: palette.dark.red11,
+        },
+      },
+      'meta.diff.header.from-file punctuation.definition': palette.dark.red8,
+      'meta.diff.header.to-file': {
+        settings: {
+          background: palette.dark.green2,
+          foreground: palette.dark.green11,
+        },
+      },
+      'meta.diff.header.to-file punctuation.definition': palette.dark.green8,
+      'meta.diff.range': palette.dark.purple11,
+
+      'markup.inserted.diff': palette.dark.green11,
+      'markup.deleted.diff': palette.dark.red11,
+
+      'punctuation.definition.inserted.diff': palette.dark.green8,
+      'punctuation.definition.deleted.diff': palette.dark.red8,
+      'punctuation.definition.range.diff': palette.dark.purple8,
+    },
   },
 });

src/themes/expo-light.ts

@@ -278,5 +278,31 @@ export default makeTheme({
       'support.class.dart': palette.light.orange10,
       'variable.parameter': palette.light.red10,
     },
+
+    'source.diff': {
+      'meta.diff.header': palette.light.blue11,
+      'meta.diff.header.from-file': {
+        settings: {
+          background: palette.light.red2,
+          foreground: palette.light.red11,
+        },
+      },
+      'meta.diff.header.from-file punctuation.definition': palette.light.red8,
+      'meta.diff.header.to-file': {
+        settings: {
+          background: palette.light.green2,
+          foreground: palette.light.green11,
+        },
+      },
+      'meta.diff.header.to-file punctuation.definition': palette.light.green8,
+      'meta.diff.range': palette.light.purple11,
+
+      'markup.inserted.diff': palette.light.green11,
+      'markup.deleted.diff': palette.light.red11,
+
+      'punctuation.definition.inserted.diff': palette.light.green8,
+      'punctuation.definition.deleted.diff': palette.light.red8,
+      'punctuation.definition.range.diff': palette.light.purple8,
+    },
   },
 });