fix(ui): update ui output (gitbutlerapp#4649)

apps/desktop/package.json

@@ -44,6 +44,7 @@
 		"@types/git-url-parse": "^9.0.3",
 		"@types/lscache": "^1.3.4",
 		"@types/marked": "^5.0.2",
+		"@types/postcss-pxtorem": "^6.0.3",
 		"@wdio/cli": "^8.39.1",
 		"@wdio/globals": "^8.39.1",
 		"@wdio/local-runner": "^8.39.1",

apps/desktop/postcss.config.cjs → apps/desktop/postcss.config.js

@@ -1,8 +1,8 @@
-const autoprefixer = require('autoprefixer');
-const pxToRem = require('postcss-pxtorem');
-const postcssNesting = require('postcss-nesting');
+import autoprefixer from 'autoprefixer';
+import postcssNesting from 'postcss-nesting';
+import pxToRem from 'postcss-pxtorem';
 
-const config = {
+export default {
 	plugins: [
 		//But others, like autoprefixer, need to run after,
 		autoprefixer,
@@ -18,5 +18,3 @@ const config = {
 		postcssNesting()
 	]
 };
-
-module.exports = config;

apps/desktop/tsconfig.json

@@ -23,6 +23,7 @@
 		".svelte-kit/types/**/$types.d.ts",
 		"vite.config.js",
 		"vite.config.ts",
+		"postcss.config.js",
 		"src/**/*.js",
 		"src/**/*.ts",
 		"src/**/*.svelte",

eslint.config.mjs

@@ -63,7 +63,6 @@ export default tsEslint.config(
 			'**/eslint.config.js',
 			'**/eslint.config.mjs',
 			'**/svelte.config.js',
-			'**/postcss.config.cjs',
 			'**/.pnpm-store',
 			'**/vite.config.ts.timestamp-*',
 			'!.storybook',

packages/ui/package.json

@@ -16,7 +16,7 @@
 		"package": "pnpm run --sequential \"/^package:.*/\"",
 		"package:svelte": "svelte-kit sync && svelte-package",
 		"package:styles": "postcss ./src/styles/main.css -o ./dist/styles/main.css && pnpm run copy-fonts",
-		"copy-fonts": "postcss ./src/styles/fonts.css -o ./dist/fonts.css && cpy './src/styles/fonts/**/*.woff2' './dist/fonts' --parents",
+		"copy-fonts": "postcss ./src/styles/fonts.css -o ./dist/styles/fonts.css && cpy './src/styles/fonts/**/*.woff2' './dist/fonts' --parents",
 		"design-tokens:build": "npx tz build && prettier --write ./src/lib/design-tokens.json ./src/styles/core/design-tokens.css",
 		"prepublishOnly": "pnpm run package",
 		"prepare": "svelte-kit sync",
@@ -37,6 +37,7 @@
 		"@sveltejs/vite-plugin-svelte": "catalog:svelte",
 		"@terrazzo/cli": "^0.0.11",
 		"@terrazzo/plugin-css": "^0.0.9",
+		"@types/postcss-pxtorem": "^6.0.3",
 		"autoprefixer": "^10.4.19",
 		"cpy-cli": "^5.0.0",
 		"date-fns": "^2.30.0",
@@ -64,11 +65,8 @@
 			"import": "./dist/*.js",
 			"types": "./dist/*.d.ts"
 		},
-		"./main.css": {
-			"import": "./dist/styles/main.css"
-		},
-		"./fonts.css": {
-			"import": "./dist/fonts.css"
+		"./*.css": {
+			"import": "./dist/styles/*.css"
 		},
 		"./*.json": {
 			"import": "./dist/*.json",

packages/ui/postcss.config.js

@@ -0,0 +1,23 @@
+import postcssBundler from '@csstools/postcss-bundler';
+import autoprefixer from 'autoprefixer';
+import postcssMinify from 'postcss-minify';
+import postcssNesting from 'postcss-nesting';
+import pxToRem from 'postcss-pxtorem';
+
+export default {
+	plugins: [
+		pxToRem({
+			rootValue: 16,
+			unitPrecision: 5,
+			propList: ['*'],
+			selectorBlackList: [],
+			replace: true,
+			mediaQuery: false,
+			minPixelValue: 0
+		}),
+		autoprefixer(),
+		postcssNesting(),
+		postcssBundler(),
+		postcssMinify()
+	]
+};

packages/ui/tsconfig.json

@@ -18,6 +18,7 @@
 		".svelte-kit/non-ambient.d.ts",
 		".svelte-kit/types/**/$types.d.ts",
 		"terrazzo.config.js",
+		"postcss.config.js",
 		"vite.config.js",
 		"vite.config.ts",
 		"src/**/*.js",