The goal is to use the 'build.target' of the root Vite project (configured by the plugin's users) instead of the default one currently provided 'es2015'

The goal of this Issue is to track the new release.

Hello,

i am building a vue3 component library with vite. I am trying to inline the css so that css is not excluded from bundle file.
Therefore i found your library. I am trying to use it. But whatever i do, the "inlined" code always contain empty text node for the styles. i followed your documentation
I created a very basic stackblitz to showcase. When you run "npm run build" and check dist folder, the inlined code... does not contain the styles:
https://stackblitz.com/edit/inline-css-in-js-not-working?file=vite.config.js,index.js,package.json,style.css&terminal=dev

What i am doing wrong here?

I'n using relativeCSSInjection to build a UI library with 2 components Comp1 and Comp2. This works fine and generates different entries for consuming the library:

• lib.js: contains all components with embedded css
• Comp1.js: contains component 1 with embedded css
• Comp2.js: contains component 2 with embedded css

When consuming this library, I'd like to use named imports like this:

import { Comp1 } from 'lib.js'; // Component 2 is included in bundle

Even though I'm not using Comp2, it will be included in the bundle:

When consuming this library with a direct import like this:

import Comp1 from 'Comp1.js'; // Component 2 is not included in bundle = desired behaviour)

In this case, Comp2 won't be included in the bundle (= desired behaviour):

You can find a reproduction repository here: https://github.com/adriaanmeuris/css-injected-by-js-issue

I did some research and I think this might be caused by vitejs/vite#4389.

Can you confirm this is the cause of this behaviour, and if not: how can I use named imports without having other components being included in the final bundle?

check here for details: https://github.com/tjx666/vite-plugin-css-injected-by-js-issue/tree/b7d9d9f415898765342ae13308f2c473611f5fe1

Versions:

  System:
    OS: macOS 13.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 862.39 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/Library/Caches/fnm_multishells/6928_1675997629097/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/6928_1675997629097/bin/yarn
    npm: 9.4.2 - ~/Library/Caches/fnm_multishells/6928_1675997629097/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    @vitejs/plugin-vue2: ^2.2.0 => 2.2.0 
    @vitejs/plugin-vue2-jsx: ^1.1.0 => 1.1.0 
    vite: ^4.0.4 => 4.0.4 
    vite-plugin-css-injected-by-js: ^3.0.0 => 3.0.0 
    vite-plugin-vue-type-imports: ^0.2.4 => 0.2.4 

The purpose is to add some code to add style to the generated legacy bundle as well as to the standard bundle. This way the end-user will still have the piece of code that adds the CSS to the page.

Hi,

I am having a very minimalistic setup with vuetify and your plugin, I have scaffolded the project, added those two plugins, and the vite.config.ts looks like this:

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vuetify({
      autoImport: true,
      /* avoid changes to sass config if possible
      styles: {
        configFile: 'src/theme/settings.scss',
      },
      */
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

When I run the npm run build, it generates only js files as expected, when I open the index.html and click on the 'About' link, it tries loading some AboutView-xxxxxx.css, which is not generated.

I assume that this plugin injects css in js, but does not remove a potential import for vuetify css files?
Any idea / help would be appreciated. I'm happy to provide more info if needed.

When using the plugin the resulting HTML file generate should NOT contain the link to the non existing css chunk. However it still seems to be generated and points at nothing.

Am I missing something?

Vite: v2.8.0 and 2.9.0 tested

Config

// vite.config.js
const { defineConfig } = require('vite')
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'


module.exports = defineConfig({
  plugins: [
    cssInjectedByJsPlugin()
  ],
  build: {
    assetsDir: '',
    rollupOptions: {
      output: {
        dir: undefined,
        manualChunks: undefined,
        file: './dist/foo.js',
      },
    },
  }
})

Result

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Foo Example</title>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet" />
  <script type="module" crossorigin src="./foo.js"></script>
  <link rel="stylesheet" href="./index.61bb7400.css"> <!-- SHOULD NOT BE HERE -->
</head>

<body>
  <div id="test-button"></div>
  <div id="example-container"></div>
  
</body>

</html>

The goals of new major release are:

• Build and publish this library in cjs and esm.
• Use only generateBundle to avoid conflicts with other plugins.

It is possible for the CSS to be injected by the JS generated will be blocked from running with certain configurations of CSPs.

Working from prior-art, react-jss supports runtime nonce resolution based on a <meta> tag:

https://cssinjs.org/csp/?v=v10.9.2.

I would like to support a useStrictCSP configuration option that adds a nonce to style tags based on <meta property="csp-nonce" content={{ nonce }} />

When using with Next.js or any other framework for Server Side Rendering it will throw the error. It won't fail because it's wrapped with try/catch block (https://github.com/Marco-Prontera/vite-plugin-css-injected-by-js/blob/main/src/utils.ts#L51-L53). But still it would be better to check if this is rendered on the server with:typeof window !== 'undefined' so that this is not logged at all.

Output when trying to use lib that is built while using vite-plugin-css-injected-by-js plugin and then rendered on the server:
vite-plugin-css-injected-by-js ReferenceError: document is not defined

The hashcode for injected style is no correspending to component
like this

my config

How can i fix it?

check here: https://github.com/tjx666/vite-plugin-css-injected-by-js-issue/tree/947eff9f8707b606a8873d571c0dc914cb600183

Versions:

System:
    OS: macOS 13.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 1.15 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/Library/Caches/fnm_multishells/6278_1675997414513/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/6278_1675997414513/bin/yarn
    npm: 9.4.2 - ~/Library/Caches/fnm_multishells/6278_1675997414513/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    @vitejs/plugin-vue2: ^2.2.0 => 2.2.0 
    @vitejs/plugin-vue2-jsx: ^1.1.0 => 1.1.0 
    vite: ^4.0.4 => 4.0.4 
    vite-plugin-css-injected-by-js: ^3.0.0 => 3.0.0 
    vite-plugin-vue-type-imports: ^0.2.4 => 0.2.4 

Good afternoon)
If css styles have an element ::before
content: '🗸', it is converted to content:"\2714" and an error occurs
Uncaught SyntaxError: Octal escape sequences are not allowed in template strings.

Works fine with default "es" format but the CSS doesn't get added to the JS when format="iife". Is there a way to make that work?

Like #18.

base can be an empty string (doc).

base: './' works well, but base: '' not work.

I get the following error when building with v2.0.0 in an ESM environment. Build works fine in with v1.5.1

> NODE_ENV=production vite build

failed to load config from /home/user/development/packages/header/vite.config.js
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/user/development/packages/header/node_modules/vite-plugin-css-injected-by-js/dist/esm/utils' imported from /home/user/development/packages/header/node_modules/vite-plugin-css-injected-by-js/dist/esm/index.js
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:437:11)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36)

Likely this import should end with '.js' to be esm compatible: import { buildCSSInjectionCode, removeLinkStyleSheets } from './utils';

For multiple entry points mode, the plugin will add all CSS assets to all JS codes that are not optimized.
One JS imports each CSS asset and it can be added to that JS asset.

Is there a way to output just a single .js file, rather than output html and js?
I want to use this to create web components that can be added with just a script tag.

Thanks,
Marc

Does not appear to be working with vite v4 (and @vitejs/plugin-react v3 if that matters)

It seems to silently fail and not include the css anywhere.

🚀 Enhancement Request

Is your enhancement request related to a problem? Please describe.

• Introduced a coverage report with Istanbul which integrates with Vitest
• I wrote tests to increase coverage

Describe the solution you'd like

/

Describe alternatives you've considered

A possible alternative of Istanbul is: c8.

Additional context

/

I'm using Nuxt 3. The package doesn't work for developer mode for me. Everything is fine in the production. Do you have an idea how to solve it?
Prod <head>:

Dev <head>:

topExecutionPriority changed from:
topExecutionPriority?: boolean;

to:
topExecutionPriority?: true;

The styleId parameter is not used as it is outside of a template string

I added cssInjectedByJsPlugin to my vite.config.ts for a svelte project like this:

$ pnpm i -D vite-plugin-css-injected-by-js

import { defineConfig } from 'vite'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
[...]

const production = process.env.NODE_ENV === 'production';
const config = defineConfig({
	envDir: '.wb',
	plugins: [
		tsconfigPaths(),
		svelte({
			emitCss: false,
			preprocess: sveltePreprocess({ postcss: true })
		}),
		cssInjectedByJsPlugin({topExecutionPriority: true}),
		production && viteSingleFile(),
[...]

And i get the following error:

$ pnpx vite build
failed to load config from /home/sas/devel/apps/glas-it/apps/wingback/tmp/wingback-js/vite.config.ts
error during build:
TypeError: cssInjectedByJsPlugin is not a function
    at file:///home/sas/devel/apps/glas-it/apps/wingback/tmp/wingback-js/vite.config.ts.js?t=1647650456592:27:5
    at ModuleJob.run (internal/modules/esm/module_job.js:170:25)

But if I use cssInjectedByJsPlugin.default({topExecutionPriority: true}), it works ok

Additional info

$ npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"

  System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 545.63 MB / 15.08 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Brave Browser: 99.1.36.116
    Chrome: 99.0.4844.74
    Firefox: 98.0.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.33 
    @sveltejs/adapter-static: ^1.0.0-next.29 => 1.0.0-next.29 
    @sveltejs/kit: next => 1.0.0-next.301 
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.40 => 1.0.0-next.40 
    svelte: ^3.44.0 => 3.46.4 
    vite: ^2.8.6 => 2.8.6

`

//deps
	"devDependencies": {
		"@babel/core": "^7.17.8",
		"@babel/plugin-transform-runtime": "^7.17.0",
		"@babel/preset-env": "^7.16.11",
		"@rollup/plugin-babel": "^5.3.1",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/adapter-static": "^1.0.0-next.29",
		"@sveltejs/kit": "next",
		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
		"@typescript-eslint/eslint-plugin": "^5.10.1",
		"@typescript-eslint/parser": "^5.10.1",
		"autoprefixer": "^10.4.2",
		"eslint": "^7.32.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^3.2.1",
		"mauss": "^0.2.3",
		"postcss": "^8.4.5",
		"postcss-load-config": "^3.1.1",
		"prettier": "^2.5.1",
		"prettier-plugin-svelte": "^2.5.0",
		"rollup": "^2.70.1",
		"svelte": "^3.44.0",
		"svelte-check": "^2.2.6",
		"svelte-preprocess": "^4.10.1",
		"tailwindcss": "^3.0.12",
		"tslib": "^2.3.1",
		"typescript": "~4.6.2",
		"vite": "^2.8.6",
		"vite-plugin-css-injected-by-js": "^1.2.1",
		"vite-plugin-singlefile": "^0.7.1",
		"vite-tsconfig-paths": "^3.4.1"
	},

I am using build.manifest=true option

In the generated file, I observe non-existent css files:

  "_vendor.19516c05.js": {
    "css": [
      "js/vendor.0b4d51a1.css"
    ],
    "file": "js/vendor.19516c05.js"
  },

The goal of this issue is to provide more specific documentation about the project.

Remove font-size and cursor properties:

After Reloading，it generated a new ".en-rte-toolbar-item" style，but the old one didn't remove and it made removing CSS properties not works.

Hi, I'm building a React library using this vite config:

import { defineConfig } from 'vite';
import { buildPlugin } from 'vite-plugin-build';
import react from '@vitejs/plugin-react';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

const isWatch = process.env.npm_lifecycle_event === 'watch';

export default defineConfig({
  plugins: [
    react(),
    buildPlugin({
      fileBuild: {
        ignoreInputs: ['./src/playground/*', './src/stories/*'],
        emitDeclaration: true,
        esOutputDir: './build',
        commonJsOutputDir: false,
        ...(isWatch && { watch: {} })
      }
    }),
    cssInjectedByJsPlugin({})
  ]
});

My issue is that I would like to have an option in the cssInjectedByJsPlugin to exclude some css files from being injected. Is there a way to do that?

When using the plugin and providing params:

cssInjectedByJsPlugin({ topExecutionPriority: false, styleId: 'marketplaceStylesheet', })

The ID is added to the created element but not as a string and instead as a variable:

var t=document.createElement("style");t.id=marketplaceStylesheet

The types as defined for the plugins arguments are:

{ topExecutionPriority: boolean; styleId: string; } | undefined;

Which means that you can either provide both arguments or none, there should be the ability to add only one of the arguments.

I'd suggest a simple change like:

{ topExecutionPriority?: boolean; styleId?: string; } | undefined;

Firstly, THANK YOU! This plugin has been a life-saver in instances where I am unable to reference additional external assets.

I ran into an issue the other day with strict CSPs preventing style tags from being injected without a nonce. I have since patched this problem locally but wanted to contribute back.

As I read through the code, I found myself nervous to change code, as the generated code must all be handled as a string e.g.

const defaultInjectCode: InjectCode = (cssCode, { styleId }) =>
    `try{if(typeof document != 'undefined'){var elementStyle = document.createElement('style');${
        typeof styleId == 'string' && styleId.length > 0 ? `elementStyle.id = '${styleId}';` : ''
    }elementStyle.appendChild(document.createTextNode(${cssCode}));document.head.appendChild(elementStyle);}}catch(e){console.error('vite-plugin-css-injected-by-js', e);}`;

I believe we can make this simpler for consumers of this plugin to be able to write JavaScript or TypeScript and still generate the code to inject into browsers.

Proposal:

Currently the injectCode function has the following type:

export type InjectCode = (cssCode: string, options: InjectCodeOptions) => string;

If instead we make this type:

export type InjectCode = (cssCode: string, options: InjectCodeOptions) => void;

we can use string interpolation and an IIFE format to ease the development of custom injection code, a, la:

function injectStyleTag(cssCode: string, options: { styleId?: string }) {
    try {
        if (typeof document != 'undefined') {
            const $style = document.createElement('style');
            if (options.styleId && options.styleId.length > 0) {
               $style.id = options.styleId
            }
            $style.appendChild(document.createTextNode(cssCode));
            document.head.appendChild($style);
        }
    } catch (e) {
        console.error('vite-plugin-css-injected-by-js', e);
    }
}

By doing so, we allow consumers to write a function as they would expect to be able to write in-browser, and we can then transform this to:

   /* omitted  remainder of plugin for brevity */
   return `(${injectStyleTag})(${cssCode}, ${JSON.stringify({ styleId })})`

This works thanks to the fact that calling .toString() on a function , returns the entirety of the function definition as a string.

This change will allow for more confident development of injected code, as we would then have the full power of TypeScript type checking, syntax highlighting, and generally less error-prone development since we're not relying on constructing a string other than in a singular place.

When the style tag is created, any CSS @import rules have the opportunity to not be created at the top of the style tag. This causes the import rule to not fetch the associated CSS and therefore not be included in the final style sheet.

This can be reproduced using the following code:

var A = document.createElement("style");
A.textContent = 
`
div {
    background-color: blue;
}

@import "https://YourCssFileHere.css";
`;

document.head.appendChild(A);

Is there anyway we can force all @import rules to be specified at the top of the style tag?

Thanks.

Hi.. love your tool. However.. it still seems to generate css cunks?

what am i missing? :)

`import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/scss/variables";'
}
}
},
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
});
`

This parameter will allow you to choose the execution priority of the style injection.

hi, I'm having a little trouble,
my css file

body {
  background: #000;
}
div {
  color: #fff;
}

output

(function(){ try {var elementStyle = document.createElement('style'); elementStyle.innerText = "body {\n  background: #000;\n}\ndiv {\n  color: #fff;\n}"; document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

in html

<style>body {<br>  background: #000;<br>}<br>div {<br>  color: #fff;<br>}</style>

styles doesn't work in IE

Author of PR: #19
I am publishing my ESM bundle with a .mjs file extension. My understanding of vitejs/vite#6827 is that this will become the default in Library Mode to ensure compatibility with Node.js.

Currently, vite-plugin-css-injected-by-js only injects CSS into files whose file name contains .js.

When i import cssInjectedByJsPlugin

import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

With my tsconfig.json as:

{
  "compilerOptions": {
    "moduleResolution": "Node16",
  }
}

I get:

Could not find a declaration file for module 'vite-plugin-css-injected-by-js'. '/package1/node_modules/vite-plugin-css-injected-by-js/dist/esm/index.js' implicitly has an 'any' type.

If i add the following line to vite-plugin-css-injected-by-js/package.json, the issue resolves:

  "exports": {
    ".": {
      + "types": "./dist/esm/declarations/index.d.ts",
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    }
  },

This is in-line with TypeScript's Node 16 ESM suggested package.json.

Awesome package btw. Will submit a PR if this change is supported.

reproduce:

1. git clone [email protected]:tjx666/vite-plugin-css-injected-by-js-issue.git
2. pnpm install
3. pnpm build

versions:

System:
    OS: macOS 13.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 265.79 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/Library/Caches/fnm_multishells/28086_1673512647873/bin/node
    Pnpm: 7.24.3 
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    @vitejs/plugin-vue2: ^2.2.0 => 2.2.0 
    @vitejs/plugin-vue2-jsx: ^1.1.0 => 1.1.0 
    vite: ^4.0.4 => 4.0.4 
    vite-plugin-css-injected-by-js: ^2.3.1 => 2.3.1 
    vite-plugin-vue-type-imports: ^0.2.4 => 0.2.4 

Please see this url for all details