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;