@property javascript file for typed definitions

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')
 

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,
+    }
+  })