diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..ff7dc09
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 80,
+ "tabWidth": 4,
+ "endOfLine": "auto",
+ "singleQuote": true,
+ "semi": true,
+ "quoteProps": "consistent",
+ "trailingComma": "es5",
+ "bracketSpacing": true,
+ "arrowParens": "always"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index e502cc4..6d2916c 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
- "build": "tsc"
+ "build": "tsc",
+ "format": "prettier 'src/index.ts' --write"
},
"repository": {
"type": "git",
diff --git a/src/index.ts b/src/index.ts
index 3179cf6..82c336d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,17 @@
-import { IndexHtmlTransformContext, IndexHtmlTransformResult, Plugin } from 'vite';
+import {
+ IndexHtmlTransformContext,
+ IndexHtmlTransformResult,
+ Plugin,
+} from 'vite';
/**
* Inject the CSS compiled with JS.
*
* @return {Plugin}
*/
-function cssInjectedByJsPlugin({topExecutionPriority} = { topExecutionPriority: true }): Plugin {
+function cssInjectedByJsPlugin(
+ { topExecutionPriority } = { topExecutionPriority: true }
+): Plugin {
//Globally so we can add it to legacy and non-legacy bundle.
let cssToInject: string = '';
@@ -14,40 +20,35 @@ function cssInjectedByJsPlugin({topExecutionPriority} = { topExecutionPriority:
enforce: 'post',
name: 'css-in-js-plugin',
generateBundle(opts, bundle) {
-
let styleCode = '';
for (const key in bundle) {
-
if (bundle[key]) {
-
const chunk = bundle[key];
- if (chunk.type === 'asset' && chunk.fileName.includes('.css')) {
-
+ if (
+ chunk.type === 'asset' &&
+ chunk.fileName.includes('.css')
+ ) {
styleCode += chunk.source;
delete bundle[key];
-
}
-
}
-
}
if (styleCode.length > 0) {
-
- cssToInject = styleCode.trim();
-
+ cssToInject = styleCode;
}
for (const key in bundle) {
-
if (bundle[key]) {
-
const chunk = bundle[key];
- if (chunk.type === 'chunk' && chunk.fileName.includes('.js') && !chunk.fileName.includes('polyfill')) {
-
+ if (
+ chunk.type === 'chunk' &&
+ chunk.fileName.includes('.js') &&
+ !chunk.fileName.includes('polyfill')
+ ) {
let topCode: string = '';
let bottomCode: string = '';
if (topExecutionPriority) {
@@ -56,45 +57,45 @@ function cssInjectedByJsPlugin({topExecutionPriority} = { topExecutionPriority:
topCode = chunk.code;
}
- chunk.code = `${topCode}(function(){ try {var elementStyle = document.createElement('style'); elementStyle.innerText = \`${cssToInject}\`; document.head.appendChild(elementStyle);} catch(e) {console.error(e, 'vite-plugin-css-injected-by-js: error when trying to add the style.');} })();${bottomCode}`;
+ chunk.code = topCode;
+ chunk.code +=
+ "(function(){ try {var elementStyle = document.createElement('style'); elementStyle.innerText = ";
+ chunk.code += JSON.stringify(cssToInject.trim());
+ chunk.code +=
+ "; document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();";
+ chunk.code += bottomCode;
break;
-
}
-
}
-
}
-
},
transformIndexHtml: {
- enforce: "post",
- transform(html: string, ctx?: IndexHtmlTransformContext): IndexHtmlTransformResult {
-
+ enforce: 'post',
+ transform(
+ html: string,
+ ctx?: IndexHtmlTransformContext
+ ): IndexHtmlTransformResult {
if (!ctx || !ctx.bundle) return html;
for (const [, value] of Object.entries(ctx.bundle)) {
-
if (value.fileName.endsWith('.css')) {
-
// Remove CSS link from HTML generated.
- const reCSS = new RegExp(`]*?href="/${value.fileName}"[^>]*?>`);
+ const reCSS = new RegExp(
+ `]*?href="/${value.fileName}"[^>]*?>`
+ );
html = html.replace(reCSS, '');
-
}
-
}
return html;
-
},
},
};
-
}
-module.exports = cssInjectedByJsPlugin
+module.exports = cssInjectedByJsPlugin;
-cssInjectedByJsPlugin.default = cssInjectedByJsPlugin
+cssInjectedByJsPlugin.default = cssInjectedByJsPlugin;
-export default cssInjectedByJsPlugin;
\ No newline at end of file
+export default cssInjectedByJsPlugin;