fix(css): dynamic import css abnormal after build #3333

crcong · 2021-05-10T08:02:10Z

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 · 2021-05-10T09:30:35Z

Not a good solution

Shinigami92 · 2021-05-10T10:16:56Z

Not a good solution

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

loosheng · 2021-05-10T11:02:35Z

@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 · 2021-05-10T14:59:26Z

@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 · 2021-05-11T11:54:12Z

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

insertish · 2021-07-04T20:23:10Z

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/[email protected].

If using yarn, install it as such: yarn add vite@npm:@insertish/[email protected]

Edit: I've built the latest commit again too: @insertish/[email protected]
I was having some issues with mediasoup but the merge fixed everything, thank you again for picking up this issue =)

Shinigami92 · 2021-07-04T20:36:01Z

@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 · 2021-07-05T02:06:49Z

@Shinigami92 Better, solves the problem I raised.

crcong · 2021-07-05T04:21:08Z

@Shinigami92 Rebased. Thanks.

BogdanArvinte · 2021-08-12T08:52:15Z

Hey,

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

Thanks!

crcong · 2021-08-12T15:27:40Z

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

packages/vite/src/node/plugins/importAnalysisBuild.ts

packages/vite/src/node/plugins/css.ts

packages/vite/src/node/plugins/importAnalysisBuild.ts

Co-authored-by: patak <[email protected]>

hex-ci · 2021-08-26T05:06:36Z

This PR caused an issue: #4731

And I tried to fix it: #4740

crcong · 2021-08-26T05:45:00Z

@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 · 2021-08-26T06:12:49Z

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

* fix(css): dynamic import css abnormal after build * fix(css): dynamic import css abnormal after build * fix: dynamicIndex * fix: typo & clear removedPureCssFiles in buildStart * fix: depend on the resolved config * fix: assert Co-authored-by: patak <[email protected]> * fix: assert Co-authored-by: patak <[email protected]> Co-authored-by: patak <[email protected]>

fix(css): dynamic import css abnormal after build

3ae7b24

Shinigami92 added the p3-minor-bug An edge case that only affects very specific usage (priority) label May 10, 2021

crcong marked this pull request as draft May 10, 2021 15:00

fix(css): dynamic import css abnormal after build

f428476

Shinigami92 self-requested a review May 11, 2021 11:46

crcong marked this pull request as ready for review May 11, 2021 11:49

Shinigami92 added the needs rebase label Jul 4, 2021

Shinigami92 marked this pull request as draft July 4, 2021 20:36

chore: merge

3c1466b

crcong marked this pull request as ready for review July 5, 2021 02:40

crcong added 2 commits August 12, 2021 23:06

chore: merge

af3e839

fix: dynamicIndex

9a0457d

Shinigami92 removed the needs rebase label Aug 12, 2021

Shinigami92 approved these changes Aug 12, 2021

View reviewed changes

Shinigami92 reviewed Aug 13, 2021

View reviewed changes

packages/vite/src/node/plugins/importAnalysisBuild.ts Outdated Show resolved Hide resolved

Shinigami92 suggested changes Aug 13, 2021

View reviewed changes

packages/vite/src/node/plugins/css.ts Outdated Show resolved Hide resolved

fix: typo & clear removedPureCssFiles in buildStart

1ec98f3

crcong requested a review from Shinigami92 August 13, 2021 14:59

Shinigami92 previously approved these changes Aug 13, 2021

View reviewed changes

patak-dev requested changes Aug 13, 2021

View reviewed changes

packages/vite/src/node/plugins/css.ts Outdated Show resolved Hide resolved

fix: depend on the resolved config

02b7558

crcong dismissed Shinigami92’s stale review via 02b7558 August 13, 2021 17:44

crcong requested review from patak-dev and Shinigami92 August 13, 2021 17:57

Shinigami92 previously approved these changes Aug 13, 2021

View reviewed changes

patak-dev requested changes Aug 13, 2021

View reviewed changes

packages/vite/src/node/plugins/css.ts Outdated Show resolved Hide resolved

packages/vite/src/node/plugins/importAnalysisBuild.ts Outdated Show resolved Hide resolved

fix: assert

08a74df

Co-authored-by: patak <[email protected]>

crcong dismissed Shinigami92’s stale review via 08a74df August 14, 2021 00:03

fix: assert

d7f4eda

Co-authored-by: patak <[email protected]>

crcong requested review from patak-dev and Shinigami92 August 14, 2021 00:15

patak-dev approved these changes Aug 14, 2021

View reviewed changes

Shinigami92 approved these changes Aug 14, 2021

View reviewed changes

antfu merged commit b572f57 into vitejs:main Aug 16, 2021

This was referenced Aug 26, 2021

Dynamic CSS import fails due to double slashes #4731

Closed

Dynamic CSS import fails because it tries to load JavaScript instead #4718

Closed

This was referenced Sep 10, 2021

fix: dep path could already absolute #4841

Closed

lazy imported modules are not bundled correctly on building #4840

Closed

steveworkman mentioned this pull request Sep 20, 2021

Cannot dynamically import css in a static build #4237

Closed

sapphi-red mentioned this pull request Apr 30, 2022

fix(css): dynamic import css in package fetches removed js (fixes #7955, #6823) #7969

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(css): dynamic import css abnormal after build #3333

fix(css): dynamic import css abnormal after build #3333

crcong commented May 10, 2021

loosheng commented May 10, 2021

Shinigami92 commented May 10, 2021

loosheng commented May 10, 2021

crcong commented May 10, 2021 •

edited

Loading

crcong commented May 11, 2021 •

edited

Loading

insertish commented Jul 4, 2021 •

edited

Loading

Shinigami92 commented Jul 4, 2021

loosheng commented Jul 5, 2021

crcong commented Jul 5, 2021

BogdanArvinte commented Aug 12, 2021

crcong commented Aug 12, 2021

hex-ci commented Aug 26, 2021

crcong commented Aug 26, 2021

hex-ci commented Aug 26, 2021 •

edited

Loading

fix(css): dynamic import css abnormal after build #3333

fix(css): dynamic import css abnormal after build #3333

Conversation

crcong commented May 10, 2021

Description

Additional context

What is the purpose of this pull request?

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

loosheng commented May 10, 2021

Shinigami92 commented May 10, 2021

loosheng commented May 10, 2021

crcong commented May 10, 2021 • edited Loading

crcong commented May 11, 2021 • edited Loading

insertish commented Jul 4, 2021 • edited Loading

Shinigami92 commented Jul 4, 2021

loosheng commented Jul 5, 2021

crcong commented Jul 5, 2021

BogdanArvinte commented Aug 12, 2021

crcong commented Aug 12, 2021

hex-ci commented Aug 26, 2021

crcong commented Aug 26, 2021

hex-ci commented Aug 26, 2021 • edited Loading

crcong commented May 10, 2021 •

edited

Loading

crcong commented May 11, 2021 •

edited

Loading

insertish commented Jul 4, 2021 •

edited

Loading

hex-ci commented Aug 26, 2021 •

edited

Loading