fix(css): dynamic import css abnormal after build

[crcong]

Description

fixes #3307

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[loosheng]

Not a good solution

[Shinigami92]

Not a good solution

Could you write a bit more? Currently you response isn't helping that much and lags constructive criticism.

[loosheng]

@Shinigami92

The build results of this solution.

➜  vite-dynamic-import-css-bug git:(master) ✗ vite build
vite v2.2.4 building for production...
✓ 29 modules transformed.
dist/assets/favicon.17e50649.svg                1.49kb
dist/assets/logo.ecc203fb.svg                   2.61kb
dist/index.html                                 0.51kb
dist/assets/prism-dark.f572c810.js              2.07kb / brotli: 0.72kb
dist/assets/prism-coy.4767b4bd.js               3.98kb / brotli: 1.17kb
dist/assets/index.7f30d087.js                   4.70kb / brotli: 1.47kb
dist/assets/prism-funky.1775e813.js             2.49kb / brotli: 0.88kb
dist/assets/prism-okaidia.e931d2ae.js           1.82kb / brotli: 0.65kb
dist/assets/prism-solarizedlight.0cb371c7.js    2.61kb / brotli: 0.88kb
dist/assets/prism-tomorrow.4a3e6ba8.js          1.78kb / brotli: 0.63kb
dist/assets/index.91183920.css                  0.95kb / brotli: 0.44kb
dist/assets/prism.5e564076.js                   2.32kb / brotli: 0.73kb
dist/assets/prism-twilight.04b716de.js          4.07kb / brotli: 1.20kb
dist/assets/prism-funky.422e6503.css            2.43kb / brotli: 0.85kb
dist/assets/prism-coy.8a0332f9.css              3.93kb / brotli: 1.15kb
dist/assets/prism-dark.7afa6b6d.css             2.02kb / brotli: 0.71kb
dist/assets/prism-okaidia.4f5094c8.css          1.77kb / brotli: 0.63kb
dist/assets/prism-tomorrow.c6dca402.css         1.72kb / brotli: 0.61kb
dist/assets/prism-solarizedlight.da04807d.css   2.54kb / brotli: 0.85kb
dist/assets/prism.82d85f70.css                  2.28kb / brotli: 0.72kb
dist/assets/prism-twilight.2e1efe57.css         4.01kb / brotli: 1.19kb
dist/assets/vendor.de62f314.js                  194.77kb / brotli: 41.34kb

where dist/assets/prism-dark.7afa6b6d.css and dist/assets/prism-dark.f572c810.js are almost identical and dist/assets/prism-dark.f572c810.js is useless . The same applies to several others.

---

dist/assets/prism-dark.7afa6b6d.css:

/**
 * prism.js Dark theme for JavaScript, CSS and HTML
 * Based on the slides of the talk “/Reg(exp){2}lained/”
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: white;
	background: none;
	text-shadow: 0 -.1em .2em black;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
	background: hsl(30, 20%, 25%);
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border: .3em solid hsl(30, 20%, 40%);
	border-radius: .5em;
	box-shadow: 1px 1px .5em black inset;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .15em .2em .05em;
	border-radius: .3em;
	border: .13em solid hsl(30, 20%, 40%);
	box-shadow: 1px 1px .3em -.1em black inset;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: hsl(30, 20%, 50%);
}

.token.punctuation {
	opacity: .7;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
	color: hsl(350, 40%, 70%);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: hsl(75, 70%, 60%);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: hsl(40, 90%, 60%);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: hsl(350, 40%, 70%);
}

.token.regex,
.token.important {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.deleted {
	color: red;
}

dist/assets/prism-dark.f572c810.js:

var prismDark = `/**
 * prism.js Dark theme for JavaScript, CSS and HTML
 * Based on the slides of the talk \u201C/Reg(exp){2}lained/\u201D
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: white;
	background: none;
	text-shadow: 0 -.1em .2em black;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
	background: hsl(30, 20%, 25%);
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border: .3em solid hsl(30, 20%, 40%);
	border-radius: .5em;
	box-shadow: 1px 1px .5em black inset;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .15em .2em .05em;
	border-radius: .3em;
	border: .13em solid hsl(30, 20%, 40%);
	box-shadow: 1px 1px .3em -.1em black inset;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: hsl(30, 20%, 50%);
}

.token.punctuation {
	opacity: .7;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
	color: hsl(350, 40%, 70%);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: hsl(75, 70%, 60%);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: hsl(40, 90%, 60%);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: hsl(350, 40%, 70%);
}

.token.regex,
.token.important {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.deleted {
	color: red;
}
`;
export default prismDark;

[crcong]

@Lunagod Thank you for your response. Indeed the existence of this problem.
Later, I will try to fix it to only generate js or css files.

[crcong]

During the build process, the css file was retained, and the js bundle was removed as before.

[insertish]

Hi, sorry for bugging everyone, I just ran into this issue and I'm just wondering if this is going to be merged soon considering the fix is almost, if not already ready?

I don't usually comment on public repositories, so I apologize if I'm out of place.

In case it's relevant, I'm sure it's not but just in case, issue can be reproduced with commit 1c80d56 on my repo and it was fixed in commit b19479f by applying the latest patch.

Thank you! 🙂

---

For anyone else who runs into this issue and needs a quick fix, I built and published the fix to @insertish/vite@2.2.4-dynamic-import-css-f428476.

If using yarn, install it as such: yarn add vite@npm:@insertish/vite@2.2.4-dynamic-import-css-f428476

Edit: I've built the latest commit again too: @insertish/vite@2.4.0-beta.3-dynamic-import-css-3c1466b
I was having some issues with mediasoup but the merge fixed everything, thank you again for picking up this issue =)

[Shinigami92]

@Lunagod could you have a look after the rebase and tell if it still is a bad solution, or if it is now better?

[loosheng]

@Shinigami92 Better, solves the problem I raised.

[crcong]

@Shinigami92 Rebased. Thanks.

[BogdanArvinte]

Hey,

Any updates on this PR?
I'm also eagerly waiting for this fix to be merged and released.

Thanks!

[crcong]

@Shinigami92 Rebased again. Can you review my code when you are free? Thanks.

[hex-ci]

This PR caused an issue: #4731

And I tried to fix it: #4740

[crcong]

@hex-ci I think it was caused by my carelessness. This PR is in May, and your PR is changed to July. I didn't notice when I merge master.

[hex-ci]

Haha, it is indeed a problem caused by the time difference. @crcong