feat: remove css injecting

Author: crashmax-dev

README.md

@@ -6,9 +6,17 @@
 
 > ⚡️ A plugin for developing and building a Tampermonkey userscript based on [Vite](https://vitejs.dev).
 
+## Table of contents
+
+- [Features](#features)
+- [Install](#install)
+- [Setup config](#setup-config)
+- [Using style modules](#using-style-modules)
+- [Plugin configuration](#plugin-configuration)
+
 ## Features
 
-- 🔥 Hot reloading after changing any files.
+- 🔥 Reloading page after changing any files.
 - 🔧 Configure Tampermonkey's Userscript header.
 - 💨 Import all [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s to the header by default in development mode.
 - 📝 Automatic addition of used [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s in the code when building for production.
@@ -28,7 +36,7 @@ yarn add vite-userscript-plugin -D
 pnpm add vite-userscript-plugin -D
 ```
 
-### Setup `vite.config.ts`
+### Setup config
 
 ```js
 import { defineConfig } from 'vite'
@@ -83,7 +91,19 @@ export default defineConfig((config) => {
 }
 ```
 
-## Plugin Configuration
+### Using style modules
+
+```js
+import style from './style.css?raw'
+
+// inject style element
+const styleElement = GM_addStyle(style)
+
+// remove style element
+styleElement.remove()
+```
+
+## Plugin configuration
 
 ```ts
 interface ServerConfig {

examples/basic/package.json

@@ -8,7 +8,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "sass": "1.59.2",
+    "sass": "1.78.0",
     "vite-userscript-plugin": "workspace:*"
   }
 }

examples/basic/src/button.ts

@@ -1,5 +1,3 @@
-import './styles/style.scss'
-
 export function createButton() {
   const el = document.createElement('button')
   el.textContent = 'Button'

examples/basic/src/index.ts

@@ -1,6 +1,7 @@
 import { createButton } from './button.js'
-import './styles/style.css'
-import './styles/style.sass'
+import style from './style.scss?raw'
+
+GM_addStyle(style)
 
 const div = document.querySelector('div')!
 div.appendChild(createButton())

examples/basic/src/style.scss

@@ -0,0 +1,3 @@
+h1 {
+  text-decoration: underline;
+}

examples/basic/src/styles/style.css

@@ -14,6 +14,9 @@ export default defineConfig((config) => {
         },
         server: {
           port: 2000
+        },
+        esbuildTransformOptions: {
+          minify: false
         }
       })
     ]