Use CSS Variables for fonts, remove postcss-loader

- Use CSS variables for fonts, making the fonts easier to customize - Remove postcss-loader, it's not doing anything useful and is actually applying strange transforms on our CSS. Fixes: #11045
go-gitea · Oct 18, 2020 · be4eeea · be4eeea
1 parent 4077993
commit be4eeea
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 652 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -13,3 +13,4 @@ rules:
   rule-empty-line-before: null
   selector-pseudo-element-colon-notation: null
   shorthand-property-no-redundant-values: true
+  value-keyword-case: null
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -295,3 +295,15 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
 
 As of version 1.6.0 Gitea has built-in themes. The two built-in themes are, the default theme `gitea`, and a dark theme `arc-green`. To change the look of your Gitea install change the value of `DEFAULT_THEME` in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` to another one of the available options.  
 As of version 1.8.0 Gitea also has per-user themes. The list of themes a user can choose from can be configured with the `THEMES` value in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini` (defaults to `gitea` and `arc-green`, light and dark respectively)
+
+## Customizing fonts
+
+Fonts can be customized using CSS variables:
+
+```css
+:root {
+  --fonts-proportional: /* custom proportional fonts */ !important;
+  --fonts-monospace: /* custom monospace fonts */ !important;
+  --fonts-emoji: /* custom emoji fonts */ !important;
+}
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,9 +32,6 @@
     "mini-css-extract-plugin": "0.11.1",
     "monaco-editor": "0.20.0",
     "monaco-editor-webpack-plugin": "1.9.0",
-    "postcss": "7.0.32",
-    "postcss-loader": "4.0.1",
-    "postcss-preset-env": "6.7.0",
     "raw-loader": "4.0.1",
     "sortablejs": "1.10.2",
     "swagger-ui": "3.32.5",

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -1,3 +1,29 @@
+:root {
+  --fonts-proportional: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial;
+  --fonts-monospace: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console', monospace;
+  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
+}
+
+:root:lang(ja) {
+  --fonts-proportional: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
+}
+
+:root:lang(zh-CN) {
+  --fonts-proportional: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
+}
+
+:root:lang(zh-TW) {
+  --fonts-proportional: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
+}
+
+:root:lang(zh-HK) {
+  --fonts-proportional: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
+}
+
+:root:lang(ko) {
+  --fonts-proportional: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
+}
+
 @font-face {
   font-family: 'Yu Gothic';
   src: local('Yu Gothic Medium');
@@ -18,68 +44,52 @@
     url('../fonts/noto-color-emoji/NotoColorEmoji.ttf') format('truetype');
 }
 
-@default-fonts: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
-@monospaced-fonts: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
-
-.override-fonts(@fonts) {
-  textarea {
-    font-family: @fonts;
-  }
-
-  .markdown:not(code) {
-    font-family: @fonts;
-  }
-
-  /* We're going to just override the semantic fonts here */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    font-family: @fonts;
-  }
-
-  .ui.accordion .title:not(.ui),
-  .ui.button,
-  .ui.card > .content > .header.ui.card > .content > .header,
-  .ui.category.search > .results .category > .name,
-  .ui.form input:not([type]),
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="file"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="text"],
-  .ui.form input[type="time"],
-  .ui.form input[type="url"],
-  .ui.header,
-  .ui.items > .item > .content > .header,
-  .ui.list .list > .item .header,
-  .ui.list > .item .header,
-  .ui.menu,
-  .ui.message .header,
-  .ui.modal > .header,
-  .ui.popup > .header,
-  .ui.search > .results .result .title,
-  .ui.search > .results > .message .header,
-  body,
-  .ui.input > input,
-  .ui.input input,
-  .ui.statistics .statistic > .value,
-  .ui.statistic > .value,
-  .ui.statistics .statistic > .label,
-  .ui.statistic > .label,
-  .ui.steps .step .title,
-  .ui.text.container,
-  .ui.language > .menu > .item& {
-    font-family: @fonts;
-  }
-}
-
-.override-fonts(@default-fonts, sans-serif;);
+/* Most of these selectors override fomantic ui */
+body,
+textarea,
+h1,
+h2,
+h3,
+h4,
+h5,
+.markdown:not(code),
+.ui.accordion .title:not(.ui),
+.ui.button,
+.ui.card > .content > .header.ui.card > .content > .header,
+.ui.category.search > .results .category > .name,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="file"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="text"],
+.ui.form input[type="time"],
+.ui.form input[type="url"],
+.ui.header,
+.ui.items > .item > .content > .header,
+.ui.list .list > .item .header,
+.ui.list > .item .header,
+.ui.menu,
+.ui.message .header,
+.ui.modal > .header,
+.ui.popup > .header,
+.ui.search > .results .result .title,
+.ui.search > .results > .message .header,
+.ui.input > input,
+.ui.input input,
+.ui.statistics .statistic > .value,
+.ui.statistic > .value,
+.ui.statistics .statistic > .label,
+.ui.statistic > .label,
+.ui.steps .step .title,
+.ui.text.container,
+.ui.language > .menu > .item {
+  font-family: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
+}
 
 body {
   background-color: #ffffff;
@@ -88,31 +98,6 @@ body {
   flex-direction: column;
 }
 
-@ja-fonts: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Droid Sans Japanese', 'Meiryo', 'MS PGothic';
-:lang(ja) {
-  .override-fonts(@default-fonts, @ja-fonts, sans-serif;);
-}
-
-@zh-CN-fonts: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', 'Heiti SC', SimHei;
-:lang(zh-CN) {
-  .override-fonts(@default-fonts, @zh-CN-fonts, sans-serif;);
-}
-
-@zh-TW-fonts: 'PingFang TC', 'Hiragino Sans TC', 'Source Han Sans TW', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU;
-:lang(zh-TW) {
-  .override-fonts(@default-fonts, @zh-TW-fonts, sans-serif;);
-}
-
-@zh-HK-fonts: 'PingFang HK', 'Hiragino Sans TC', 'Source Han Sans HK', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', 'Heiti TC', PMingLiU_HKSCS, PMingLiU;
-:lang(zh-HK) {
-  .override-fonts(@default-fonts, @zh-HK-fonts, sans-serif;);
-}
-
-@ko-fonts: 'Apple SD Gothic Neo', 'NanumBarunGothic', 'Malgun Gothic', 'Gulim', 'Dotum', 'Nanum Gothic', 'Source Han Sans KR', 'Noto Sans CJK KR';
-:lang(ko) {
-  .override-fonts(@default-fonts, @ko-fonts, sans-serif;);
-}
-
 img {
   border-radius: 3px;
 }
@@ -137,7 +122,7 @@ a {
 pre,
 code,
 .mono {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
 
   &.raw {
     padding: 7px 12px;
@@ -545,7 +530,7 @@ code,
   }
 
   .sha.label {
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
     font-size: 13px;
     padding: 6px 10px 4px;
     font-weight: normal;
@@ -694,7 +679,7 @@ code,
 }
 
 .file-comment {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }
 
@@ -1008,7 +993,7 @@ i.icon.centerlock {
   color: rgba(27, 31, 35, .3);
   width: 1%;
   user-select: none;
-  font-family: @monospaced-fonts, monospace;
+  font-family: var(--fonts-monospace);
 
   span {
     &.bottom-line {
@@ -1089,7 +1074,7 @@ i.icon.centerlock {
 
     .blame-data {
       display: flex;
-      font-family: @default-fonts, sans-serif;
+      font-family: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
 
       .blame-message {
         flex-grow: 2;
@@ -1131,7 +1116,7 @@ i.icon.centerlock {
 
   *:not(.fa):not(.svg):not(.icon) {
     font-size: 12px;
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
     line-height: 20px;
   }
 

diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
@@ -128,7 +128,7 @@
     }
 
     .commit-id {
-      font-family: @monospaced-fonts, monospace;
+      font-family: var(--fonts-monospace);
     }
 
     code {

diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
@@ -1,5 +1,5 @@
 .CodeMirror {
-  font: 14px @monospaced-fonts, monospace;
+  font: 14px var(--fonts-monospace);
 
   &.cm-s-default {
     border-radius: 3px;

diff --git a/web_src/less/_form.less b/web_src/less/_form.less
@@ -238,7 +238,7 @@
 
 .githook {
   textarea {
-    font-family: @monospaced-fonts, monospace;
+    font-family: var(--fonts-monospace);
   }
 }
 

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -538,7 +538,7 @@
           .branch-name {
             display: inline-block;
             padding: 3px 6px;
-            font: 12px @monospaced-fonts, monospace;
+            font: 12px var(--fonts-monospace);
             color: rgba(0, 0, 0, .65);
             background-color: rgba(209, 227, 237, .45);
             border-radius: 3px;
@@ -1155,7 +1155,7 @@
 
           textarea {
             height: 200px;
-            font-family: @monospaced-fonts, monospace;
+            font-family: var(--fonts-monospace);
           }
         }
 
@@ -1270,7 +1270,7 @@
 
       textarea {
         height: 200px;
-        font-family: @monospaced-fonts, monospace;
+        font-family: var(--fonts-monospace);
       }
     }
   }
@@ -2089,7 +2089,7 @@
     &.new {
       .CodeMirror {
         .CodeMirror-code {
-          font-family: @monospaced-fonts, monospace;
+          font-family: var(--fonts-monospace);
 
           .cm-comment {
             background: inherit;

diff --git a/web_src/less/_review.less b/web_src/less/_review.less
@@ -129,7 +129,7 @@
 }
 
 .file-comment {
-  font: 12px @monospaced-fonts, monospace;
+  font: 12px var(--fonts-monospace);
   color: rgba(0, 0, 0, .87);
 }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -168,29 +168,10 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: true,
-              importLoaders: 1,
               url: filterCssImport,
               import: filterCssImport,
             },
           },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-              postcssOptions: {
-                plugins: [
-                  [
-                    'postcss-preset-env',
-                    {
-                      features: {
-                        'system-ui-font-family': false,
-                      },
-                    },
-                  ],
-                ],
-              },
-            },
-          },
         ],
       },
       {
@@ -203,29 +184,11 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: true,
-              importLoaders: 2,
+              importLoaders: 1,
               url: filterCssImport,
               import: filterCssImport,
             },
           },
-          {
-            loader: 'postcss-loader',
-            options: {
-              sourceMap: true,
-              postcssOptions: {
-                plugins: [
-                  [
-                    'postcss-preset-env',
-                    {
-                      features: {
-                        'system-ui-font-family': false,
-                      },
-                    },
-                  ],
-                ],
-              },
-            },
-          },
           {
             loader: 'less-loader',
             options: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,7 +128,7 @@ @@
         }
         .commit-id {
-          font-family: @monospaced-fonts, monospace;
+          font-family: var(--fonts-monospace);
         }
         code {
@@ Expand Down @@