Adds Tailwind as an export option

src/export/export-chakra.ts

@@ -1,14 +1,13 @@
-import fs from 'fs-extra';
-import ejs from 'ejs';
 import path from 'path';
 import prettier from 'prettier';
 import svgToJSX from 'svg-to-jsx';
 import * as svgson from 'svgson';
-import type { Data } from 'ejs';
 
 import { version } from '../../package.json';
 import type { OptimisedSVG, Icons, Tokens } from '../utils/types';
 
+import { renderTemplate } from './templating';
+
 const prettierConfigFile = path.resolve(__dirname, '../../.prettierrc');
 const templateDir = path.resolve(__dirname, '../../templates');
 
@@ -19,18 +18,6 @@ const formatFileContents = async (contents: string) => {
   });
 };
 
-// Render an EJS template with the given data, format it with Prettier and write the result to the output path
-const renderTemplate = async (
-  templatePath: string,
-  outputPath: string,
-  data: Data
-) => {
-  const contents = await ejs
-    .renderFile(templatePath, data)
-    .then((str) => formatFileContents(str));
-  return fs.outputFile(outputPath, contents);
-};
-
 type ChakraIcon = {
   name: string;
   viewBox: string;
@@ -162,12 +149,17 @@ export default async function exportChakraFromTokens(
   // Render and save all the templates simultaneously
   await Promise.all(
     templates.map((template) => {
-      return renderTemplate(template.input, template.output, {
-        chakra,
-        version,
-        figmaFileKey,
-        versionDescription,
-      });
+      return renderTemplate(
+        template.input,
+        template.output,
+        {
+          chakra,
+          version,
+          figmaFileKey,
+          versionDescription,
+        },
+        formatFileContents
+      );
     })
   );
 }

src/export/export-tailwind.ts

@@ -0,0 +1,63 @@
+import fs from 'fs-extra';
+import path from 'path';
+import prettier from 'prettier';
+
+import { version } from '../../package.json';
+import { renderTemplate } from './templating';
+
+import type { Tokens } from '../utils/types';
+
+const prettierConfigFile = path.resolve(__dirname, '../../.prettierrc');
+const templateDir = path.resolve(__dirname, '../../templates');
+
+// Run Prettier on JS code using the config file
+const formatFileContents = async (contents: string) => {
+  return prettier.resolveConfig(prettierConfigFile).then((options) => {
+    return prettier.format(contents, { ...options, parser: 'babel' });
+  });
+};
+
+export default async function exportJsonFromTokens(
+  tokens: Tokens,
+  outputDir: string,
+  figmaFileKey: string,
+  versionDescription: string
+) {
+  await fs.mkdirs(outputDir);
+
+  const tailwind = {
+    content: [],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  };
+
+  // render the main config
+  await renderTemplate(
+    `${templateDir}/tailwind.config.js.ejs`,
+    `${outputDir}/tailwind.config.js`,
+    {
+      tailwind,
+      version,
+      figmaFileKey,
+      versionDescription,
+    },
+    formatFileContents
+  );
+
+  // and the local edits file if it doesn't already exist.
+  if (!fs.existsSync(`${outputDir}/tailwind.config.local.js`)) {
+    await renderTemplate(
+      `${templateDir}/tailwind.config.local.js.ejs`,
+      `${outputDir}/tailwind.config.local.js`,
+      {
+        tailwind,
+        version,
+        figmaFileKey,
+        versionDescription,
+      },
+      formatFileContents
+    );
+  }
+}

src/export/index.ts

@@ -1,2 +1,3 @@
 export { default as exportChakra } from './export-chakra';
 export { default as exportJson } from './export-json';
+export { default as exportTailwind } from './export-tailwind';

src/export/templating.ts

@@ -0,0 +1,17 @@
+import fs from 'fs-extra';
+import ejs from 'ejs';
+
+import type { Data } from 'ejs';
+
+// Render an EJS template with the given data, format it with Prettier and write the result to the output path
+export const renderTemplate = async (
+  templatePath: string,
+  outputPath: string,
+  data: Data,
+  formatFileContents: (s: string) => Promise<string>
+) => {
+  const contents = await ejs
+    .renderFile(templatePath, data)
+    .then((str) => formatFileContents(str));
+  return fs.outputFile(outputPath, contents);
+};

src/generate.ts

@@ -12,7 +12,7 @@ import type {
 
 import getConfig from './utils/config';
 import { getFile, getVersions } from './api';
-import { exportChakra, exportJson } from './export';
+import { exportChakra, exportJson, exportTailwind } from './export';
 import importTokensFromFigma from './import/import-figma';
 
 import type { Tokens } from './utils/types';
@@ -163,3 +163,22 @@ export const generateJson = async (
 
   return generator(exporter, apiKeyOverride, fileUrlOverride, latestChanges);
 };
+
+export const generateTailwind = async (
+  outputDir: string,
+  apiKeyOverride?: string,
+  fileUrlOverride?: string,
+  latestChanges?: boolean
+) => {
+  // Generate a Tailwind config JS file using the tokens
+  const exporter: Exporter = async (tokens, fileKey, versionDescription) => {
+    const relativeDir = path.relative(process.cwd(), outputDir);
+    console.log(
+      `Exporting Tailwind config file to "${relativeDir}/tailwind.config.js"...`
+        .bold
+    );
+    await exportTailwind(tokens, outputDir, fileKey, versionDescription);
+  };
+
+  return generator(exporter, apiKeyOverride, fileUrlOverride, latestChanges);
+};

src/index.ts

@@ -2,7 +2,7 @@
 import { Command } from 'commander';
 import path from 'path';
 
-import { generateChakra, generateJson } from './generate';
+import { generateChakra, generateJson, generateTailwind } from './generate';
 import { version } from '../package.json';
 
 const program = new Command();
@@ -52,6 +52,26 @@ program
     });
   });
 
+program
+  .command('generate-tailwind')
+  .description('output a Tailwind config file')
+  .storeOptionsAsProperties(true)
+  .option('-o, --output <dir>', 'specify the output directory', './')
+  .option('--api-key <key>', 'specify the Figma API key')
+  .option('--file-url <url>', 'specify the URL of the Figma file')
+  .option(
+    '--latest-changes',
+    'use the most current, up-to-date version of the Figma file'
+  )
+  .action(async (cmd) => {
+    const { output, apiKey, fileUrl, latestChanges } = cmd.opts();
+    const outputDir = path.resolve(process.cwd(), output);
+    await generateTailwind(outputDir, apiKey, fileUrl, latestChanges).catch(
+      (e) => {
+        console.error(e);
+      }
+    );
+  });
 program.parseAsync(process.argv);
 if (!process.argv.slice(2).length) {
   program.outputHelp();

templates/tailwind.config.js.ejs

@@ -0,0 +1,8 @@
+// AUTO-GENERATED - File generated by figma2theme <%- version %>, manual edits may be overwritten
+  // Figma file: https://www.figma.com/file/<%- figmaFileKey %>
+    // File version selected: <%- versionDescription %>
+      // Generated at: <%- new Date().toString() %>
+
+        const withLocalChanges = require('./tailwind.config.local');
+
+        module.exports = withLocalChanges(<%- JSON.stringify(tailwind) %>);

templates/tailwind.config.local.js.ejs

@@ -0,0 +1,5 @@
+// This file should contain any local edits that need to be made to the tailwind config
+// eg any additional plugins or project specific settings.
+// The figma2theme setup expects it, if you don't need it just leave it as is
+
+module.exports = (tailwindConfig) => tailwindConfig;