From 56fbe6cfb000048144b4d6471af3ea7644fbcbc2 Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Wed, 20 Sep 2023 21:13:56 -0700
Subject: [PATCH] working baseline

---
 build/props.js          | 11 +++++++++++
 build/to-at-property.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 build/to-at-property.js

diff --git a/build/props.js b/build/props.js
index fc8a4f06..c62c4df6 100644
--- a/build/props.js
+++ b/build/props.js
@@ -22,6 +22,7 @@ import {buildPropsStylesheet} from './to-stylesheet.js'
 import {toTokens} from './to-tokens.js'
 import {toObject} from './to-object.js'
 import {toFigmaTokens} from './to-figmatokens.js'
+import {toAtProperty} from './to-at-property.js'
 
 const [,,prefix='',useWhere,customSubject='',filePrefix=''] = process.argv
 
@@ -86,6 +87,16 @@ const figmatokensSYNC = { 'open-props': { ...figmatokens } }
 const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json')
 FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
 
+// gen @property module
+const atTokens = toAtProperty(Object.entries({
+  ...Object.assign({}, ...Object.values(individual_colors)),
+  // ...Easings,
+  ...Zindex,
+  ...Aspects,
+}))
+const atProperty = fs.createWriteStream('../open-props.typed.js')
+atProperty.end(JSON.stringify(atTokens)+'.forEach(CSS.registerProperty)', null, 2)
+
 if (!fs.existsSync('../dist'))
   fs.mkdirSync('../dist')
 
diff --git a/build/to-at-property.js b/build/to-at-property.js
new file mode 100644
index 00000000..62983105
--- /dev/null
+++ b/build/to-at-property.js
@@ -0,0 +1,31 @@
+import * as Colors from '../src/props.colors.js'
+
+const colors = Object.keys(Colors)
+  .filter(exportName => exportName !== "default")
+  .map(hueName => hueName.toLowerCase())
+
+export const toAtProperty = props => 
+  props.map(([key, token]) => {
+    let syntax
+
+    let isLength = key.includes('size')
+    let isRatio = key.includes('ratio')
+    let isEasing = key.includes('ease')
+    let isZIndex= key.includes('layer')
+    let isImage = key.includes('gradient')
+    let isColor = colors.some(color => key.includes(color))
+
+    if      (isLength) syntax = 'dimension'
+    else if (isEasing) syntax = 'cubic-bezier'
+    else if (isColor)  syntax = 'color'
+    else if (isRatio)  syntax = 'ratio'
+    else if (isImage)  syntax = 'image'
+    else if (isZIndex)  syntax = 'number'
+
+    return {
+      name: key,
+      syntax: `<${syntax}>`,
+      initialValue: token,
+      inherits: false,
+    }
+  })
\ No newline at end of file