add support for effects

tiltshift · May 20, 2020 · 224ec7f · 224ec7f
1 parent e24e394
commit 224ec7f
Show file tree

Hide file tree

Showing 6 changed files with 330 additions and 403 deletions.
diff --git a/example/package.json b/example/package.json
@@ -8,19 +8,22 @@
     "build": "parcel build index.html --public-url /figmint",
     "figmint": "node ../bin/figmint.js",
     "watch": "node ../bin/figmint.js watch",
-    "postinstall": "relative-deps"
+    "prepare": "relative-deps",
+    "prestart": "relative-deps",
+    "prebuild": "relative-deps",
+    "pretest": "relative-deps"
   },
   "dependencies": {
     "figmint": "^0.1.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "parcel": "^1.12.4",
-    "relative-deps": "^0.2.0",
-    "typescript": "3.7.4"
+    "relative-deps": "^1.0.3",
+    "typescript": "3.9.3"
   },
   "relativeDependencies": {
     "figmint": "../"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "figmint",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Sync Between Figma and Your Javascript Project",
   "repository": "https://github.com/tiltshift/figmint",
   "license": "MIT",
@@ -18,18 +18,16 @@
   },
   "lint-staged": {
     "*.{js,json,css,md,ts,tsx}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ]
   },
   "dependencies": {
-    "camelcase": "^5.3.1",
-    "figma-js": "^1.9.0",
-    "rimraf": "^3.0.0",
+    "camelcase": "^6.0.0",
+    "figma-js": "^1.10.1",
+    "rimraf": "^3.0.2",
     "utils": "^0.3.1"
   },
   "devDependencies": {
@@ -48,22 +46,22 @@
     "eslint-plugin-flowtype": "3.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-hooks": "1.x",
-    "gh-pages": "^2.1.1",
-    "husky": "^3.1.0",
+    "gh-pages": "^2.2.0",
+    "husky": "^4.2.5",
     "image-type": "^4.1.0",
     "ink": "^2.6.0",
     "ink-box": "^1.0.0",
     "ink-gradient": "^1.0.0",
     "ink-spinner": "^3.0.1",
-    "lint-staged": "^9.5.0",
+    "lint-staged": "^10.2.4",
     "parcel-bundler": "^1.12.4",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.5",
     "react": "^16.12.0",
     "tinycolor2": "^1.4.1",
-    "typescript": "^3.7.4",
+    "typescript": "^3.9.3",
     "use-interval": "^1.2.1"
   },
   "scripts": {

diff --git a/src/index.tsx b/src/index.tsx
@@ -30,6 +30,7 @@ import {
   PartialFigmintExportType,
   FigmintGradient,
   BaseTypeStyleType,
+  BaseEffectStyleType,
 } from './utils'
 import { exportFormatOptions } from 'figma-js'
 
@@ -280,6 +281,7 @@ const Output = () => {
       let gradients = {} as { [gradientName: string]: FigmintGradient }
       let imageFills = {} as { [imageFillName: string]: string }
       let textStyles = {} as { [name: string]: BaseTypeStyleType }
+      let effectStyles = {} as { [name: string]: BaseEffectStyleType }
 
       styles.fillStyles.forEach((fill) => {
         fill.styles.forEach((style) => {
@@ -303,6 +305,10 @@ const Output = () => {
         textStyles[camelCase(text.name)] = text.styles
       })
 
+      styles.effectStyles.forEach((effect) => {
+        effectStyles[camelCase(effect.name)] = effect.styles
+      })
+
       const options = await prettier.resolveConfig(output)
 
       fs.writeFileSync(
@@ -326,6 +332,10 @@ const Output = () => {
           depth: Infinity,
           compact: false,
         })},
+        effectStyles: ${util.inspect(effectStyles, {
+          depth: Infinity,
+          compact: false,
+        })},
         raw: ${util.inspect(styles, {
           depth: Infinity,
           compact: false,

diff --git a/src/utils/figmaToJson.ts b/src/utils/figmaToJson.ts
@@ -11,13 +11,13 @@ import {
 } from './'
 
 export const figmaToJson = (figmaObject: RawStyleObject): FigmintOutput => {
-  const formattedStyles = {
+  const formattedStyles = ({
     fillStyles: [],
     textStyles: [],
     effectStyles: [],
     gridStyles: [],
     exports: [],
-  } as FigmintOutput
+  } as unknown) as FigmintOutput
 
   Object.values(figmaObject).forEach((style) => {
     const baseStyle = {
@@ -116,6 +116,19 @@ export const figmaToJson = (figmaObject: RawStyleObject): FigmintOutput => {
         })
         break
       case 'EFFECT':
+        styleProps = style.props as ReadonlyArray<Figma.Effect>
+
+        formattedStyles.effectStyles.push({
+          ...baseStyle,
+          styles: styleProps.map((effect) => {
+            const baseEffect: any = effect
+
+            if (effect.color) baseEffect.color = figmaColorToHSL(effect.color)
+
+            return baseEffect
+          }),
+        })
+
         break
       case 'GRID':
         break

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -53,6 +53,10 @@ export type BaseTypeStyleType = Figma.TypeStyle & {
   fontStyle: string
 }
 
+export type BaseEffectStyleType = Omit<Figma.Effect, 'color'> & {
+  color: string
+}
+
 export type FigmintStyle<T> = {
   key: string
   name: string