Merge pull request #28 from greasify/feat/remove-css-inject

feat: remove css injecting, update apis

Author: crashmax-dev

.github/workflows/npm-publish.yaml

@@ -11,18 +11,18 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8
+          version: 9
           run_install: false
 
       - name: Get pnpm store directory
@@ -31,7 +31,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
@@ -46,7 +46,7 @@ jobs:
         run: pnpm build
 
       - name: Publish
-        uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
-          access: public
+        shell: bash
+        run: |
+          echo "//registry.npmjs.org/:_authToken="${{ secrets.NPM_TOKEN }}"" > ~/.npmrc
+          pnpm publish --access public

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

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import Userscript from 'vite-userscript-plugin'
+
 import { name, version } from './package.json'
 
 export default defineConfig((config) => {
@@ -14,8 +15,12 @@ export default defineConfig((config) => {
         },
         server: {
           port: 2000
+        },
+        esbuildTransformOptions: {
+          minify: false
         }
       })
+
     ]
   }
 })