75f7be2aac
As per discussion in https://github.com/go-gitea/gitea/pull/29423, I think this is the right way that does not burden developers having to think about CSS precedence which should be irrelevant with an atomic CSS framework. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit e55926ebfe88d6ee079842967dc7dccc2a9cdbf2)
40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import {readFileSync} from 'node:fs';
|
|
import {env} from 'node:process';
|
|
import {parse} from 'css-variables-parser';
|
|
|
|
const isProduction = env.NODE_ENV !== 'development';
|
|
|
|
export default {
|
|
prefix: 'tw-',
|
|
important: true, // the frameworks are mixed together, so tailwind needs to override other framework's styles
|
|
content: [
|
|
isProduction && '!./templates/devtest/**/*',
|
|
isProduction && '!./web_src/js/standalone/devtest.js',
|
|
'./templates/**/*.tmpl',
|
|
'./web_src/**/*.{js,vue}',
|
|
].filter(Boolean),
|
|
blocklist: [
|
|
// classes that don't work without CSS variables from "@tailwind base" which we don't use
|
|
'transform', 'shadow', 'ring', 'blur', 'grayscale', 'invert', '!invert', 'filter', '!filter',
|
|
'backdrop-filter',
|
|
// unneeded classes
|
|
'[-a-zA-Z:0-9_.]',
|
|
],
|
|
theme: {
|
|
colors: {
|
|
// make `tw-bg-red` etc work with our CSS variables
|
|
...Object.fromEntries(
|
|
Object.keys(parse([
|
|
readFileSync(new URL('web_src/css/themes/theme-gitea-light.css', import.meta.url), 'utf8'),
|
|
readFileSync(new URL('web_src/css/themes/theme-gitea-dark.css', import.meta.url), 'utf8'),
|
|
].join('\n'), {})).filter((prop) => prop.startsWith('color-')).map((prop) => {
|
|
const color = prop.substring(6);
|
|
return [color, `var(--color-${color})`];
|
|
})
|
|
),
|
|
inherit: 'inherit',
|
|
current: 'currentcolor',
|
|
transparent: 'transparent',
|
|
},
|
|
},
|
|
};
|