vite-plugin-import-css-sheet - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

 import type { Plugin } from 'vite';
-export declare const viteImportCss: () => Plugin;
+export declare const viteImportCssSheet: () => Plugin;
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-import { randomUUID as f } from "node:crypto";
+import { randomUUID as h } from "node:crypto";
 import { readFile as r } from "node:fs/promises";
@@ -18,3 +18,3 @@ const v = () => {
     enforce: "pre",
-    name: "vite-import-css",
+    name: "vite-import-css-sheet",
     async resolveId(t, e) {
@@ -28,3 +28,3 @@ if (t.endsWith(".css")) {
           if (d(t).test(o)) {
-            const c = "\0virtual:" + f();
+            const c = "\0virtual:" + h().replaceAll("-", "");
             return n.set(c, s.id), c;
@@ -59,4 +59,4 @@ }
 export {
-  v as viteImportCss
+  v as viteImportCssSheet
 };
 //# sourceMappingURL=index.js.map

package.json

 {
 	"name": "vite-plugin-import-css-sheet",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Small plugin that enables the use of tc39/proposal-import-attributes for css files in vite.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

 # vite-plugin-import-css-sheet
-Small plugin that enables the use of tc39/proposal-import-attributes for css files in vite.
+Small plugin that enables the use of tc39/proposal-import-attributes for css files in vite.  
+Any imported .css file that uses the with/assert syntax will be imported as a `CSSStyleSheet`.  
+This plugin **only** covers .css imports and nothing else.
+
+
+## Install
+
+#### npm
+```
+npm i vite-plugin-import-css-sheet --save-dev
+```
+
+#### pnpm
+```
+pnpm add -D vite-plugin-import-css-sheet
+```
+
+## Enable
+```typescript
+import { defineConfig } from 'vite';
+import { viteImportCssSheet } from 'vite-plugin-import-css-sheet';
+
+export default defineConfig({
+	plugins: [
+		viteImportCssSheet(),
+	],
+});
+```
+
+For typings to work correctly, in your tsconfig.json file add the following:
+
+#### tsconfig.json
+```json
+{
+	"compilerOptions": {
+		"types": [
+			"vite-plugin-import-css-sheet/client"
+		]
+	},
+}
+```
+This adds the correct type to .css file imports.
+
+If you also use vite/client typings, `vite-plugin-import-css-sheet/client` must be below it.
+
+## Usage
+
+New correct syntax.
+```typescript
+import style from './button.css' with { type: 'css' };
+```
+
+Also works with the previous assert syntax.
+```typescript
+import style from './button.css' assert { type: 'css' };
+```
+<br><br>

src/index.ts

@@ -7,3 +7,3 @@ import { randomUUID } from 'node:crypto';
 
-export const viteImportCss = (): Plugin => {
+export const viteImportCssSheet = (): Plugin => {
 	const virtualModules = new Map<string, string>();
@@ -30,3 +30,3 @@ const filetypes = [ '.ts', '.mts', '.js', '.mjs' ] as const;
 		enforce: 'pre',
-		name:    'vite-import-css',
+		name:    'vite-import-css-sheet',
 		async resolveId(source, importer) {
@@ -33,0 +33,0 @@ if (source.endsWith('.css')) {

No alert changes

Improved metrics

Total package byte prevSize

10318

12.14%

Number of lines in readme file

59

1866.67%

Worsened metrics

Number of package files

8

-11.11%

Lines of code

139

-2.11%

No dependency changes