Fix: Vue SDK CSS imports

.changeset/beige-laws-vanish.md

@@ -0,0 +1,18 @@
+---
+'@builder.io/sdk-vue': patch
+---
+
+Fix CSS imports:
+
+- add a `/nuxt` subpath export for a Nuxt module. Currently, it handles importing CSS, and is used like so:
+
+```ts
+// nuxt.config.js
+export default defineNuxtConfig({
+  modules: ['@builder.io/sdk-vue/nuxt'],
+});
+```
+
+- bring back `/css` subpath export. This is used internally by the Nuxt module, but also allows more flexibility for customers to import CSS as they see fit.
+- remove CSS imports from server bundles, as they cause errors due to invalid extensions.
+- add `sideEffects` array to package.json for webpack.

packages/sdks/output/vue/nuxt.js

@@ -0,0 +1,10 @@
+import { defineNuxtModule } from '@nuxt/kit';
+
+export default defineNuxtModule({
+  setup(options, nuxt) {
+    /**
+     * Add the compiled Builder.io CSS to the Nuxt CSS array.
+     */
+    nuxt.options.css.push('@builder.io/sdk-vue/css');
+  },
+});

packages/sdks/output/vue/package.json

@@ -13,9 +13,18 @@
   },
   "files": [
     "lib",
-    "package.json"
+    "nuxt.js"
+  ],
+  "sideEffects": [
+    "./lib/browser/style.css",
+    "./lib/node/style.css",
+    "./lib/edge/style.css",
+    "./lib/browser/index.js",
+    "./lib/browser/index.cjs"
   ],
   "exports": {
+    "./css": "./lib/browser/style.css",
+    "./nuxt": "./nuxt.js",
     ".": {
       "node": {
         "import": "./lib/node/index.js",

packages/sdks/output/vue/vite.config.js

@@ -1,4 +1,7 @@
-import { viteOutputGenerator } from '@builder.io/sdks/output-generation/index.js';
+import {
+  getSdkEnv,
+  viteOutputGenerator,
+} from '@builder.io/sdks/output-generation/index.js';
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
@@ -25,7 +28,12 @@ export default defineConfig({
         globals: {
           vue: 'Vue',
         },
-        intro: 'import "./style.css";',
+
+        /**
+         * Adding CSS imports to server bundles breaks Nuxt, since `.css` is an invalid extension.
+         * Instead, users should manually import the CSS file for SSR builds.
+         */
+        banner: getSdkEnv() === 'browser' ? 'import "./style.css";' : undefined,
       },
     },
   },