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 Colors 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 | import MaskEdges from '../src/props.masks.edges.js'
|
16 | import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
|
17 |
|
18 | import {buildPropsStylesheet} from './to-stylesheet.js'
|
19 | import {toTokens} from './to-tokens.js'
|
20 | import {toObject} from './to-object.js'
|
21 | import {toFigmaTokens} from './to-figmatokens.js'
|
22 |
|
23 | const [,,prefix='',useWhere,customSubject='',filePrefix=''] = process.argv
|
24 |
|
25 | const subject = customSubject === '' ? 'html' : customSubject
|
26 | const selector = useWhere === 'true' ? `:where(${subject})` : subject
|
27 | const pfx = filePrefix ? filePrefix + '.' : ''
|
28 |
|
29 | const mainbundle = {
|
30 | [`${pfx}props.fonts.css`]: Fonts,
|
31 | [`${pfx}props.sizes.css`]: Sizes,
|
32 | [`${pfx}props.easing.css`]: Easings,
|
33 | [`${pfx}props.zindex.css`]: Zindex,
|
34 | [`${pfx}props.shadows.css`]: Shadows,
|
35 | [`${pfx}props.aspects.css`]: Aspects,
|
36 | [`${pfx}props.colors.css`]: Colors.default,
|
37 |
|
38 | [`${pfx}props.gradients.css`]: Gradients,
|
39 | [`${pfx}props.animations.css`]: Animations,
|
40 | [`${pfx}props.borders.css`]: Borders,
|
41 | }
|
42 |
|
43 | const individual_colors = Object.keys(Colors)
|
44 | .filter(exportName => exportName !== "default")
|
45 | .reduce((root, hueName) => ({
|
46 | ...root,
|
47 | [`${pfx}props.${hueName.toLowerCase()}.css`]: Colors[hueName]
|
48 | }), {})
|
49 |
|
50 | const individual_colors_hsl = Object.keys(ColorsHSL)
|
51 | .filter(exportName => exportName !== "default")
|
52 | .reduce((root, hueName) => ({
|
53 | ...root,
|
54 | [`${pfx}props.${hueName.toLowerCase()}-hsl.css`]: ColorsHSL[hueName]
|
55 | }), {})
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | const jsonbundle = Object.entries({
|
64 | ...Object.assign({}, ...Object.values(individual_colors)),
|
65 | ...Sizes,
|
66 | ...Easings,
|
67 | ...Zindex,
|
68 | ...Aspects,
|
69 | ...Gradients,
|
70 | ...Borders,
|
71 | }).reverse()
|
72 |
|
73 | const designtokens = toTokens(jsonbundle)
|
74 | const JSONtokens = fs.createWriteStream('../open-props.tokens.json')
|
75 | JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2))
|
76 |
|
77 |
|
78 | const figmatokens = toFigmaTokens(jsonbundle)
|
79 | const FigmaTokens = fs.createWriteStream('../open-props.figma-tokens.json')
|
80 | FigmaTokens.end(JSON.stringify(figmatokens, null, 2))
|
81 |
|
82 | const figmatokensSYNC = { 'open-props': { ...figmatokens } }
|
83 | const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json')
|
84 | FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
|
85 |
|
86 | if (!fs.existsSync('../dist'))
|
87 | fs.mkdirSync('../dist')
|
88 |
|
89 | const JS = fs.createWriteStream('../dist/open-props.js')
|
90 | JS.end(`var OpenProps = ${JSON.stringify(toObject(), null, 2)}`)
|
91 |
|
92 | const ES = fs.createWriteStream('../dist/open-props.module.js')
|
93 | ES.end(`export default ${JSON.stringify(toObject(), null, 2)}`)
|
94 |
|
95 | const CJS = fs.createWriteStream('../dist/open-props.cjs')
|
96 | CJS.end(`module.exports = ${JSON.stringify(toObject(), null, 2)}`)
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 | Object.entries({
|
104 | ...mainbundle,
|
105 | ...individual_colors,
|
106 | ...individual_colors_hsl,
|
107 |
|
108 | }).forEach(([filename, props]) => {
|
109 | buildPropsStylesheet({filename, props}, {selector, prefix})
|
110 | })
|
111 |
|
112 |
|
113 | buildPropsStylesheet({
|
114 | filename: pfx + 'props.colors-hsl.css',
|
115 | props: ColorsHSL.default},
|
116 | {selector, prefix}
|
117 | )
|
118 |
|
119 |
|
120 | const entry = fs.createWriteStream(`../src/${pfx}index.css`)
|
121 | entry.write(`@import 'props.media.css';
|
122 | `)
|
123 | Object.keys(mainbundle).forEach(filename => {
|
124 | entry.write(`@import '${filename}';\n`)
|
125 | })
|
126 | entry.end() |
\ | No newline at end of file |