Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vite-plugin-css-injected-by-js
Advanced tools
vite-plugin-css-injected-by-js - npm Package Compare versions
Comparing version 3.4.0-beta.0 to 3.4.0
@@ -239,3 +239,3 @@ "use strict"; | ||
| function buildOutputChunkWithCssInjectionCode(jsAssetCode, cssInjectionCode, topExecutionPriorityFlag) { | ||
| const appCode = jsAssetCode.replaceAll(/\/\*\s*empty css\s*\*\//g, ''); | ||
| const appCode = jsAssetCode.replace(/\/\*\s*empty css\s*\*\//g, ''); | ||
| jsAssetCode = topExecutionPriorityFlag ? '' : appCode; | ||
@@ -242,0 +242,0 @@ jsAssetCode += cssInjectionCode; |
@@ -207,3 +207,3 @@ import { build } from 'vite'; | ||
| export function buildOutputChunkWithCssInjectionCode(jsAssetCode, cssInjectionCode, topExecutionPriorityFlag) { | ||
| const appCode = jsAssetCode.replaceAll(/\/\*\s*empty css\s*\*\//g, ''); | ||
| const appCode = jsAssetCode.replace(/\/\*\s*empty css\s*\*\//g, ''); | ||
| jsAssetCode = topExecutionPriorityFlag ? '' : appCode; | ||
@@ -210,0 +210,0 @@ jsAssetCode += cssInjectionCode; |
| { | ||
| "name": "vite-plugin-css-injected-by-js", | ||
| "version": "3.4.0-beta.0", | ||
| "version": "3.4.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", |
@@ -34,8 +34,9 @@ # vite-plugin-css-injected-by-js 🤯 | ||
| When you add the plugin, you can provide a configuration object. | ||
| Below you can find all configuration parameters available. | ||
| When you add the plugin, you can provide a configuration object. Below you can find all configuration parameters | ||
| available. | ||
| #### cssAssetsFilterFunction (function) | ||
| The `cssAssetsFilterFunction` parameter allows you to specify a filter function that will enable you to exclude some output css assets. | ||
| The `cssAssetsFilterFunction` parameter allows you to specify a filter function that will enable you to exclude some | ||
| output css assets. | ||
@@ -63,6 +64,12 @@ **This option is not applied to `relativeCSSInjection` logic.** | ||
| **EXPERIMENTAL** | ||
| Why experimental? Because it uses a non-conventional solution. | ||
| Before this param this plugin applied the logic only in build phase. | ||
| Now we can experiment it in the dev environment. | ||
| To enable the plugin to work also in the dev environment you should configure a `dev` object and set the `enableDev` param to `true`, an example: | ||
| Previously, the plugin strictly applied logic solely during the build phase. Now, we have the capability to experiment | ||
| with it in the development environment. | ||
| To activate the plugin in the development environment as well, you need to configure a dev object and set the enableDev | ||
| parameter to true. | ||
| Here's an example: | ||
| ```ts | ||
@@ -84,18 +91,26 @@ import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' | ||
| ``` | ||
| This approach should be sufficient unless you are using custom injection code to insert styles where needed. | ||
| Since the dev environment involve the concept of "update" the style in the DOM this plugin need at least the code that remove from the DOM the injected style. | ||
| Because of all of this, **if you are using custom injection code (by using `injectCode` or `injectCodeFunction`)**, this plugin can't know how to delete the style you injected. | ||
| So all you need to do is configure one of `removeStyleCode`, `removeStyleCodeFunction` inside the dev object showed above. | ||
| **NOTE:** The `injectCode` and `injectCodeFunction` parameters now also include the `attributes`, and in dev mode, the attributes object encompasses the `data-vite-dev-id` as well. Refer to the `injectCodeFunction` example below for further details. | ||
| This approach should serve its purpose effectively unless you're employing custom injection code to insert styles where | ||
| necessary. Since the development environment involves the concept of "updating" styles in the Document Object Model ( | ||
| DOM), this plugin requires code to remove the injected style from the DOM. | ||
| Due to these factors, if you're utilizing custom injection code (via `injectCode` or `injectCodeFunction`), the plugin | ||
| cannot automatically discern how to delete the injected style. Therefore, all you need to do is configure | ||
| either `removeStyleCode` or `removeStyleCodeFunction` within the `dev` object as demonstrated above. | ||
| **NOTE:** The `injectCode` and `injectCodeFunction` parameters now also include the `attributes`, and in `dev` mode, | ||
| the `attributes` object encompasses the `data-vite-dev-id` as well. Refer to the `injectCodeFunction` example below for | ||
| further details. | ||
| #### injectCode (function) | ||
| You can provide also a function for `injectCode` param to customize the injection code used. | ||
| The `injectCode` callback must return a `string` (with valid JS code) and it's called with two arguments: | ||
| You can provide also a function for `injectCode` param to customize the injection code used. The `injectCode` callback | ||
| must return a `string` (with valid JS code) and it's called with two arguments: | ||
| - cssCode (the `string` that contains all the css code that need to be injected via JavaScript) | ||
| - options (an object with `styleId`, `useStrictCSP` and `attributes` the last is an object that represent the attributes of the style element that should have) | ||
| - options (an object with `styleId`, `useStrictCSP` and `attributes` the last is an object that represent the attributes | ||
| of the style element that should have) | ||
| This is an example: | ||
| ```ts | ||
@@ -122,3 +137,4 @@ import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' | ||
| - cssCode (the `string` that contains all the css code that need to be injected via JavaScript) | ||
| - options (an object with `styleId`, `useStrictCSP` and `attributes` the last is an object that represent the attributes of the style element that should have) | ||
| - options (an object with `styleId`, `useStrictCSP` and `attributes` the last is an object that represent the attributes | ||
| of the style element that should have) | ||
@@ -142,3 +158,3 @@ This is an example: | ||
| } | ||
| elementStyle.appendChild(document.createTextNode(${cssCode})); | ||
@@ -179,4 +195,4 @@ document.head.appendChild(elementStyle); | ||
| In this example, the CSS injection code will only be added to the `index.js` file. If you wish to add the code to multiple | ||
| files, you can specify them in the function: | ||
| In this example, the CSS injection code will only be added to the `index.js` file. If you wish to add the code to | ||
| multiple files, you can specify them in the function: | ||
@@ -223,6 +239,8 @@ ```javascript | ||
| _This feature is based on information provided by Vite. Since we can't control how Vite handles this information this means that there may be problems that may not be possible to fix them in this plugin._ | ||
| _This feature is based on information provided by Vite. Since we can't control how Vite handles this information this | ||
| means that there may be problems that may not be possible to fix them in this plugin._ | ||
| The default behavior of this plugin takes all the CSS code of your application directly to the entrypoint generated. | ||
| The `relativeCSSInjection` if configured to `true` will inject the CSS code of every entrypoint to the relative importer. | ||
| The `relativeCSSInjection` if configured to `true` will inject the CSS code of every entrypoint to the relative | ||
| importer. | ||
@@ -232,6 +250,7 @@ **Set this option to `true` if you are using the multiple entry point option of Rollup.** | ||
| _Future release can have an advanced behavior where this options will be configured to true automatically by sniffing user configurations._ | ||
| _Future release can have an advanced behavior where this options will be configured to true automatically by sniffing | ||
| user configurations._ | ||
| If a CSS chunk is generated that's not imported by any JS chunk, a warning will be shown. | ||
| To disable this warning set `suppressUnusedCssWarning` to `true`. | ||
| If a CSS chunk is generated that's not imported by any JS chunk, a warning will be shown. To disable this warning | ||
| set `suppressUnusedCssWarning` to `true`. | ||
@@ -262,3 +281,4 @@ #### styleId (string | function) | ||
| 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. | ||
| 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. | ||
@@ -276,2 +296,3 @@ ```ts | ||
| ```html | ||
| <head> | ||
@@ -322,3 +343,3 @@ <style id="foo-1234">/* Generated CSS rules */</style> | ||
| When you make changes to plugin locally, you may want to build the js from the typescript file of the plugin. | ||
| When you make changes to plugin locally, you may want to build the js from the typescript file of the plugin. | ||
@@ -347,5 +368,7 @@ Here the guidelines: | ||
| ### A note for plugin-legacy users | ||
| ### A note for plugin-legacy users | ||
| At first the plugin supported generating the CSS injection code also in the legacy files generated by the [plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy). Since the plugin-legacy injects the CSS code for [different reasons](https://github.com/vitejs/vite/issues/2062), this plugin no longer has the plugin-legacy support code. | ||
| If the code of the plugin-legacy changes an update to this plugin may occur. | ||
| At first the plugin supported generating the CSS injection code also in the legacy files generated by | ||
| the [plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy). Since the plugin-legacy injects | ||
| the CSS code for [different reasons](https://github.com/vitejs/vite/issues/2062), this plugin no longer has the | ||
| plugin-legacy support code. If the code of the plugin-legacy changes an update to this plugin may occur. |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.26%
62092
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by6.78%
362
No dependency changes