fix(angular): devs can import ionic/angular styles in css (#26875)

ionic-team · Feb 28, 2023 · 0d2fac2 · 0d2fac2
1 parent df37357
commit 0d2fac2
Show file tree

Hide file tree

Showing 14 changed files with 215 additions and 112 deletions.
diff --git a/angular/package-lock.json b/angular/package-lock.json
diff --git a/angular/package.json b/angular/package.json
@@ -41,8 +41,13 @@
     "tsc": "tsc -p .",
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
+  "exports": {
+    "./css/*": {
+      "style": "./css/*"
+    }
+  },
   "dependencies": {
-    "@ionic/core": "^7.0.0-beta.5",
+    "@ionic/core": "7.0.0-beta.5",
     "ionicons": "^6.1.3",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

diff --git a/angular/test/base/angular.json b/angular/test/base/angular.json
@@ -33,18 +33,7 @@
                 "output": "./svg"
               }
             ],
-            "styles": [
-              "src/styles.css",
-              "node_modules/@ionic/angular/css/core.css",
-              "node_modules/@ionic/angular/css/normalize.css",
-              "node_modules/@ionic/angular/css/structure.css",
-              "node_modules/@ionic/angular/css/typography.css",
-              "node_modules/@ionic/angular/css/padding.css",
-              "node_modules/@ionic/angular/css/float-elements.css",
-              "node_modules/@ionic/angular/css/text-alignment.css",
-              "node_modules/@ionic/angular/css/text-transformation.css",
-              "node_modules/@ionic/angular/css/flex-utils.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {

diff --git a/angular/test/base/src/styles.css b/angular/test/base/src/styles.css
@@ -0,0 +1,14 @@
+/* Core CSS required for Ionic components to work properly */
+@import '~@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
@@ -61,6 +61,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.0.0-beta.5"
+    "@ionic/core": "7.0.0-beta.5"
   }
 }
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
@@ -37,7 +37,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.0.0-beta.5",
+    "@ionic/react": "7.0.0-beta.5",
     "tslib": "*"
   },
   "peerDependencies": {

diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.0.0-beta.5",
+    "@ionic/core": "7.0.0-beta.5",
     "ionicons": "^6.1.3",
     "tslib": "*"
   },