1 | import fs from 'fs'
|
2 |
|
3 | import Animations from '../src/props.animations.js'
|
4 | import Sizes from '../src/props.sizes.js'
|
5 | import * as OpenColors from '../src/props.colors.js'
|
6 | import * as ColorsHSL from '../src/props.colors-hsl.js'
|
7 | import Fonts from '../src/props.fonts.js'
|
8 | import Borders from '../src/props.borders.js'
|
9 | import Aspects from '../src/props.aspects.js'
|
10 | import Easings from '../src/props.easing.js'
|
11 | import Gradients from '../src/props.gradients.js'
|
12 | import Shadows from '../src/props.shadows.js'
|
13 | import SVG from '../src/props.svg.js'
|
14 | import Zindex from '../src/props.zindex.js'
|
15 |
|
16 | import {buildPropsStylesheet} from './to-stylesheet.js'
|
17 | import {toTokens} from './to-tokens.js'
|
18 | import {toFigmaTokens} from './to-figmatokens.js'
|
19 |
|
20 | const [,,prefix='',useWhere,customSubject='',filePrefix=''] = process.argv
|
21 |
|
22 | const subject = customSubject === '' ? 'html' : customSubject
|
23 | const selector = useWhere === 'true' ? `:where(${subject})` : subject
|
24 | const pfx = filePrefix ? filePrefix + '.' : ''
|
25 |
|
26 | const mainbundle = {
|
27 | [`${pfx}props.fonts.css`]: Fonts,
|
28 | [`${pfx}props.sizes.css`]: Sizes,
|
29 | [`${pfx}props.easing.css`]: Easings,
|
30 | [`${pfx}props.zindex.css`]: Zindex,
|
31 | [`${pfx}props.shadows.css`]: Shadows,
|
32 | [`${pfx}props.aspects.css`]: Aspects,
|
33 | [`${pfx}props.colors.css`]: OpenColors.default,
|
34 |
|
35 | [`${pfx}props.gradients.css`]: Gradients,
|
36 | [`${pfx}props.animations.css`]: Animations,
|
37 | [`${pfx}props.borders.css`]: Borders,
|
38 | }
|
39 |
|
40 | const individual_colors = {
|
41 | [`${pfx}props.gray.css`]: OpenColors.Gray,
|
42 | [`${pfx}props.red.css`]: OpenColors.Red,
|
43 | [`${pfx}props.pink.css`]: OpenColors.Pink,
|
44 | [`${pfx}props.grape.css`]: OpenColors.Grape,
|
45 | [`${pfx}props.violet.css`]: OpenColors.Violet,
|
46 | [`${pfx}props.indigo.css`]: OpenColors.Indigo,
|
47 | [`${pfx}props.blue.css`]: OpenColors.Blue,
|
48 | [`${pfx}props.cyan.css`]: OpenColors.Cyan,
|
49 | [`${pfx}props.teal.css`]: OpenColors.Teal,
|
50 | [`${pfx}props.green.css`]: OpenColors.Green,
|
51 | [`${pfx}props.lime.css`]: OpenColors.Lime,
|
52 | [`${pfx}props.yellow.css`]: OpenColors.Yellow,
|
53 | [`${pfx}props.orange.css`]: OpenColors.Orange,
|
54 | }
|
55 |
|
56 | const individual_colors_hsl = {
|
57 | [`${pfx}props.gray-hsl.css`]: ColorsHSL.Gray,
|
58 | [`${pfx}props.red-hsl.css`]: ColorsHSL.Red,
|
59 | [`${pfx}props.pink-hsl.css`]: ColorsHSL.Pink,
|
60 | [`${pfx}props.grape-hsl.css`]: ColorsHSL.Grape,
|
61 | [`${pfx}props.violet-hsl.css`]: ColorsHSL.Violet,
|
62 | [`${pfx}props.indigo-hsl.css`]: ColorsHSL.Indigo,
|
63 | [`${pfx}props.blue-hsl.css`]: ColorsHSL.Blue,
|
64 | [`${pfx}props.cyan-hsl.css`]: ColorsHSL.Cyan,
|
65 | [`${pfx}props.teal-hsl.css`]: ColorsHSL.Teal,
|
66 | [`${pfx}props.green-hsl.css`]: ColorsHSL.Green,
|
67 | [`${pfx}props.lime-hsl.css`]: ColorsHSL.Lime,
|
68 | [`${pfx}props.yellow-hsl.css`]: ColorsHSL.Yellow,
|
69 | [`${pfx}props.orange-hsl.css`]: ColorsHSL.Orange,
|
70 | }
|
71 |
|
72 |
|
73 | const jsonbundle = Object.entries({
|
74 | ...Object.assign({}, ...Object.values(individual_colors)),
|
75 | ...Sizes,
|
76 | ...Easings,
|
77 | ...Zindex,
|
78 | ...Aspects,
|
79 | ...Gradients,
|
80 | ...Borders,
|
81 | }).reverse()
|
82 |
|
83 | const designtokens = toTokens(jsonbundle)
|
84 | const JSONtokens = fs.createWriteStream('../open-props.tokens.json')
|
85 | JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2))
|
86 |
|
87 |
|
88 | const figmatokens = toFigmaTokens(jsonbundle)
|
89 | const FigmaTokens = fs.createWriteStream('../open-props.figma-tokens.json')
|
90 | FigmaTokens.end(JSON.stringify(figmatokens, null, 2))
|
91 |
|
92 | const figmatokensSYNC = { 'open-props': { ...figmatokens } }
|
93 | const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json')
|
94 | FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
|
95 |
|
96 |
|
97 | Object.entries({...mainbundle, ...individual_colors, ...individual_colors_hsl}).forEach(([filename, props]) => {
|
98 | buildPropsStylesheet({filename, props}, {selector, prefix})
|
99 | })
|
100 |
|
101 |
|
102 | buildPropsStylesheet({
|
103 | filename: pfx + 'props.colors-hsl.css',
|
104 | props: ColorsHSL.default},
|
105 | {selector, prefix}
|
106 | )
|
107 |
|
108 |
|
109 | const entry = fs.createWriteStream(`../src/${pfx}index.css`)
|
110 | entry.write(`@import 'props.media.css';
|
111 | `)
|
112 | Object.keys(mainbundle).forEach(filename => {
|
113 | entry.write(`@import '${filename}';\n`)
|
114 | })
|
115 | entry.end() |
\ | No newline at end of file |