Add tailwindcss (go-gitea#29357)

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 <[email protected]>
5shekel · Feb 25, 2024 · f4b9257 · f4b9257
1 parent 4ccf5ab
commit f4b9257
Show file tree

Hide file tree

Showing 9 changed files with 530 additions and 58 deletions.
diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
@@ -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

diff --git a/Makefile b/Makefile
@@ -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
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -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',
+    },
+  },
+};
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
@@ -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" .}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -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);
 }

diff --git a/web_src/css/index.css b/web_src/css/index.css
@@ -59,4 +59,6 @@
 @import "./explore.css";
 @import "./review.css";
 @import "./actions.css";
+
+@tailwind utilities;
 @import "./helpers.css";
diff --git a/webpack.config.js b/webpack.config.js
@@ -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)],
+              },
+            },
+          }
         ],
       },
       {