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