Add blendMode. Fix border.

bernaferrari · bernaferrari · commit e3a246f81a42 · 2023-09-12T10:48:31.000-03:00
diff --git a/apps/debug/package.json b/apps/debug/package.json
@@ -11,20 +11,20 @@
   },
   "dependencies": {
     "backend": "workspace:*",
-    "next": "^13.4.15",
+    "next": "^13.4.19",
     "plugin-ui": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.20",
+    "@types/node": "^20.6.0",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "autoprefixer": "^10.4.15",
     "eslint-config-custom": "workspace:*",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.29",
     "tailwindcss": "3.3.3",
     "tsconfig": "workspace:*",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/apps/plugin/package.json b/apps/plugin/package.json
@@ -10,30 +10,30 @@
     "dev": "pnpm build:watch"
   },
   "dependencies": {
-    "@figma/plugin-typings": "github:figma/plugin-typings#readonly-preview",
+    "@figma/plugin-typings": "^1.76.0",
     "backend": "workspace:*",
     "plugin-ui": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.20",
+    "@types/node": "^20.6.0",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.15",
-    "concurrently": "^8.2.0",
+    "concurrently": "^8.2.1",
     "esbuild": "^0.19.2",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.29",
     "tailwindcss": "3.3.3",
     "tsconfig": "workspace:*",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-singlefile": "^0.13.5"
   }
diff --git a/package.json b/package.json
@@ -8,10 +8,10 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
-    "eslint": "^8.47.0",
+    "eslint": "^8.49.0",
     "eslint-config-custom": "workspace:*",
-    "prettier": "^3.0.1",
-    "turbo": "^1.10.12"
+    "prettier": "^3.0.3",
+    "turbo": "^1.10.13"
   },
-  "packageManager": "pnpm@7.15.0"
+  "packageManager": "pnpm@8.7.5"
 }
diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -14,17 +14,17 @@
     "test": "jest"
   },
   "dependencies": {
-    "@figma/plugin-typings": "github:figma/plugin-typings#readonly-preview",
+    "@figma/plugin-typings": "^1.76.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "eslint": "^8.47.0",
+    "eslint": "^8.49.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^7.2.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/packages/backend/src/common/commonStroke.ts b/packages/backend/src/common/commonStroke.ts
@@ -7,7 +7,7 @@ type BorderSideType =
       bottom: number;
     };
 
