Fix postcss not working. (#112)

Delete unneeded resources.

package.json

@@ -3,8 +3,8 @@
   "version": "v0.4.5",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --mode dev && tsc",
-    "build": "node message_bus.build.js && vue-cli-service build --dest ./build/sysroot/usr/share/casaos/www/modules/icewhale_app --mode production",
+    "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --mode dev && tsc",
+    "build": "node message_bus.build.js && cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --dest ./build/sysroot/usr/share/casaos/www/modules/icewhale_app --mode production",
     "build:raw": "node message_bus.build.js && vue-cli-service build --dest ./raw/usr/share/casaos/www/modules/icewhale_app --mode production",
     "test:unit:mocha": "vue-cli-service test:unit --require tests/unit/setup.js tests/**/*.spec.js",
     "test:e2e": "vue-cli-service test:e2e --mode dev",
@@ -81,6 +81,7 @@
     "babel-loader": "^8.3.0",
     "chai": "^4.4.1",
     "core-js": "^3.36.1",
+    "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "expect": "^29.7.0",
     "file-loader": "^6.2.0",
@@ -92,14 +93,16 @@
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "patch-package": "^7.0.2",
     "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^4.3.0",
     "postinstall-postinstall": "^2.1.0",
     "rss-parser": "^3.13.0",
     "sass": "^1.74.1",
     "sass-loader": "10.1.1",
     "style-resources-loader": "^1.5.0",
     "swiper": "^5.4.5",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.4.15",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^7.0.5",
     "vue-loader": "^15.11.1",
     "vue-server-renderer": "^2.7.16",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-};
+	plugins: [
+	  require("tailwindcss")("tailwind.config.js"),
+	  require("autoprefixer")(),
+	],
+  };

public/index.html

@@ -6,6 +6,9 @@
 	<meta content="IE=edge" http-equiv="X-UA-Compatible">
 	<meta content="width=device-width,initial-scale=1" name="viewport">
 	<meta content="noindex" name="robots">
+	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
 	<link href="<%= BASE_URL %>img/icon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
 	<link href="<%= BASE_URL %>site.webmanifest" rel="manifest">
 	<meta content="#da532c" name="msapplication-TileColor">

src/assets/scss/app.scss

@@ -6,23 +6,6 @@
  *
  *  Copyright (c) 2022 by IceWhale, All Rights Reserved.
  */
-// Import CasaOS Style with TailiwindCSS
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@layer base {
-	@font-face {
-		font-family: 'BrittiSans';
-		src: url(/modules/icewhale_app/font/britti-sans-regular.woff) format('woff');
-	  }
-}
-
-// Import Font
-@import '~@fontsource/roboto/300.css';
-@import '~@fontsource/roboto/400.css';
-@import '~@fontsource/roboto/500.css';
-@import '~@fontsource/roboto/700.css';
 
 // Import materialdesignicons
 @import "~@mdi/font/css/materialdesignicons.min.css";
@@ -56,7 +39,6 @@
 @import "common/card";
 @import "common/scrollbars";
 @import "common/animate";
-@import "common/avatar";
 @import "common/modal";
 @import "common/others";
 @import "common/widgets";

src/assets/scss/common/_input.scss

@@ -99,7 +99,6 @@
 	.help {
 		margin-top: 0.5rem;
 		/* Text 400Regular/Text04 */
-		font-family: 'Roboto';
 		font-style: normal;
 		font-weight: 400;
 		font-size: 0.75rem;

src/assets/scss/common/_variables.scss

@@ -45,7 +45,6 @@ $lucency: transparent !default;
 $family-sans-serif: BrittiSans,
 -apple-system,
 BlinkMacSystemFont,
-Roboto,
 "Segoe UI",
 "Helvetica Neue",
 "Noto Sans",

src/assets/tailwind.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	@font-face {
+		font-family: 'BrittiSans';
+		src: url(/modules/icewhale_app/font/britti-sans-regular.woff) format('woff');
+	  }
+}

src/components/AppSetting/AppTipModal.vue

@@ -18,7 +18,7 @@
 			<VMdEditor ref="editor" v-model="tips" :mode="controlEditorState" :placeholder="$t('Something to remember eg. password')"
 				left-toolbar right-toolbar>
 			</VMdEditor>
-			<div v-if="name" class="flex justify-between items-center mt-2">
+			<div v-if="name" class="flex items-center justify-between mt-2">
         <AppMigrationBtn />
 				<b-icon class="_polymorphic"
 					:class="{ 'has-text-grey-800': !isEditing, 'has-text-green-default': isDifferentiation, 'has-text-grey-400': !isDifferentiation && isEditing }"
