vite-plugin-css-injected-by-js - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

dist/cjs/declarations/interface.d.ts

@@ -7,3 +7,3 @@ import type { InjectCode, InjectCodeFunction } from './utils';
     injectCodeFunction?: InjectCodeFunction;
-    styleId?: string;
+    styleId?: string | (() => string);
     topExecutionPriority?: boolean;
@@ -10,0 +10,0 @@ useStrictCSP?: boolean;

dist/cjs/declarations/utils.d.ts

 import type { OutputBundle, OutputChunk } from 'rollup';
 import type { BuildCSSInjectionConfiguration, PluginConfiguration } from './interface';
 interface InjectCodeOptions {
-    styleId?: string;
+    styleId?: string | (() => string);
     useStrictCSP?: boolean;
@@ -6,0 +6,0 @@ }

dist/cjs/index.js

@@ -52,3 +52,3 @@ "use strict";
                     useStrictCSP,
-                    buildOptions: config.build,
+                    buildOptions: config.build
                 });
@@ -55,0 +55,0 @@ const cssAssetsFilter = (asset) => {

dist/cjs/utils.js

@@ -19,2 +19,3 @@ "use strict";
         let { minify, target } = buildOptions;
+        const generatedStyleId = typeof styleId === 'function' ? styleId() : styleId;
         const res = yield (0, vite_1.build)({
@@ -24,3 +25,9 @@ root: '',
             logLevel: 'error',
-            plugins: [injectionCSSCodePlugin({ cssToInject, styleId, injectCode, injectCodeFunction, useStrictCSP })],
+            plugins: [injectionCSSCodePlugin({
+                    cssToInject,
+                    styleId: generatedStyleId,
+                    injectCode,
+                    injectCodeFunction,
+                    useStrictCSP
+                })],
             build: {
@@ -27,0 +34,0 @@ write: false,

dist/esm/declarations/interface.d.ts

@@ -7,3 +7,3 @@ import type { InjectCode, InjectCodeFunction } from './utils';
     injectCodeFunction?: InjectCodeFunction;
-    styleId?: string;
+    styleId?: string | (() => string);
     topExecutionPriority?: boolean;
@@ -10,0 +10,0 @@ useStrictCSP?: boolean;

dist/esm/declarations/utils.d.ts

 import type { OutputBundle, OutputChunk } from 'rollup';
 import type { BuildCSSInjectionConfiguration, PluginConfiguration } from './interface';
 interface InjectCodeOptions {
-    styleId?: string;
+    styleId?: string | (() => string);
     useStrictCSP?: boolean;
@@ -6,0 +6,0 @@ }

dist/esm/index.js

@@ -40,3 +40,3 @@ import { buildCSSInjectionCode, buildJsCssMap, clearImportedCssViteMetadataFromBundle, globalCssInjection, relativeCssInjection, removeLinkStyleSheets, warnLog, } from './utils.js';
                 useStrictCSP,
-                buildOptions: config.build,
+                buildOptions: config.build
             });
@@ -43,0 +43,0 @@ const cssAssetsFilter = (asset) => {

dist/esm/utils.js

@@ -6,2 +6,3 @@ import { build } from 'vite';
     let { minify, target } = buildOptions;
+    const generatedStyleId = typeof styleId === 'function' ? styleId() : styleId;
     const res = await build({
@@ -11,3 +12,9 @@ root: '',
         logLevel: 'error',
-        plugins: [injectionCSSCodePlugin({ cssToInject, styleId, injectCode, injectCodeFunction, useStrictCSP })],
+        plugins: [injectionCSSCodePlugin({
+                cssToInject,
+                styleId: generatedStyleId,
+                injectCode,
+                injectCodeFunction,
+                useStrictCSP
+            })],
         build: {
@@ -14,0 +21,0 @@ write: false,

package.json

 {
     "name": "vite-plugin-css-injected-by-js",
-    "version": "3.2.1",
+    "version": "3.3.0",
     "description": "A Vite plugin that takes the CSS and adds it to the page through the JS. For those who want a single JS file.",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -56,5 +56,5 @@ # vite-plugin-css-injected-by-js 🤯
 
-#### styleId (string)
+#### styleId (string | function)
 
-If you provide a `string` for `styleId` param the code of injection will set the `id` attribute of the `style` element
+If you provide a `string` for `styleId` param, the code of injection will set the `id` attribute of the `style` element
 with the value of the parameter provided. This is an example:
@@ -81,2 +81,21 @@
 
+If you provide a `function` for `styleId` param, it will run that function and return a string. It's especially useful if you use `relativeCSSInjection` and want unique styleIds for each file.
+
+```ts
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+
+export default {
+    plugins: [
+        cssInjectedByJsPlugin({styleId: () => `foo-${Math.random() * 100}`}),
+    ]
+}
+```
+
+```html
+<head>
+    <style id="foo-1234">/* Generated CSS rules */</style>
+    <style id="foo-4321">/* Generated CSS rules */</style>
+</head>
+```
+
 #### preRenderCSSCode (function)
@@ -83,0 +102,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52143

increased by2.01%

Lines of code

745

increased by1.92%

Number of lines in readme file

302

increased by6.71%

No dependency changes