fix: ensure default ionic css is added before user overrides (#570)

nuxt-modules · May 28, 2024 · 5ead841 · 5ead841
1 parent 4c7ff8e
commit 5ead841
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/playground/assets/css/ionic.css b/playground/assets/css/ionic.css
@@ -0,0 +1,8 @@
+:root {
+  --ion-color-primary: #6030ff;
+  --ion-color-primary-rgb: 96, 48, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #542ae0;
+  --ion-color-primary-tint: #7045ff;
+}
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,5 +1,6 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/ionic'],
+  css: ['~/assets/css/ionic.css'],
   ionic: {
     // integrations: {
     //   icons: true,

diff --git a/src/parts/css.ts b/src/parts/css.ts
@@ -5,12 +5,12 @@ export const useCSSSetup = () => {
 
   const setupCore = () => {
     // Core CSS required for Ionic components to work properly
-    nuxt.options.css.push('@ionic/vue/css/core.css')
+    nuxt.options.css.unshift('@ionic/vue/css/core.css')
   }
 
   const setupBasic = () => {
     // Basic CSS for apps built with Ionic
-    nuxt.options.css.push(
+    nuxt.options.css.unshift(
       '@ionic/vue/css/normalize.css',
       '@ionic/vue/css/structure.css',
       '@ionic/vue/css/typography.css',
@@ -19,7 +19,7 @@ export const useCSSSetup = () => {
 
   const setupUtilities = () => {
     // Optional CSS utils that can be commented out
-    nuxt.options.css.push(
+    nuxt.options.css.unshift(
       '@ionic/vue/css/padding.css',
       '@ionic/vue/css/float-elements.css',
       '@ionic/vue/css/text-alignment.css',