refactor(ui-scripts): trying to fix JSON error bug

Author: matyasf

package-lock.json

@@ -23,6 +23,7 @@
  */
 
 import path from 'path'
+import fs from 'fs'
 import { error } from '@instructure/command-utils'
 import { handleMapJSTokensToSource } from '../utils/handle-map-js-tokens-to-source.js'
 import { handleGenerateTokens } from '../utils/handle-generate-tokens.js'
@@ -91,13 +92,18 @@ export default {
         : path.join(themePath, outputDir)
       const sourcePath = path.join(outputPath, 'source.json')
       // eslint-disable-next-line no-console
-      console.log('!!!!! starting', themeKey, sourceTokens)
-      // eslint-disable-next-line no-console
-      console.log('!!!!tokens', JSON.stringify(tokens).substring(0, 600))
+      console.log(
+        '!!!!! starting',
+        themeKey,
+        sourceTokens,
+        outputPath,
+        sourcePath,
+        fs.existsSync(sourcePath)
+      )
       // eslint-disable-next-line no-console
       console.log(
         '!!!!styleDictionarySource',
-        JSON.stringify(styleDictionarySource).substring(0, 600)
+        JSON.stringify(styleDictionarySource).substring(0, 400)
       )
       generators.push(
         handleGenerateTokens({

packages/ui-scripts/lib/build/generate-all-tokens.js

@@ -22,19 +22,70 @@
  * SOFTWARE.
  */
 
-import fse from 'fs-extra'
 import path from 'path'
 import StyleDictionary from 'style-dictionary'
+import fs from 'fs'
 
 export async function handleGenerateTokens({
   themeKey,
   sourcePath,
   styleDictionarySource,
   outputPath
 }) {
+  const dir = path.dirname(sourcePath)
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true })
+  }
+  fs.writeFileSync(sourcePath, JSON.stringify(styleDictionarySource))
+  //fse.outputFileSync(sourcePath, JSON.stringify(styleDictionarySource))
+  // eslint-disable-next-line no-console
+  console.log(
+    '!!!!handleGenerateTokens',
+    sourcePath,
+    fs.existsSync(sourcePath),
+    JSON.stringify(styleDictionarySource)?.substring(0, 400)
+  )
+  const dictionary = new StyleDictionary({
+    source: [sourcePath],
+    platforms: {
+      scss: {
+        transformGroup: 'scss',
+        prefix: 'instui-' + themeKey,
+        buildPath: path.join(outputPath, 'scss/'),
+        files: [
+          {
+            destination: '_variables.scss',
+            format: 'scss/variables'
+          }
+        ]
+      }
+      // TODO: Revisit the best way to distribute tokens for vanilla JS
+      // js: {
+      //   transformGroup: 'js',
+      //   buildPath: path.join(outputPath, 'js/'),
+      //   files: [
+      //     {
+      //       destination: 'umd.js',
+      //       format: 'javascript/umd'
+      //     },
+      //     {
+      //       destination: 'es6.js',
+      //       format: 'javascript/es6'
+      //     }
+      //   ]
+      // }
+    }
+  })
+  dictionary.buildAllPlatforms().then((builds) => {
+    return builds
+  })
+  /*
   return fse
     .outputFile(sourcePath, JSON.stringify(styleDictionarySource))
     .then(() => {
+      // eslint-disable-next-line no-console
+      console.log("!!!! init StyleDictionary", JSON.stringify(styleDictionarySource)?.substring(0, 500))
+
       const dictionary = new StyleDictionary({
         source: [sourcePath],
         platforms: {
@@ -66,11 +117,9 @@ export async function handleGenerateTokens({
           // }
         }
       })
-      // eslint-disable-next-line no-console
-      console.log('Building tokens for', themeKey)
       return dictionary.buildAllPlatforms()
     })
     .then((builds) => {
       return builds
-    })
+    })*/
 }

packages/ui-scripts/lib/utils/handle-generate-tokens.js

@@ -26,7 +26,6 @@
     "@lerna/project": "^6.4.1",
     "dotenv": "^16.4.7",
     "find-up": "^7.0.0",
-    "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
     "jscodeshift": "^0.16.1",
     "karma-cli": "^2.0.0",