feat: add css nano with postcss (#1497)

Author: nmerget

package-lock.json

@@ -79,6 +79,7 @@
     "@playwright/test": "1.35.1",
     "cpr": "3.0.1",
     "cross-env": "^7.0.3",
+    "cssnano": "^6.0.1",
     "dotenv": "^16.3.1",
     "eslint-plugin-prettier": "^5.0.0",
     "fs-extra": "^11.1.1",
@@ -90,6 +91,8 @@
     "lint-staged": "^14.0.1",
     "markdownlint-cli": "^0.35.0",
     "npm-run-all": "4.1.5",
+    "postcss": "^8.4.28",
+    "postcss-cli": "^10.1.0",
     "prettier": "^3.0.2",
     "prettier-plugin-pkg": "0.18.0",
     "prettier-plugin-sh": "^0.13.1",

package.json

@@ -15,24 +15,27 @@
     "build"
   ],
   "scripts": {
-    "build": "npm-run-all build:*",
+    "build": "npm-run-all -p build-components build-style",
+    "build-components": "npm-run-all build:mitosis -p build-components:*",
+    "build-components:directives": "cpr overrides/angular ../../output/angular -o",
+    "build-components:docs": "react-docgen ../../output/react/src/components/**/*.tsx -o ../../output/docs.json -i *.spec.tsx",
+    "build-components:post": "node scripts/post-build/index.js",
+    "build-style": "npm-run-all build-style:*",
+    "build-style:01_mv": "cpr src build -o -f \"(.ts|.tsx|.md)$\"",
+    "build-style:02_sass": "sass build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import",
+    "build-style:03_postcss": "postcss build/**/*.css --replace",
     "build:mitosis": "mitosis build",
-    "build:mv-styles": "cpr src build -o -f \"(.ts|.tsx|.md)$\"",
-    "build:sass": "sass build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import",
-    "build:z-directives": "cpr overrides/angular ../../output/angular -o",
-    "build:z-post": "node scripts/post-build/index.js",
-    "build:z2-docs": "react-docgen ../../output/react/src/components/**/*.tsx -o ../../output/docs.json -i *.spec.tsx",
-    "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && npm run build:z-directives && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
+    "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && npm run build-components:directives && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
     "compile:react": "mitosis build -c mitosis-react.config.js && node -e \"require('./scripts/post-build/react.js')(true)\" && cpr ../../output/tmp/react/src ../../output/react/src -o",
     "compile:vue": "mitosis build -c mitosis-vue.config.js && node -e \"require('./scripts/post-build/vue.js')(true)\" && cpr ../../output/tmp/vue/vue3/src ../../output/vue/vue3/src -o",
     "copy-output": "npm-run-all copy:*",
     "copy:outputs": "cpr build ../../build-outputs/components/build -o",
     "copy:package.json": "cpr package.json ../../build-outputs/components/package.json -o",
     "copy:readme": "cpr README.md ../../build-outputs/components/README.md -o",
     "dev:angular": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:angular\"",
-    "dev:html": "cpr ../foundations/assets build/assets -o && npm run build:mv-styles && npm run build:sass &&  vite --open",
+    "dev:html": "cpr ../foundations/assets build/assets -o && npm run build-style:01_mv && npm run style:02_sass &&  vite --open",
     "dev:react": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:react\"",
-    "dev:scss": "nodemon --watch src -e scss -x \"npm run build:mv-styles && npm run build:sass\"",
+    "dev:scss": "nodemon --watch src -e scss -x \"npm run build-style:01_mv && npm run style:02_sass\"",
     "dev:vue": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:vue\"",
     "generate:component": "hygen mitosis new",
     "generate:docs": "hygen update-docs new",

packages/components/package.json

@@ -0,0 +1,7 @@
+module.exports = {
+	plugins: [
+		require('cssnano')({
+			preset: 'default'
+		})
+	]
+};

packages/components/postcss.config.js

@@ -17,6 +17,7 @@
     "build:01_style-dictionary": "node style-dictionary.js && npm run copy:scss",
     "build:02_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/scss/:build/css/ --future-deprecation=import",
     "build:03_tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",
+    "build:04_postcss": "postcss build/css/**/*.css --replace",
     "clean": "rm -rf build",
     "copy-build": "npm-run-all copy-build:*",
     "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets -o",

packages/components/src/styles/button-components.scss renamed to packages/components/src/styles/_button-components.scss

@@ -0,0 +1,7 @@
+module.exports = {
+	plugins: [
+		require('cssnano')({
+			preset: 'default'
+		})
+	]
+};