figma-tokens - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

bin/figma-tokens-api.js

 #!/usr/bin/env node
+/* eslint no-console:0 */
 require('../src/cli')()

bin/figma-tokens-build.js

 #!/usr/bin/env node
-/* eslint-disable no-console */
+/* eslint no-console:0 */
 const fs = require('fs')
@@ -7,25 +7,35 @@ const path = require('path')
 
+const NAMING_CONVENTION = {kebabcase: kebabCase, camelcase: camelCase}
+
 const DESIGN_TOKENS_FILE = path.join(process.cwd(), '.', 'tokens/tokens.json')
 
-const toCSSWrapper = children => `:root {\n${children}}\n`
-const toCSS = ({prefix, property, value}) =>
-  `  --${kebabCase(`${prefix}-${property}`)}: ${value};\n`
+const FORMATS = {
+  css: {
+    decorator: ':root {\n%{children}}\n',
+    naming: 'kebabcase',
+    pattern: '  --%{property}: %{value};\n'
+  },
+  scss: {
+    naming: 'kebabcase',
+    pattern: '$%{property}: %{value};\n'
+  },
+  less: {
+    naming: 'kebabcase',
+    pattern: '@%{property}: %{value};\n'
+  },
+  js: {
+    naming: 'camelcase',
+    pattern: "export const %{property} = '%{value}'\n"
+  }
+}
 
-const toSCSSWrapper = children => `${children}`
-const toSCSS = ({prefix, property, value}) =>
-  `$${kebabCase(`${prefix}-${property}`)}: ${value};\n`
+const toCSSFormats = ({format, prefix, property, value}) => {
+  const {pattern, naming} = FORMATS[format]
+  const propertyWithPrefix = NAMING_CONVENTION[naming](`${prefix}-${property}`)
+  const options = {property: propertyWithPrefix, value}
 
-const toLESSWrapper = children => `${children}`
-const toLESS = ({prefix, property, value}) =>
-  `@${kebabCase(`${prefix}-${property}`)}: ${value};\n`
-
-const toJSWrapper = children => `${children}`
-const toJS = ({prefix, property, value}) =>
-  `export const ${camelCase(`${prefix}-${property}`)} = '${value}'\n`
-
-const OUPUT_FILE_FORMATS = {
-  css: [toCSSWrapper, toCSS],
-  js: [toJSWrapper, toJS],
-  less: [toLESSWrapper, toLESS],
-  scss: [toSCSSWrapper, toSCSS]
+  return pattern.replace(
+    new RegExp('%{([^}]+)}', 'gi'),
+    match => options[match.replace(/[^\w\s]/gi, '')]
+  )
 }
@@ -36,2 +46,23 @@
 
+const contentToFormat = ({format, styles}) => {
+  const {decorator} = FORMATS[format]
+  return (
+    printDate(format) +
+    (decorator ? decorator.replace('%{children}', styles) : styles)
+  )
+}
+
+const tokensDataMapper = data => {
+  const dataObject = JSON.parse(data)
+  const tokensLayers = Object.keys(dataObject)
+
+  return tokensLayers.map(layer =>
+    Object.keys(dataObject[layer]).map(property => ({
+      prefix: layer,
+      property,
+      value: dataObject[layer][property]
+    }))
+  )
+}
+
 try {
@@ -48,32 +79,24 @@ if (!fs.existsSync(DESIGN_TOKENS_FILE)) {
 
-    const dataObject = JSON.parse(data)
+    const layers = tokensDataMapper(data)
 
-    const tokensLayers = Object.keys(dataObject)
+    Object.keys(FORMATS).map(format => {
+      const styles = layers
+        .map(
+          layer =>
+            `${layer
+              .map(values => toCSSFormats({format, ...values}))
+              .join('')}\n`
+        )
+        .join('')
 
-    const layers = tokensLayers.map(layer =>
-      Object.keys(dataObject[layer]).map(property => ({
-        prefix: layer,
-        property,
-        value: dataObject[layer][property]
-      }))
-    )
-
-    Object.keys(OUPUT_FILE_FORMATS).map(format => {
-      const [wrapper, properties] = OUPUT_FILE_FORMATS[format]
-      const flatObject = obj => (format !== 'json' ? obj.join('') : obj)
-      const styles = flatObject(
-        layers.map(
-          layer => `${flatObject(layer.map(values => properties(values)))}\n`
-        )
+      fs.writeFile(
+        `tokens/tokens.${format}`,
+        contentToFormat({format, styles}),
+        err => {
+          if (err) throw new Error(`\x1b[31m\n\n❌ ${err}\n\n`)
+          console.log(
+            `\x1b[32m✔︎\x1b[0m ${format.toUpperCase()} design tokens file generated!`
+          )
+        }
       )
-
-      const contentToFormat =
-        (format !== 'json' ? printDate(format) : '') + wrapper(styles)
-
-      fs.writeFile(`tokens/tokens.${format}`, contentToFormat, err => {
-        if (err) throw new Error(`\x1b[31m\n\n❌ ${err}\n\n`)
-        console.log(
-          `\x1b[32m✔︎\x1b[0m ${format.toUpperCase()} design tokens file generated!`
-        )
-      })
     })
@@ -80,0 +103,0 @@ })

package.json

 {
   "name": "figma-tokens",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A tool for generate Figma design tokens as variables",
@@ -5,0 +5,0 @@ "main": "bin/figma-tokens.js",

src/gen.js

@@ -34,3 +34,2 @@ /* eslint-disable no-console */
 const genTokens = (apikey, id) => {
-  // eslint-disable-next-line no-console
   const spinner = ora('🚀 Connecting with Figma...\n').start()
@@ -57,3 +56,3 @@
 
-          const tokens = {
+          genFile({
             ...getColors('Colors', figmaTree),
@@ -65,6 +64,4 @@ ...getSpacing('Spacings', figmaTree),
             ...getBreakpoints('Breakpoints', figmaTree)
-          }
+          })
 
-          genFile(tokens)
-
           spinner.stop()
@@ -74,3 +71,4 @@ }
       .catch(err => {
-        throw new Error(`\x1b[31m\n\n❌ ${err}\n\n`)
+        spinner.stop()
+        throw new Error(`\x1b[31m\n\n❌ ${err}\n`)
       })
@@ -77,0 +75,0 @@ } catch (err) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16630

increased by0.82%

Lines of code

433

increased by5.87%

No dependency changes