Add Figma to Tailwind bookmarklet functionality & make it work in the browser

Adds JIT support for the translation functionality
Also adds support for passing in a config file

Author: zakkor

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-transform-modules-commonjs"]
+}

.gitignore

@@ -1,2 +1,3 @@
 *.svelte
-node_modules
+node_modules
+dist

bin/figma-tailwind/build.js

@@ -0,0 +1,13 @@
+const fs = require('fs');
+const path = require('path');
+const util = require('util');
+const translate = require('../../dist/lib/translate.js');
+
+const byProperties = translate.loadConfig(path.resolve('./tailwind.config.js'));
+
+const bookmarklet = `${fs.readFileSync('./bin/figma-tailwind/runtime.js', 'utf-8')}
+let byProperties = ${util.inspect(byProperties)};`;
+
+fs.writeFileSync('./dist/bookmarklet.js', bookmarklet, {
+  flag: 'w+',
+});

bin/figma-tailwind/runtime.js

@@ -0,0 +1,89 @@
+import { propertiesToClass } from './lib/translate-slim.js';
+
+function translate(event) {
+  if (event.button !== 0) {
+    return;
+  }
+
+  const paneEl = document.querySelector('[class*="inspect_panels--tabularInspectionPanel"] > div > div > div > div');
+  paneEl.style.display = 'flex';
+  paneEl.style.flexDirection = 'column';
+
+  // Remove previously translated elements if any.
+  paneEl.querySelectorAll('span.translated').forEach((el) => el.remove());
+  const lastPaneChild = paneEl.children[paneEl.children.length - 1];
+  if (lastPaneChild.tagName === 'DIV' && lastPaneChild.classList.length === 0) {
+    lastPaneChild.style.display = 'none';
+  }
+
+  const findPropertyGroup = (i) => {
+    let lineEls = [];
+    const separatorEl = Array.from(paneEl.querySelectorAll('div')).filter((el) => el.classList.length === 0)?.[i];
+    if (!separatorEl) {
+      return {
+        lastEl: null,
+        classnames: null,
+      };
+    }
+
+    let iteratorEl = separatorEl.nextElementSibling;
+    while (true) {
+      if (i === 0 && iteratorEl?.classList.length === 0) {
+        break;
+      }
+
+      if (iteratorEl.tagName === 'DIV' && iteratorEl?.classList.length > 0) {
+        lineEls.push(iteratorEl);
+      }
+
+      if (i === 1 && !iteratorEl.nextElementSibling) {
+        break;
+      }
+      iteratorEl = iteratorEl.nextElementSibling;
+    }
+
+    const properties = Array.from(lineEls).map((el) => el.textContent.slice(0, -1));
+    const classnames = properties
+      .map((prop) => propertiesToClass(prop, byProperties)?.replace('\\', ''))
+      .filter(Boolean)
+      .join(' ');
+
+    return {
+      lastEl: iteratorEl,
+      classnames,
+    };
+  };
+
+  // Attach translated elements to the inspector pane
+  const attach = (el, classnames, position) => {
+    if (!el || !classnames) {
+      return;
+    }
+    const translatedEl = document.createElement('SPAN');
+    translatedEl.textContent = classnames;
+    translatedEl.classList.add('translated');
+    translatedEl.style.border = '1px solid #06B6D4';
+    translatedEl.style.borderRadius = '6px';
+    translatedEl.style.padding = '2px 8px';
+    translatedEl.style.marginTop = '8px';
+    translatedEl.style.display = 'block';
+    translatedEl.style.alignSelf = 'self-start';
+    el.insertAdjacentElement(position, translatedEl);
+  };
+
+  const { lastEl: positionEl, classnames: positionClassnames } = findPropertyGroup(0);
+  const { lastEl: restEl, classnames: restClassnames } = findPropertyGroup(1);
+
+  attach(positionEl, positionClassnames, 'beforebegin');
+  attach(restEl, restClassnames, 'afterend');
+}
+
+function translateDelayed(event) {
+  window.setTimeout(() => {
+    translate(event);
+  }, 50);
+}
+
+const canvas = document.querySelector('canvas');
+canvas.removeEventListener('mouseup', translateDelayed);
+canvas.addEventListener('mouseup', translateDelayed);

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "src/index.js",
   "scripts": {
+    "build-bookmarklet": "babel src --out-dir ./dist/lib --copy-files && node bin/figma-tailwind/build.js && rollup -c",
     "test": "uvu -r esm test"
   },
   "repository": {
@@ -17,7 +18,15 @@
   },
   "homepage": "https://github.com/metafy-gg/tailwind-utils#readme",
   "devDependencies": {
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.5",
+    "@rollup/plugin-commonjs": "^19.0.0",
     "esm": "^3.2.25",
+    "rollup": "^2.51.2",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "terser": "^5.7.0",
     "uvu": "^0.5.1"
   },
   "dependencies": {