-export const commonStroke = (node: SceneNode): BorderSideType | null => {
+export const commonStroke = (node: SceneNode, divideBy: number = 1): BorderSideType | null => {
   if (!("strokes" in node) || !node.strokes || node.strokes.length === 0) {
     return null;
   }
@@ -18,17 +18,17 @@ export const commonStroke = (node: SceneNode): BorderSideType | null => {
       node.strokeTopWeight === node.strokeLeftWeight &&
       node.strokeTopWeight === node.strokeRightWeight
     ) {
-      return { all: node.strokeTopWeight / 2 };
+      return { all: node.strokeTopWeight / divideBy };
     }
 
     return {
-      left: node.strokeLeftWeight / 2,
-      top: node.strokeTopWeight / 2,
-      right: node.strokeRightWeight / 2,
-      bottom: node.strokeBottomWeight / 2,
+      left: node.strokeLeftWeight / divideBy,
+      top: node.strokeTopWeight / divideBy,
+      right: node.strokeRightWeight / divideBy,
+      bottom: node.strokeBottomWeight / divideBy,
     };
   } else if (node.strokeWeight !== figma.mixed && node.strokeWeight !== 0) {
-    return { all: node.strokeWeight / 2 };
+    return { all: node.strokeWeight / divideBy };
   }
 
   return null;
diff --git a/packages/backend/src/html/builderImpl/htmlBlend.ts b/packages/backend/src/html/builderImpl/htmlBlend.ts
@@ -23,6 +23,64 @@ export const htmlOpacity = (
   return "";
 };
 
+export const htmlBlendMode = (node: MinimalBlendMixin, isJsx: boolean): string => {
+  if (node.blendMode !== "NORMAL" && node.blendMode !== "PASS_THROUGH") {
+    let blendMode = "";
+    switch (node.blendMode) {
+      case "MULTIPLY":
+        blendMode = "multiply";
+        break;
+      case "SCREEN":
+        blendMode = "screen";
+        break;
+      case "OVERLAY":
+        blendMode = "overlay";
+        break;
+      case "DARKEN":
+        blendMode = "darken";
+        break;
+      case "LIGHTEN":
+        blendMode = "lighten";
+        break;
+      case "COLOR_DODGE":
+        blendMode = "color-dodge";
+        break;
+      case "COLOR_BURN":
+        blendMode = "color-burn";
+        break;
+      case "HARD_LIGHT":
+        blendMode = "hard-light";
+        break;
+      case "SOFT_LIGHT":
+        blendMode = "soft-light";
+        break;
+      case "DIFFERENCE":
+        blendMode = "difference";
+        break;
+      case "EXCLUSION":
+        blendMode = "exclusion";
+        break;
+      case "HUE":
+        blendMode = "hue";
+        break;
+      case "SATURATION":
+        blendMode = "saturation";
+        break;
+      case "COLOR":
+        blendMode = "color";
+        break;
+      case "LUMINOSITY":
+        blendMode = "luminosity";
+        break;
+    }
+
+    if (blendMode) {
+      return formatWithJSX("mix-blend-mode", isJsx, blendMode);
+    }
+  }
+  return "";
+};
+
 /**
  * https://tailwindcss.com/docs/visibility/
  * example: invisible
diff --git a/packages/backend/src/html/htmlDefaultBuilder.ts b/packages/backend/src/html/htmlDefaultBuilder.ts
@@ -4,6 +4,7 @@ import {
   htmlVisibility,
   htmlRotation,
   htmlOpacity,
+  htmlBlendMode,
 } from "./builderImpl/htmlBlend";
 import {
   htmlColor,
@@ -65,7 +66,8 @@ export class HtmlDefaultBuilder {
     this.addStyles(
       htmlVisibility(node, this.isJSX),
       ...htmlRotation(node, this.isJSX),
-      htmlOpacity(node, this.isJSX)
+      htmlOpacity(node, this.isJSX),
+      htmlBlendMode(node, this.isJSX)
     );
     return this;
   }
diff --git a/packages/backend/src/swiftui/builderImpl/swiftuiBorder.ts b/packages/backend/src/swiftui/builderImpl/swiftuiBorder.ts
@@ -9,7 +9,7 @@ const swiftUIStroke = (node: SceneNode): number => {
     return 0;
   }
 
-  const stroke = commonStroke(node);
+  const stroke = commonStroke(node, 2);
 
   if (!stroke) {
     return 0;
diff --git a/packages/backend/src/tailwind/builderImpl/tailwindBlend.ts b/packages/backend/src/tailwind/builderImpl/tailwindBlend.ts
@@ -7,14 +7,54 @@ import { exactValue, nearestOpacity, nearestValue } from "../conversionTables";
  * if opacity was changed, let it be visible. Therefore, 98% => 75
  * node.opacity is between [0, 1]; output will be [0, 100]
  */
-export const tailwindOpacity = (node: BlendMixin): string => {
+export const tailwindOpacity = (node: MinimalBlendMixin): string => {
   // [when testing] node.opacity can be undefined
   if (node.opacity !== undefined && node.opacity !== 1) {
     return `opacity-${nearestOpacity(node.opacity)}`;
   }
   return "";
 };
 
+// https://tailwindcss.com/docs/mix-blend-mode
+export const tailwindBlendMode = (node: MinimalBlendMixin): string => {
+  if (node.blendMode !== "NORMAL" && node.blendMode !== "PASS_THROUGH") {
+    switch (node.blendMode) {
+      case "MULTIPLY":
+        return "mix-blend-multiply";
+      case "SCREEN":
+        return "mix-blend-screen";
+      case "OVERLAY":
+        return "mix-blend-overlay";
+      case "DARKEN":
+        return "mix-blend-darken";
+      case "LIGHTEN":
+        return "mix-blend-lighten";
+      case "COLOR_DODGE":
+        return "mix-blend-color-dodge";
+      case "COLOR_BURN":
+        return "mix-blend-color-burn";
+      case "HARD_LIGHT":
+        return "mix-blend-hard-light";
+      case "SOFT_LIGHT":
+        return "mix-blend-soft-light";
+      case "DIFFERENCE":
+        return "mix-blend-difference";
+      case "EXCLUSION":
+        return "mix-blend-exclusion";
+      case "HUE":
+        return "mix-blend-hue";
+      case "SATURATION":
+        return "mix-blend-saturation";
+      case "COLOR":
+        return "mix-blend-color";
+      case "LUMINOSITY":
+        return "mix-blend-luminosity";
+    }
+    return "";
+  }
+  return "";
+};
+
 /**
  * https://tailwindcss.com/docs/visibility/
  * example: invisible
diff --git a/packages/backend/src/tailwind/builderImpl/tailwindBorder.ts b/packages/backend/src/tailwind/builderImpl/tailwindBorder.ts
@@ -15,7 +15,10 @@ export const tailwindBorderWidth = (node: SceneNode): string => {
 
   const getBorder = (weight: number, kind: string) => {
     const allowedValues = [1, 2, 4, 8];
+    console.log("weight", weight);
     const nearest = nearestValue(weight, allowedValues);
+    console.log("nearest", nearest);
+
     if (nearest === 1) {
       // special case
       return `border${kind}`;
diff --git a/packages/backend/src/tailwind/tailwindDefaultBuilder.ts b/packages/backend/src/tailwind/tailwindDefaultBuilder.ts
@@ -4,6 +4,7 @@ import {
   tailwindVisibility,
   tailwindRotation,
   tailwindOpacity,
+  tailwindBlendMode,
 } from "./builderImpl/tailwindBlend";
 import {
   tailwindBorderWidth,
@@ -44,11 +45,14 @@ export class TailwindDefaultBuilder {
     this.attributes.push(...newStyles.filter((style) => style !== ""));
   };
 
-  blend(node: SceneNode & SceneNodeMixin & BlendMixin & LayoutMixin): this {
+  blend(
+    node: SceneNode & SceneNodeMixin & MinimalBlendMixin & LayoutMixin
+  ): this {
     this.addAttributes(
       tailwindVisibility(node),
       tailwindRotation(node),
-      tailwindOpacity(node)
+      tailwindOpacity(node),
+      tailwindBlendMode(node)
     );
 
     return this;
diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json
@@ -4,10 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint-config-next": "^13.4.15",
+    "eslint-config-next": "^13.4.19",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-config-turbo": "^1.10.12",
-    "eslint-plugin-react": "7.33.1"
+    "eslint-config-turbo": "^1.10.13",
+    "eslint-plugin-react": "7.33.2"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/plugin-ui/package.json b/packages/plugin-ui/package.json
@@ -17,12 +17,12 @@
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-syntax-highlighter": "15.5.7",
-    "eslint": "^8.47.0",
+    "eslint": "^8.49.0",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -8,12 +8,12 @@
     "lint": "eslint \"**/*.ts*\""
   },
   "devDependencies": {
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "eslint": "^8.47.0",
+    "eslint": "^8.49.0",
     "eslint-config-custom": "workspace:*",
     "react": "^18.2.0",
     "tsconfig": "workspace:*",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ const swiftUIStroke = (node: SceneNode): number => {`
`9`	`9`	`return 0;`
`10`	`10`	`}`
`11`	`11`
`12`		`- const stroke = commonStroke(node);`
	`12`	`+ const stroke = commonStroke(node, 2);`
`13`	`13`
`14`	`14`	`if (!stroke) {`
`15`	`15`	`return 0;`