lianguan/gitea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tailwindcss (#29357)

Browse Source 
This will get tailwindcss working on a basic level. It provides only the
utility classes, e.g. no tailwind base which we don't need because we
have our own CSS reset. Without the base, we also do not have their CSS
variables so a small amount of features do not work and I removed the
generated classes for them.

***Note for future developers: This currently uses a `tw-` prefix, so we
use it like `tw-p-3`.***

<details>
<summary>Currently added CSS, all false-positives</summary>

```
.\!visible{

    visibility: visible !important
}

.visible{

    visibility: visible
}

.invisible{

    visibility: hidden
}

.collapse{

    visibility: collapse
}

.static{

    position: static
}

.\!fixed{

    position: fixed !important
}

.absolute{

    position: absolute
}

.relative{

    position: relative
}

.sticky{

    position: sticky
}

.left-10{

    left: 2.5rem
}

.isolate{

    isolation: isolate
}

.float-right{

    float: right
}

.float-left{

    float: left
}

.mr-2{

    margin-right: 0.5rem
}

.mr-3{

    margin-right: 0.75rem
}

.\!block{

    display: block !important
}

.block{

    display: block
}

.inline-block{

    display: inline-block
}

.inline{

    display: inline
}

.flex{

    display: flex
}

.inline-flex{

    display: inline-flex
}

.\!table{

    display: table !important
}

.inline-table{

    display: inline-table
}

.table-caption{

    display: table-caption
}

.table-cell{

    display: table-cell
}

.table-column{

    display: table-column
}

.table-column-group{

    display: table-column-group
}

.table-footer-group{

    display: table-footer-group
}

.table-header-group{

    display: table-header-group
}

.table-row-group{

    display: table-row-group
}

.table-row{

    display: table-row
}

.flow-root{

    display: flow-root
}

.inline-grid{

    display: inline-grid
}

.contents{

    display: contents
}

.list-item{

    display: list-item
}

.\!hidden{

    display: none !important
}

.hidden{

    display: none
}

.flex-shrink{

    flex-shrink: 1
}

.shrink{

    flex-shrink: 1
}

.flex-grow{

    flex-grow: 1
}

.grow{

    flex-grow: 1
}

.border-collapse{

    border-collapse: collapse
}

.select-all{

    user-select: all
}

.resize{

    resize: both
}

.flex-wrap{

    flex-wrap: wrap
}

.overflow-visible{

    overflow: visible
}

.rounded{

    border-radius: 0.25rem
}

.border{

    border-width: 1px
}

.text-justify{

    text-align: justify
}

.uppercase{

    text-transform: uppercase
}

.lowercase{

    text-transform: lowercase
}

.capitalize{

    text-transform: capitalize
}

.italic{

    font-style: italic
}

.text-red{

    color: var(--color-red)
}

.text-shadow{

    color: var(--color-shadow)
}

.underline{

    text-decoration-line: underline
}

.overline{

    text-decoration-line: overline
}

.line-through{

    text-decoration-line: line-through
}

.outline{

    outline-style: solid
}

.ease-in{

    transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}

.ease-in-out{

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.ease-out{

    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
```

</details>

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2024-02-25 17:46:46 +01:00 committed by GitHub
parent 4ccf5ab330
commit f4b92578b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 530 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintrc.yaml
View File

@ -98,7 +98,7 @@ rules:
at-rule-allowed-list: null
at-rule-disallowed-list: null
at-rule-empty-line-before: null
at-rule-no-unknown: true
at-rule-no-unknown: [true, {ignoreAtRules: [tailwind]}]
at-rule-no-vendor-prefix: true
at-rule-property-required-list: null
block-no-empty: true

2
Makefile
View File

@ -119,7 +119,7 @@ GO_TEST_PACKAGES ?= $(filter-out $(shell $(GO) list code.gitea.io/gitea/models/m
FOMANTIC_WORK_DIR := web_src/fomantic
WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
WEBPACK_CONFIGS := webpack.config.js
WEBPACK_CONFIGS := webpack.config.js tailwind.config.js
WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack

514
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -23,6 +23,7 @@
"chartjs-plugin-zoom": "2.0.1",
"clippie": "4.0.6",
"css-loader": "6.10.0",
"css-variables-parser": "1.0.1",
"dayjs": "1.11.10",
"dropzone": "6.0.0-beta.2",
"easymde": "2.18.0",
@ -40,9 +41,12 @@
"monaco-editor": "0.46.0",
"monaco-editor-webpack-plugin": "7.1.0",
"pdfobject": "2.3.0",
"postcss": "8.4.35",
"postcss-loader": "8.1.0",
"pretty-ms": "9.0.0",
"sortablejs": "1.15.2",
"swagger-ui-dist": "5.11.6",
"tailwindcss": "3.4.1",
"throttle-debounce": "5.0.0",
"tinycolor2": "1.6.0",
"tippy.js": "6.3.7",

39
tailwind.config.js Normal file
View File

@ -0,0 +1,39 @@
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-',
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',
},
},
};

6
templates/devtest/gitea-ui.tmpl
View File

@ -275,6 +275,12 @@
<div>ps: no JS code attached, so just a layout</div>
{{template "shared/combomarkdowneditor" .}}
</div>
<h1>Tailwind CSS Demo</h1>
<div>
<button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button>
</div>
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
</div>
{{template "base/footer" .}}

8
web_src/css/base.css
View File

@ -29,6 +29,14 @@
--fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
}
*, ::before, ::after {
/* these are needed for tailwind borders to work because we do not load tailwind's base
https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
border-width: 0;
border-style: solid;
border-color: currentcolor;
}
textarea {
font-family: var(--fonts-regular);
}

2
web_src/css/index.css
View File

@ -59,4 +59,6 @@
@import "./explore.css";
@import "./review.css";
@import "./actions.css";
@tailwind utilities;
@import "./helpers.css";

11
webpack.config.js
View File

@ -11,6 +11,8 @@ import webpack from 'webpack';
import {fileURLToPath} from 'node:url';
import {readFileSync} from 'node:fs';
import {env} from 'node:process';
import tailwindcss from 'tailwindcss';
import tailwindConfig from './tailwind.config.js';
const {EsbuildPlugin} = EsBuildLoader;
const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
@ -145,6 +147,15 @@ export default {
import: {filter: filterCssImport},
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
map: false, // https://github.com/postcss/postcss/issues/1914
plugins: [tailwindcss(tailwindConfig)],
},
},
}
],
},
{