gitech

1
import {readFileSync} from 'node:fs';
2
import {env} from 'node:process';
3
import {parse} from 'postcss';
4

5
const isProduction = env.NODE_ENV !== 'development';
6

7
function extractRootVars(css) {
8
  const root = parse(css);
9
  const vars = new Set();
10
  root.walkRules((rule) => {
11
    if (rule.selector !== ':root') return;
12
    rule.each((decl) => {
13
      if (decl.value && decl.prop.startsWith('--')) {
14
        vars.add(decl.prop.substring(2));
15
      }
16
    });
17
  });
18
  return Array.from(vars);
19
}
20

21
const vars = extractRootVars([
22
  readFileSync(new URL('web_src/css/themes/theme-gitea-light.css', import.meta.url), 'utf8'),
23
  readFileSync(new URL('web_src/css/themes/theme-gitea-dark.css', import.meta.url), 'utf8'),
24
].join('\n'));
25

26
export default {
27
  prefix: 'tw-',
28
  important: true, // the frameworks are mixed together, so tailwind needs to override other framework's styles
29
  content: [
30
    isProduction && '!./templates/devtest/**/*',
31
    isProduction && '!./web_src/js/standalone/devtest.js',
32
    '!./templates/swagger/v1_json.tmpl',
33
    '!./templates/user/auth/oidc_wellknown.tmpl',
34
    '!**/*_test.go',
35
    '!./modules/{public,options,templates}/bindata.go',
36
    './{build,models,modules,routers,services}/**/*.go',
37
    './templates/**/*.tmpl',
38
    './web_src/js/**/*.{js,vue}',
39
  ].filter(Boolean),
40
  blocklist: [
41
    // classes that don't work without CSS variables from "@tailwind base" which we don't use
42
    'transform', 'shadow', 'ring', 'blur', 'grayscale', 'invert', '!invert', 'filter', '!filter',
43
    'backdrop-filter',
44
    // we use double-class tw-hidden defined in web_src/css/helpers.css for increased specificity
45
    'hidden',
46
    // unneeded classes
47
    '[-a-zA-Z:0-9_.]',
48
  ],
49
  theme: {
50
    colors: {
51
      // make `tw-bg-red` etc work with our CSS variables
52
      ...Object.fromEntries(vars.filter((prop) => prop.startsWith('color-')).map((prop) => {
53
        const color = prop.substring(6);
54
        return [color, `var(--color-${color})`];
55
      })),
56
      inherit: 'inherit',
57
      current: 'currentcolor',
58
      transparent: 'transparent',
59
    },
60
    borderRadius: {
61
      'none': '0',
62
      'sm': '2px',
63
      'DEFAULT': 'var(--border-radius)', // 4px
64
      'md': 'var(--border-radius-medium)', // 6px
65
      'lg': '8px',
66
      'xl': '12px',
67
      '2xl': '16px',
68
      '3xl': '24px',
69
      'full': 'var(--border-radius-circle)', // 50%
70
    },
71
    fontFamily: {
72
      sans: 'var(--fonts-regular)',
73
      mono: 'var(--fonts-monospace)',
74
    },
75
    fontWeight: {
76
      light: 'var(--font-weight-light)',
77
      normal: 'var(--font-weight-normal)',
78
      medium: 'var(--font-weight-medium)',
79
      semibold: 'var(--font-weight-semibold)',
80
      bold: 'var(--font-weight-bold)',
81
    },
82
    fontSize: { // not using `rem` units because our root is currently 14px
83
      'xs': '12px',
84
      'sm': '14px',
85
      'base': '16px',
86
      'lg': '18px',
87
      'xl': '20px',
88
      '2xl': '24px',
89
      '3xl': '30px',
90
      '4xl': '36px',
91
      '5xl': '48px',
92
      '6xl': '60px',
93
      '7xl': '72px',
94
      '8xl': '96px',
95
      '9xl': '128px',
96
      ...Object.fromEntries(Array.from({length: 100}, (_, i) => {
97
        return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
98
      })),
99
    },
100
  },
101
};
102