@@ -246,7 +246,7 @@ export default {
 						padding: 0.75rem 1rem;
 						/* Text 400Regular/Text03 */
 
-						font-family: 'Roboto';
+						font-family: 'BrittiSans';
 						font-style: normal;
 						font-weight: 400;
 						font-size: 14px;

src/components/AppSetting/ComposeConfig.vue

@@ -520,9 +520,12 @@ export default {
     parseComposeYaml(val) {
       try {
         const yaml = YAML.parse(val);
-
+        if (!yaml) {
+          return;
+        }
+        
         // 其他配置
-        this.volumes = yaml.volumes || {};
+        this.volumes = yaml?.volumes || {};
 
         // set main app name
         this.configData.name = yaml?.name || "";

src/components/AppStore/AppRecommend/AppRecommend.vue

@@ -15,17 +15,17 @@
 						ratio="16by9">
 					</b-image>
 				</div>
-				<div class="is-flex pt-5 is-align-items-center">
-					<div class=" mr-3" @click="showAppDetial(item.id)">
+				<div class="pt-5 is-flex is-align-items-center">
+					<div class="mr-3 " @click="showAppDetial(item.id)">
 						<b-image :placeholder="require('@/assets/img/app/default.svg')"
 							:src="item.icon"
 							:src-fallback="require('@/assets/img/app/default.svg')"
 							class="is-64x64 is-clickable icon-shadow">
 						</b-image>
 					</div>
-					<div class="is-flex-grow-1 mr-4 is-clickable"
+					<div class="mr-4 is-flex-grow-1 is-clickable"
 						@click="showAppDetial(item.id);$messageBus('appstore_detail', item.title)">
-						<h6 class="title is-6 mb-2 ">{{ item.title }}</h6>
+						<h6 class="mb-2 title is-6 ">{{ item.title }}</h6>
 						<p class="is-size-7 two-line">{{ item.tagline }}</p>
 					</div>
 					<div>
@@ -116,19 +116,19 @@ const props = defineProps({
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .featured-app {
 	.swiper-button-next,
 	.swiper-rtl .swiper-button-prev {
 		right: -20px;
-		top: calc(50% - 2.25rem);
+		top: calc(50% - 3.5rem);
 		left: auto;
 	}
 
 	.swiper-button-prev,
 	.swiper-rtl .swiper-button-next {
 		left: -20px;
-		top: calc(50% - 2.25rem);
+		top: calc(50% - 3.5rem);
 		right: auto;
 	}
 

src/components/Apps/AppCard.vue

@@ -187,7 +187,7 @@
 					</div>
 
 					<p class="mt-3">
-						<a class="one-line max-w-9" style="cursor: default">
+						<a class="block one-line max-w-36" style="cursor: default">
 							{{ i18n(item.title) }}
 						</a>
 					</p>
@@ -211,7 +211,6 @@ import commonI18n, { ice_i18n } from "@/mixins/base/common-i18n";
 import FileSaver from "file-saver";
 import { MIRCO_APP_ACTION_ENUM } from "@/const";
 import { vOnClickOutside } from "@vueuse/components";
-import { set } from "vue/types/umd";
 
 export default {
 	name: "app-card",
@@ -1120,7 +1119,7 @@ export default {
 
 		/* Text 400Regular/Text03 */
 
-		font-family: "Roboto";
+		font-family: "BrittiSans";
 		font-style: normal;
 		line-height: 1.25rem;
 		/* identical to box height, or 143% */
@@ -1181,7 +1180,7 @@ export default {
 		padding-right: 1.5rem;
 
 		//styleName: Text 400Regular/Text03;
-		font-family: Roboto;
+		font-family: "BrittiSans";
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px;

src/components/Apps/AppPanel.vue

@@ -108,7 +108,7 @@
 			<section
 				v-if="currentSlide == APP_STORE_PANEL"
 				:class="{ _hideOverflow: !isCasa }"
-				class="modal-card-body pt-3 _pl app-store"
+				class="pt-3 modal-card-body _pl app-store"
 			>
 				<template v-if="!isLoadError">
 					<AppRecommend
@@ -148,9 +148,9 @@
 					<!-- App list End-->
 				</template>
 				<template v-else>
-					<div class="is-flex is-align-items-center is-justify-content-center mt-6 mb-6">
-						<div class="has-text-centered mt-6 mb-6">
-							<div class="is-flex is-align-items-center mb-5">
+					<div class="mt-6 mb-6 is-flex is-align-items-center is-justify-content-center">
+						<div class="mt-6 mb-6 has-text-centered">
+							<div class="mb-5 is-flex is-align-items-center">
 								<b-icon class="mr-2" icon="alert-circle" type="is-danger"></b-icon>
 								{{ $t("There was an error loading the data, please try again!") }}
 							</div>
@@ -1218,7 +1218,7 @@ export default {
 }
 
 ._title {
-	font-family: "Roboto";
+	font-family: "BrittiSans";
 	font-style: normal;
 	font-weight: 500;
 	font-size: 1rem;