stx/examples/build-css.ts at main · stacksjs/stx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// Build script for generating crosswind CSS for voide app
import { buildAndWrite, defaultConfig, tailwindPreflight } from '/Users/glennmichaeltorregosa/Documents/Projects/crosswind/packages/crosswind/src/index.ts'
import type { Preflight } from '/Users/glennmichaeltorregosa/Documents/Projects/crosswind/packages/crosswind/src/types.ts'

// Custom form reset preflight for dark mode apps
// This allows utility classes to properly style form elements
const darkFormReset: Preflight = {
  getCSS: () => `
/* Dark Mode Form Reset - allows utility classes to work */
input,
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border-color: currentColor;
  border-width: 0;
  border-radius: 0;
  padding: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

input::placeholder,
textarea::placeholder {
  color: inherit;
  opacity: 0.5;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}
`.trim(),
}

const result = await buildAndWrite({
  ...defaultConfig,
  content: ['./components/**/*.stx', './voide-refactored.stx'],
  output: './dist/voide.css',
  minify: false,
  preflights: [tailwindPreflight, darkFormReset],
  safelist: [
    'border-solid',
    'bg-black',
    'opacity-60',
    'appearance-none',
  ],
})

console.log(`Generated ${result.classes.size} classes in ${result.duration}ms`)
console.log(`Output: ./dist/voide.css`)