gitea

1
import {readFileSync} from 'node:fs';
2
import {env} from 'node:process';
3
import {parse} from 'postcss';
4
import plugin from 'tailwindcss/plugin.js';
5

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

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

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

27
export default {
28
  prefix: 'tw-',
29
  important: true, // the frameworks are mixed together, so tailwind needs to override other framework's styles
30
  content: [
31
    isProduction && '!./templates/devtest/**/*',
32
    isProduction && '!./web_src/js/standalone/devtest.js',
33
    '!./templates/swagger/v1_json.tmpl',
34
    '!./templates/user/auth/oidc_wellknown.tmpl',
35
    '!**/*_test.go',
36
    '!./modules/{public,options,templates}/bindata.go',
37
    './{build,models,modules,routers,services}/**/*.go',
38
    './templates/**/*.tmpl',
39
    './web_src/js/**/*.{ts,js,vue}',
40
  ].filter(Boolean),
41
  blocklist: [
42
    // classes that don't work without CSS variables from "@tailwind base" which we don't use
43
    'transform', 'shadow', 'ring', 'blur', 'grayscale', 'invert', '!invert', 'filter', '!filter',
44
    'backdrop-filter',
45
    // we use double-class tw-hidden defined in web_src/css/helpers.css for increased specificity
46
    'hidden',
47
    // unneeded classes
48
    '[-a-zA-Z:0-9_.]',
49
  ],
50
  theme: {
51
    colors: {
52
      // make `tw-bg-red` etc work with our CSS variables
53
      ...Object.fromEntries(vars.filter((prop) => prop.startsWith('color-')).map((prop) => {
54
        const color = prop.substring(6);
55
        return [color, `var(--color-${color})`];
56
      })),
57
      inherit: 'inherit',
58
      current: 'currentcolor',
59
      transparent: 'transparent',
60
    },
61
    borderRadius: {
62
      'none': '0',
63
      'sm': '2px',
64
      'DEFAULT': 'var(--border-radius)', // 4px
65
      'md': 'var(--border-radius-medium)', // 6px
66
      'lg': '8px',
67
      'xl': '12px',
68
      '2xl': '16px',
69
      '3xl': '24px',
70
      'full': 'var(--border-radius-full)',
71
    },
72
    fontFamily: {
73
      sans: 'var(--fonts-regular)',
74
      mono: 'var(--fonts-monospace)',
75
    },
76
    fontWeight: {
77
      light: 'var(--font-weight-light)',
78
      normal: 'var(--font-weight-normal)',
79
      medium: 'var(--font-weight-medium)',
80
      semibold: 'var(--font-weight-semibold)',
81
      bold: 'var(--font-weight-bold)',
82
    },
83
    fontSize: { // not using `rem` units because our root is currently 14px
84
      'xs': '12px',
85
      'sm': '14px',
86
      'base': '16px',
87
      'lg': '18px',
88
      'xl': '20px',
89
      '2xl': '24px',
90
      '3xl': '30px',
91
      '4xl': '36px',
92
      '5xl': '48px',
93
      '6xl': '60px',
94
      '7xl': '72px',
95
      '8xl': '96px',
96
      '9xl': '128px',
97
      ...Object.fromEntries(Array.from({length: 100}, (_, i) => {
98
        return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
99
      })),
100
    },
101
  },
102
  plugins: [
103
    plugin(({addUtilities}) => {
104
      addUtilities({
105
        // tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
106
        // do not use:
107
        // * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
108
        // * ".hidden" class: it has been polluted by Fomantic UI in many cases
109
        // * inline style="display: none": it's difficult to tweak
110
        // * jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important"
111
        // only use:
112
        // * this ".tw-hidden" class
113
        // * showElem/hideElem/toggleElem functions in "utils/dom.js"
114
        '.hidden.hidden': {
115
          'display': 'none',
116
        },
117
        // proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128
118
        '.break-anywhere': {
119
          'overflow-wrap': 'anywhere',
120
        },
121
      });
122
    }),
123
  ],
124
};
125