generate-tailwind-classes.ts85 lines · main
1const fs = require('fs')
2
3const color = require('./../../build/css/tw-extend/color')
4
5/**
6 *
7 * Generates a JS file with all the custom tailwind color classes
8 *
9 * @param {string} file
10 * Name of file to be created
11 */
12function writeJsFile(file: string) {
13 const backgrounds = Object.keys(color).filter((x) => x.includes('background-'))
14 const borders = Object.keys(color).filter((x) => x.includes('border-'))
15 const texts = Object.keys(color).filter((x) => x.includes('foreground-'))
16 const colors = Object.keys(color).filter(
17 (x) =>
18 !x.includes('foreground-') &&
19 !x.includes('background-') &&
20 !x.includes('border-') &&
21 !x.includes('colors-') &&
22 !x.includes('variables-')
23 )
24 const palletes = Object.keys(color).filter((x) => x.includes('colors-'))
25
26 // console.log('Example tailwind classes: ')
27
28 function santizieDefaults(x: string) {
29 // console.log(x)
30 let value = x
31 value = value.replace('-DEFAULT', '')
32 value = value.replace('background', 'bg')
33 value = value.replace('foreground', 'text')
34 value = value.replace('colors-', 'bg-')
35 value = value.toLowerCase()
36 return value
37 }
38
39 const result = {
40 background: [...backgrounds.map((x) => santizieDefaults(x))],
41 border: [...borders.map((x) => santizieDefaults(x))],
42 text: [...texts.map((x) => santizieDefaults(x))],
43 colors: [...colors.map((x) => `bg-${santizieDefaults(x)}`)],
44 palletes: [...palletes.map((x) => santizieDefaults(x))],
45 }
46
47 const fileContent = `export default ${JSON.stringify(result, null, 2)};\n`
48
49 fs.writeFileSync(file, fileContent)
50
51 console.log('saved example color classes to : ', file)
52}
53
54writeJsFile('./src/lib/tailwind-demo-classes.ts')
55
56// example output
57// ./src/lib/tailwind-demo-classes.js
58
59// module.exports = {
60// "background": [
61// "bg",
62// "bg-selection",
63// //..
64// ],
65// "border": [
66// "border",
67// "border-muted",
68// //..
69// ],
70// "text": [
71// "text",
72// "text-strong",
73// //..
74// ],
75// "colors": [
76// "bg-destructive-200",
77// "bg-destructive-300",
78// //..
79// ],
80// "palletes": [
81// "bg-black",
82// "bg-white",
83// //..
84// ]
85// }