fix(token-publisher): update deprecated packages (#2983)

* feat(coverage-plugin): update teh threshold to 95%

* fix(token-publisher): update deprecated packages

* fix: update styling

Author: kamleshchandnani

packages/plugin-figma-token-publisher/package.json

@@ -11,17 +11,15 @@
   },
   "dependencies": {
     "react": "17.0.1",
-    "react-dom": "17.0.1"
-  },
-  "devDependencies": {
+    "react-dom": "17.0.1",
     "@figma/plugin-typings": "1.81.0",
-    "@types/react-dom": "17.0.0",
     "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
     "@types/set-value": "4.0.1",
     "css-loader": "6.7.1",
     "figma-plugin-ds": "0.1.8",
-    "html-webpack-inline-source-plugin": "1.0.3",
-    "html-webpack-plugin": "^5.6.3",
+    "html-inline-script-webpack-plugin": "3.2.1",
+    "html-webpack-plugin": "5.6.3",
     "is-plain-object": "5.0.0",
     "is-primitive": "3.0.1",
     "js-string-compression": "1.0.1",
@@ -30,7 +28,7 @@
     "ts-loader": "9.4.2",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
-    "webpack-cli": "5.1.4",
-    "webpack": "5.97.1"
+    "webpack": "5.97.1",
+    "webpack-cli": "5.1.4"
   }
 }

packages/plugin-figma-token-publisher/src/app/components/App.tsx

@@ -78,12 +78,20 @@ const App = (): ReactElement => {
           Cancel
         </button>
       </section>
-      <p className="section-title">Exported Icons:</p>
-      <textarea
-        className="input__field input__field--margin"
-        style={{ width: '100%', height: 200 }}
-        value={svgString}
-      />
+      {svgString ? (
+        <>
+          <label htmlFor="exportedIcons" className="label">
+            Exported Icons:
+          </label>
+          <textarea
+            id="exportedIcons"
+            className="input__field input__field--margin"
+            style={{ height: 200 }}
+            value={svgString}
+            readOnly
+          />
+        </>
+      ) : null}
     </section>
   );
 };

packages/plugin-figma-token-publisher/src/app/index.html

@@ -1 +1 @@
-<div id="react-page"></div>
+<div id="react-page"></div>

packages/plugin-figma-token-publisher/src/app/styles/ui.css

@@ -13,11 +13,35 @@
 .input__field--margin {
   margin-bottom: 40px !important;
 }
+
+textarea.input__field {
+  border: 1px solid var(--figma-color-border, #e5e5e5);
+  resize: vertical;
+  font-family: inherit;
+  padding: 8px;
+  border-radius: 2px;
+}
+
+textarea.input__field:focus {
+  outline: none;
+  border-color: var(--figma-color-border-selected, #18a0fb);
+}
+
 .button {
   margin-left: 20px;
 }
 
 .section-title {
   display: block !important;
-  margin-bottom: 30px;
+  margin-bottom: 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--figma-color-text, #000000);
+  line-height: 20px;
+}
+
+.label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--figma-color-text, #000000a9) !important;
 }

packages/plugin-figma-token-publisher/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
-const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
 
 module.exports = (env, argv) => ({
   mode: argv.mode === 'production' ? 'production' : 'development',
@@ -40,9 +40,9 @@ module.exports = (env, argv) => ({
     new HtmlWebpackPlugin({
       template: 'src/app/index.html',
       filename: 'ui.html',
-      inlineSource: '.(js)$',
       chunks: ['ui'],
+      inject: 'body',
     }),
-    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
+    new HtmlInlineScriptPlugin(),
   ],
 });

packages/plugin-figma-token-publisher/yarn.lock

@@ -103,12 +103,10 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "18.2.38"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.38.tgz#3605ca41d3daff2c434e0b98d79a2469d4c2dd52"
-  integrity sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==
+  version "19.2.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36"
+  integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==
   dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/[email protected]":
@@ -119,11 +117,6 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/scheduler@*":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
 "@types/[email protected]":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/set-value/-/set-value-4.0.1.tgz#7caf185556a67c2d9051080931853047423c93bd"
@@ -569,11 +562,6 @@ escalade@^3.2.0:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
-
 [email protected]:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -681,6 +669,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+[email protected]:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/html-inline-script-webpack-plugin/-/html-inline-script-webpack-plugin-3.2.1.tgz#32ae9a4a743c508bda854386c9af3b2e358bb5b7"
+  integrity sha512-PEj9Ve31BE0dva6eTD6wHMOztgIdPxF6gx3wad7ohBkCn7MXpuUvPC9t5ThMJ2NrVi1jWGBYU76DfoS+8dabRw==
+
 html-minifier-terser@^6.0.2:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -694,16 +687,7 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
-[email protected]:
-  version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-1.0.0-beta.2.tgz#71a9234c170ef18df6e51f4594a09b540ff03111"
-  integrity sha512-ydsEKdp0tnbmnqRAH2WSSMXerCNYhjes5b79uvP2BU3p6cyk+6ucNMsw5b5xD1QxphgvBBA3QqVmdcpu8QLlRQ==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-    slash "^1.0.0"
-    source-map-url "^0.4.0"
-
-html-webpack-plugin@^5.6.3:
+[email protected]:
   version "5.6.3"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz#a31145f0fee4184d53a794f9513147df1e653685"
   integrity sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==
@@ -1199,11 +1183,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
-  integrity sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==
-
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -1217,11 +1196,6 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-url@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
-  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
-
 source-map@^0.6.0, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"