fix(plugin): coverage and token publisher minor fixes (#2554)

razorpay · Feb 24, 2025 · 3edf28b · 3edf28b
1 parent 863680c
commit 3edf28b
Show file tree

Hide file tree

Showing 5 changed files with 507 additions and 1,970 deletions.
diff --git a/packages/plugin-figma-blade-coverage/src/main.ts b/packages/plugin-figma-blade-coverage/src/main.ts
@@ -507,7 +507,7 @@ const calculateCoverage = (node: SceneNode): CoverageMetrics | null => {
             nonBladeComponents++;
             highlightNonBladeNode(
               traversedNode,
-              `Use relevant Blade component. You're using a Frame with fill/strokes/effects`,
+              `You might want to use Card with Slot. You're using a Frame with fill/strokes/effects.`,
             );
           } else {
             NODES_SKIP_FROM_COVERAGE.push('FRAME');

diff --git a/packages/plugin-figma-token-publisher/package.json b/packages/plugin-figma-token-publisher/package.json
@@ -18,19 +18,19 @@
     "@types/react-dom": "17.0.0",
     "@types/react": "17.0.0",
     "@types/set-value": "4.0.1",
-    "css-loader": "5.0.1",
+    "css-loader": "6.7.1",
     "figma-plugin-ds": "0.1.8",
-    "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-inline-source-plugin": "1.0.3",
+    "html-webpack-plugin": "^5.6.3",
     "is-plain-object": "5.0.0",
     "is-primitive": "3.0.1",
     "js-string-compression": "1.0.1",
     "set-value": "4.1.0",
-    "style-loader": "2.0.0",
-    "ts-loader": "8.0.11",
-    "typescript": "4.1.2",
+    "style-loader": "3.3.1",
+    "ts-loader": "9.4.2",
+    "typescript": "4.9.5",
     "url-loader": "4.1.1",
-    "webpack-cli": "3.3.6",
+    "webpack-cli": "5.1.4",
     "webpack": "5.97.1"
   }
 }
diff --git a/packages/plugin-figma-token-publisher/src/plugin/makeDevTokenNames.ts b/packages/plugin-figma-token-publisher/src/plugin/makeDevTokenNames.ts
@@ -36,20 +36,22 @@ const makeDevTokenNames = (): void => {
       // @ts-expect-error because valuesByMode can be undefined and bunch of other things that is not worthy to put conditions for hence ignoring because for our dataset it will always be true
       variable.valuesByMode[Object.keys(variable.valuesByMode)[0]].id,
     );
-    // console.log(variableModeValue);
 
     let tokenName = '';
-    if (variableModeValue.name.includes('Radius')) {
-      tokenName = `border.radius.${variableModeValue.name.split('/').pop()}`;
-      // set the syntax for border radius
-    } else if (variableModeValue.name.includes('Width')) {
-      // set the syntax for border width
-      tokenName = `border.width.${variableModeValue.name.split('/').pop()}`;
-    } else if (variableModeValue.name.includes('spacing')) {
-      // set the syntax for spacing
-      tokenName = variableModeValue.name
-        .replace(/\//g, '.')
-        .replace(/\.[0-9]+/, (matchedString) => `[${matchedString.replace('.', '')}]`);
+
+    if (variableModeValue) {
+      if (variableModeValue.name.includes('Radius')) {
+        tokenName = `border.radius.${variableModeValue.name.split('/').pop()}`;
+        // set the syntax for border radius
+      } else if (variableModeValue.name.includes('Width')) {
+        // set the syntax for border width
+        tokenName = `border.width.${variableModeValue.name.split('/').pop()}`;
+      } else if (variableModeValue.name.includes('spacing')) {
+        // set the syntax for spacing
+        tokenName = variableModeValue.name
+          .replace(/\//g, '.')
+          .replace(/\.[0-9]+/, (matchedString) => `[${matchedString.replace('.', '')}]`);
+      }
     }
 
     if (tokenName) {

diff --git a/packages/plugin-figma-token-publisher/webpack.config.js b/packages/plugin-figma-token-publisher/webpack.config.js
@@ -32,16 +32,17 @@ module.exports = (env, argv) => ({
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
+    publicPath: '/',
   },
 
   // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
   plugins: [
     new HtmlWebpackPlugin({
-      template: './src/app/index.html',
+      template: 'src/app/index.html',
       filename: 'ui.html',
       inlineSource: '.(js)$',
       chunks: ['ui'],
     }),
-    new HtmlWebpackInlineSourcePlugin(),
+    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
   ],
 });