Rework Vite plugin (#60)

* documentation

* reworking vite plugin completely

* better vite plugin

* example updates

* changeset

* added latest rollup to dev deps, so the types are correct

Author: Zn4rK

.changeset/tall-items-switch.md

@@ -0,0 +1,9 @@
+---
+'@navita/vite-plugin': major
+---
+
+Adding Remix-specific vite plugin.
+
+Instead of allowing Vite to extract the CSS, we use a virtual file, and send HMR updates to that file instead. 
+
+During the build, we extract the CSS and write it to a file.

documentation/200-integrations/250-remix.md

@@ -0,0 +1,53 @@
+---
+title: Remix
+description:
+---
+
+# Remix
+
+A plugin for integrating Navita with [Remix](https://remix.run/).
+
+> Navita has first-class support for Remix! It works both in the server and on the client! 🎉
+
+## Installation
+
+```bash
+npm install --save-dev @navita/vite-plugin
+```
+
+## Setup
+
+Add the plugin to your Vite configuration, along with any desired [plugin configuration](#configuration).
+
+```js
+// vite.config.js
+import { navitaRemix } from '@navita/vite-plugin/remix';
+
+export default {
+  plugins: [
+    navitaRemix({
+      // configuration
+    }),
+    // ...other plugins
+  ]
+};
+```
+
+Please note that the import is different from the Vite plugin. The Remix plugin is based on, and uses the Vite plugin,
+but we've added some extra functionality to make it better suited for Remix.
+
+One example of this is that you would be able to use Navita styles in your server as well.
+You'll also get a better developer experience, since we automatically inject the virtual Navita styles into your root-component, and avoid double declarations, other solutions have.
+
+## Configuration
+
+> The Remix plugin is based on the Vite plugin, so you can use the same configuration options.
+
+The plugin accepts the following as optional configuration:
+
+#### `importMap?: { callee: string, source: string }[]`
+*Default*: `import { importMap } from "@navita/css"`
+
+ImportMap is a feature that allows you to extend the functionality of Navita.
+
+If you provide your own, it will be merged with the default importMap.

examples/with-remix/app/components/box.tsx

@@ -1,7 +1,8 @@
 import { style } from "@navita/css";
+import React from "react";
 
 const box = style({
-  background: 'hotpink',
+  background: 'green',
   color: 'white',
   fontSize: 20,
   padding: 20,

examples/with-remix/app/components/button.tsx

@@ -1,7 +1,7 @@
 import { style } from "@navita/css";
 
 const button = style({
-  background: 'red',
+  background: 'hotpink',
   color: 'white',
   padding: '10px',
 });

examples/with-remix/app/components/specificity.tsx

@@ -3,10 +3,10 @@ import { style } from "@navita/css";
 const container = style({
   width: 500,
   height: 500,
-  background: 'green',
+  background: 'rebeccapurple',
 
   '@media (min-width: 600px)': {
-    background: 'red',
+    background: 'royalblue',
   },
 });
 

examples/with-remix/app/consts.ts

@@ -1 +1 @@
-export const background = 'orange';
+export const background = 'yellow';

examples/with-remix/vite.config.ts

@@ -1,11 +1,11 @@
-import { navita } from "@navita/vite-plugin";
+import { navitaRemix } from "@navita/vite-plugin/remix";
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [
-    navita(),
+    navitaRemix(),
     remix({
       future: {
         v3_fetcherPersist: true,

examples/with-vite/src/App.tsx

@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { Button } from "./components/button.tsx";
 
 const x = style({
-  background: 'red',
+  background: 'orange',
   color: 'blue',
 });
 
 const button = style({
-  background: 'green',
+  background: 'lawngreen',
 });
 
 function App() {

packages/vite-plugin/package.json

@@ -14,6 +14,11 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
       "types": "./src/index.ts"
+    },
+    "./remix": {
+      "import": "./dist/remix.mjs",
+      "require": "./dist/remix.cjs",
+      "types": "./src/remix.ts"
     }
   },
   "publishConfig": {
@@ -30,7 +35,8 @@
     "@navita/css": "workspace:*"
   },
   "devDependencies": {
-    "vite": "5.4.8"
+    "vite": "5.4.8",
+    "rollup": "^4.20.0"
   },
   "license": "MIT",
   "author": "Eagerpatch",