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

Author: kamleshchandnani

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');

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"
   }
 }

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) {

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),
   ],
 });