tokenize-css 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# tokenize-css
+
+CLI tool to convert Design Tokens (Token Studio) to CSS variables.
+
+## Installation
+```bash
+npm install -g tokenize-css
+```
+
+## Usage
+```bash
+tokenize <input> <output> [options]
+```
+
+### Examples
+```bash
+# Basic usage
+tokenize tokens.json dist
+
+# With full path
+tokenize tokens.json "/path/to/output"
+
+# Specify source type
+tokenize tokens.json dist --source token-studio
+```
+
+### Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `-s, --source <type>` | Source type (token-studio, figma-variables) | token-studio |
+| `-V, --version` | Output version | |
+| `-h, --help` | Display help | |
+
+## Supported Sources
+
+- ✅ Token Studio
+- 🔜 Figma Variables
+
+## Output Files
+
+- `colors.css` - Color tokens
+- `spacing.css` - Spacing tokens
+- `typography.css` - Typography tokens
+- `shadows.css` - Shadow tokens
+- `tokens.css` - All tokens combined
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import StyleDictionary from 'style-dictionary';
+import chalk from 'chalk';
+import { resolve } from 'path';
+import { createTokenStudioConfig } from '../src/config/token-studio.js';
+
+async function build(input, output, source = 'token-studio') {
+  console.log(chalk.blue.bold('\n🎨 tokenize-css\n'));
+  console.log(chalk.gray(`Source: ${source}`));
+  console.log(chalk.gray(`Input: ${input}`));
+  console.log(chalk.gray(`Output: ${output}\n`));
+
+  let config;
+
+  if (source === 'token-studio') {
+    config = createTokenStudioConfig(input, output);
+  } else {
+    console.error(chalk.red(`❌ Source "${source}" not supported yet`));
+    process.exit(1);
+  }
+
+  try {
+    const sd = new StyleDictionary(config);
+    await sd.buildAllPlatforms();
+    console.log(chalk.green('✅ Done!\n'));
+  } catch (error) {
+    console.error(chalk.red(`❌ Error: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+program
+  .name('tokenize')
+  .description('Convert Design Tokens to CSS variables')
+  .version('0.1.0');
+
+program
+  .argument('<input>', 'Input tokens file')
+  .argument('<output>', 'Output directory')
+  .option('-s, --source <type>', 'Source type (token-studio, figma-variables)', 'token-studio')
+  .action(async (input, output, options) => {
+    const inputPath = resolve(process.cwd(), input);
+    const outputPath = resolve(process.cwd(), output);
+    await build(inputPath, outputPath, options.source);
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "tokenize-css",
+  "version": "0.1.0",
+  "description": "CLI tool to convert Design Tokens (Token Studio, Figma Variables) to CSS variables using Style Dictionary",
+  "type": "module",
+  "bin": {
+    "tokenize": "./bin/cli.js"
+  },
+  "main": "./src/index.js",
+  "files": [
+    "bin",
+    "src"
+  ],
+  "scripts": {
+    "start": "node bin/cli.js",
+    "test": "node --test",
+    "prepublishOnly": "node bin/cli.js --help"
+  },
+  "keywords": [
+    "design-tokens",
+    "design-system",
+    "css-variables",
+    "css",
+    "token-studio",
+    "figma",
+    "figma-tokens",
+    "style-dictionary",
+    "cli",
+    "tokens",
+    "variables"
+  ],
+  "author": "Aly Zidan",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlyZidan/tokenize-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AlyZidan/tokenize-css/issues"
+  },
+  "homepage": "https://github.com/AlyZidan/tokenize-css#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "style-dictionary": "^4.3.0"
+  }
+}

package/src/config/token-studio.js

@@ -0,0 +1,39 @@
+import StyleDictionary from 'style-dictionary';
+
+export function createTokenStudioConfig(input, output) {
+  return {
+    source: [input],
+    platforms: {
+      css: {
+        transformGroup: 'css',
+        buildPath: output.endsWith('/') ? output : `${output}/`,
+        files: [
+          {
+            destination: 'colors.css',
+            format: 'css/variables',
+            filter: (token) => token.type === 'color'
+          },
+          {
+            destination: 'spacing.css',
+            format: 'css/variables',
+            filter: (token) => token.type === 'spacing'
+          },
+          {
+            destination: 'typography.css',
+            format: 'css/variables',
+            filter: (token) => ['fontFamilies', 'fontSizes', 'fontWeights', 'lineHeights'].includes(token.type)
+          },
+          {
+            destination: 'shadows.css',
+            format: 'css/variables',
+            filter: (token) => token.type === 'boxShadow'
+          },
+          {
+            destination: 'tokens.css',
+            format: 'css/variables'
+          }
+        ]
+      }
+    }
+  };
+}