lots of updates!

- new output format
- updated typescript types
- updated readme
- prettier formating

Author: chrisdrackett

README.md

@@ -10,11 +10,17 @@ It also comes with a snazzy CLI:
 
 [This example site](https://tiltshift.github.io/figmint/) shows a figma file above html and css generated using the JSON that figmint outputs. This example can be found and run in the `example` folder in this repo.
 
+👩🏽‍🏫*Recommendations*:
+
+- Use names in figma that work well in javascript. `darkGreen` vs. `Dark Green`
+- Figma lets you name two styles the same thing. This will cause overwrite issues in your exports.
+
 🚨*Notes*:
 
 - Currently only Fill styles, Text styles, and exports are supported. PR's welcome for Grid and Effect styles!
 - Figmint will only pick up a style if it is used in the file you pass it. If you are finding a style isn't syncing make sure an element in the file is using that style.
-- Exports work only with with scale values (2x for example) and not with width or height values (512w). This is a limitation of the figma API.
+- PNG and JPG exports work only with with scale values (2x for example) and not with width or height values (512w). This is a limitation of the figma API.
+- Color styles with multiple properties are available as part of the raw export. The simpler named exports will only display the final property.
 
 ## Install and Config
 
@@ -88,13 +94,13 @@ You can connect the example to your own figma file by editing `.figmintrc.json`
 
 The CLI for figmint is pretty simple, just run `yarn figmint` or `npm run figmint` in your project after it is installed.
 
-### Watch Mode
+### Watch Mode (alpha)
 
 It is also possible to run the CLI in watch mode. This will update your json as things change on figma without you needing to re-run the command.
 
 🚨*Notes*:
 
-- Currently watch mode will overrite your Figma file every second. Depending on your dev enviroment this may cause your site to reload more than expected. Ideally figmint would only write files that have chagned. PR's welcome!
+- Currently watch mode will overrite the output every second. Depending on your dev enviroment this may cause your site to reload more than expected. Ideally figmint would only write files that have chagned. PR's welcome!
 
 ## Config format
 

package.json

@@ -28,11 +28,14 @@
   },
   "dependencies": {
     "figma-js": "^1.9.0",
+    "rimraf": "^3.0.0",
     "utils": "^0.3.1"
   },
   "devDependencies": {
     "@types/node": "^12.12.21",
     "@types/react": "^16.9.17",
+    "@types/rimraf": "^2.0.3",
+    "@types/prettier": "^1.19.0",
     "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",

src/index.tsx

@@ -8,6 +8,9 @@ import { cosmiconfig } from 'cosmiconfig'
 import fs from 'fs'
 import path from 'path'
 import util from 'util'
+import rimraf from 'rimraf'
+
+import prettier from 'prettier'
 
 import { Text, Box, Color, render } from 'ink'
 
@@ -24,6 +27,8 @@ import {
   FigmintExportType,
   downloadImage,
   PartialFigmintExportType,
+  FigmintGradient,
+  BaseTypeStyleType,
 } from './utils'
 import { exportFormatOptions } from 'figma-js'
 
@@ -89,6 +94,15 @@ const Output = () => {
   const fetchAndAddImageUrls = React.useCallback(
     async (downloadLists: DownloadListType, finalExports: FinalExportsType) => {
       if (client && file) {
+        const baseDirectory = path.join(output, 'exports')
+
+        // Clear out the output dir if it already exists
+        if (fs.existsSync(baseDirectory)) {
+          rimraf.sync(baseDirectory)
+        }
+
+        fs.mkdirSync(baseDirectory, { recursive: true })
+
         await Promise.all(
           Object.keys(downloadLists).map(async (format) => {
             if (downloadLists[format].length > 0) {
@@ -116,7 +130,7 @@ const Output = () => {
 
                 if (image) {
                   // store images based on group
-                  const outDirectory = path.join(output, 'exports', image.group)
+                  const outDirectory = path.join(baseDirectory, image.group)
 
                   // image file name based on format and scale
                   const outFile = `${image.name}${
@@ -258,49 +272,75 @@ const Output = () => {
 
       // write out our file
 
-      let solidColors = ''
-      let fillNames = ''
-      let textNames = ''
+      let colors = {} as { [colorName: string]: string }
+      let gradients = {} as { [gradientName: string]: FigmintGradient }
+      let imageFills = {} as { [imageFillName: string]: string }
+      let textStyles = {} as { [name: string]: BaseTypeStyleType }
 
       styles.fillStyles.forEach((fill) => {
-        fillNames += `| '${fill.name}'`
         fill.styles.forEach((style) => {
-          if (style.type === 'SOLID') {
-            solidColors += `| '${style.color}'`
+          switch (style.type) {
+            case 'SOLID':
+              colors[fill.name] = style.color
+              break
+            case 'GRADIENT_LINEAR':
+            case 'GRADIENT_RADIAL':
+            case 'GRADIENT_ANGULAR':
+            case 'GRADIENT_DIAMOND':
+              gradients[fill.name] = style
+              break
+            case 'IMAGE':
+              imageFills[fill.name] = style.fileName
           }
         })
       })
 
       styles.textStyles.forEach((text) => {
-        textNames += `| '${text.name}'`
+        textStyles[text.name] = text.styles
       })
 
+      const options = await prettier.resolveConfig(output)
+
       fs.writeFileSync(
         path.join(output, `index.${typescript ? 'ts' : 'js'}`),
-        `
-        ${typescript ? `import { FigmintOutput } from 'figmint'` : ''}
-
-        const styles${typescript ? ': FigmintOutput' : ''} = ${util.inspect(
-          styles,
-          {
-            depth: Infinity,
-            compact: false,
-          },
-        )}
+        prettier.format(
+          `
+        const styles = {
+        colors: ${util.inspect(colors, {
+          depth: Infinity,
+          compact: false,
+        })},
+        gradients: ${util.inspect(gradients, {
+          depth: Infinity,
+          compact: false,
+        })},
+        imageFills: ${util.inspect(imageFills, {
+          depth: Infinity,
+          compact: false,
+        })},
+        textStyles: ${util.inspect(textStyles, {
+          depth: Infinity,
+          compact: false,
+        })},
+        raw: ${util.inspect(styles, {
+          depth: Infinity,
+          compact: false,
+        })},
+        }${typescript ? ' as const' : ''}
 
         ${
           typescript
             ? `
-          ${
-            solidColors !== '' ? `export type SolidColors = ${solidColors}` : ''
-          }
-          ${fillNames !== '' ? `export type FillNames = ${fillNames}` : ''}
-          ${textNames !== '' ? `export type TextNames = ${textNames}` : ''}
+          export type ColorValues = keyof typeof styles.colors
+          export type GradientValues = keyof typeof styles.gradients
+          export type TextValues = keyof typeof styles.textStyles
           `
             : ''
         }
 
         export default styles`,
+          { ...options, parser: typescript ? 'typescript' : 'babel' },
+        ),
       )
 
       setLoading(false)

src/utils/downloadImages.ts

@@ -22,7 +22,10 @@ export const downloadImage = function(url: string, outFile: string) {
     })
 }
 
-export const downloadFillImage = (image: ImageFill, outputDir: string) => {
+export const downloadFillImage = (
+  image: ImageFill,
+  outputDirectory: string,
+) => {
   return new Promise<string>((resolve) => {
     // figure out the file type
     https.get(image.url, (response) => {
@@ -34,15 +37,13 @@ export const downloadFillImage = (image: ImageFill, outputDir: string) => {
 
         // once we know the file type write the file
         if (imageExt) {
-          const imageFillDir = path.join(outputDir, 'fillImages')
-
           // make sure the fillImages directory exists
-          if (!fs.existsSync(imageFillDir)) {
-            fs.mkdirSync(imageFillDir, { recursive: true })
+          if (!fs.existsSync(outputDirectory)) {
+            fs.mkdirSync(outputDirectory, { recursive: true })
           }
 
           const outFile = path.join(
-            imageFillDir,
+            outputDirectory,
             `${image.imageRef}.${imageExt.ext}`,
           )
 

src/utils/getStylesFromFile.ts

@@ -1,3 +1,7 @@
+import fs from 'fs'
+import path from 'path'
+import rimraf from 'rimraf'
+
 import * as Figma from 'figma-js'
 
 import { RawStyleObject, RawStyleType, ExportsObject } from './'
@@ -19,6 +23,16 @@ export const getStylesFromFile = async (
   let fileName: string | undefined
 
   // download fill images
+
+  const outputDir = path.join(output, 'fillImages')
+
+  // Clear out the output dir if it already exists
+  if (fs.existsSync(outputDir)) {
+    rimraf.sync(outputDir)
+  }
+
+  fs.mkdirSync(outputDir, { recursive: true })
+
   for (const [key, style] of Object.entries(styleValues)) {
     // if we're an image fill grab the image url
     if (file.styles[key].styleType === 'FILL') {
@@ -31,7 +45,7 @@ export const getStylesFromFile = async (
               imageRef: fill.imageRef,
               url: imageFills.meta.images[fill.imageRef],
             },
-            output,
+            outputDir,
           )
         }
       }

yarn.lock

@@ -877,7 +877,7 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
-"@types/glob@^7.1.1":
+"@types/glob@*", "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
   integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
@@ -916,6 +916,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prettier@^1.19.0":
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.0.tgz#a2502fb7ce9b6626fdbfc2e2a496f472de1bdd05"
+  integrity sha512-gDE8JJEygpay7IjA/u3JiIURvwZW08f0cZSZLAzFoX/ZmeqvS0Sqv+97aKuHpNsalAMMhwPe+iAS6fQbfmbt7A==
+
 "@types/prop-types@*":
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
@@ -934,6 +939,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/rimraf@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/rimraf/-/rimraf-2.0.3.tgz#0199a46af106729ba14213fda7b981278d8c84f2"
+  integrity sha512-dZfyfL/u9l/oi984hEXdmAjX3JHry7TLWw43u1HQ8HhPv6KtfxnrZ3T/bleJ0GEvnk9t5sM7eePkgMqz3yBcGg==
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
 "@types/tinycolor2@^1.4.0", "@types/tinycolor2@^1.4.2":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.2.tgz#721ca5c5d1a2988b4a886e35c2ffc5735b6afbdf"
@@ -6390,6 +6403,13 @@ rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.0.tgz#614176d4b3010b75e5c390eb0ee96f6dc0cebb9b"
+  integrity sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"