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

Author: silvercent011

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;
+}

playground/nuxt.config.ts

@@ -1,5 +1,6 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/ionic'],
+  css: ['~/assets/css/ionic.css'],
   ionic: {
     // integrations: {
     //   icons: true,

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',