Skip to content

Conversation

@easymikey
Copy link
Contributor

Description

Improve lightningcss in Deno. Fix the resulting css when build artifacts with lightningcss.

The previous fix was within the scope of this PR

Initial css

h1 {
  font-size: 24px;
}

.main {
  border: 1px solid gray;
  color: red;
}

Incorrect result css

104,49,123,102,111,110,116,45,115,105,122,101,58,50,52,112,120,125,46,103,80,77,114,69,87,95,109,97,105,110,123,99,111,108,111,114,58,114,101,100,59,98,111,114,100,101,114,58,49,112,120,32,115,111,108,105,100,32,103,114,97,121,12558,114,111,111,116,123,45,45,108,105,103,104,116,110,105,110,103,99,115,115,45,108,105,103,104,116,58,105,110,105,116,105,97,108,59,45,45,108,105,103,104,116,110,105,110,103,99,115,115,45,100,97,114,107,58,32,59,99,111,108,111,114,45,115,99,104,101,109,101,58,108,105,103,104,116,32,100,97,114,107,59,99,111,108,111,114,58,35,102,102,102,102,102,102,100,101,59,102,111,110,116,45,115,121,110,116,104,101,115,105,115,58,110,111,110,101,59,116,101,120,116,45,114,101,110,100,101,114,105,110,103,58,111,112,116,105,109,105,122,101,108,101,103,105,98,105,108,105,116,121,59,45,119,101,98,107,105,116,45,102,111,110,116,45,115,109,111,111,116,104,105,110,103,58,97,110,116,105,97,108,105,97,115,101,100,59,45,109,111,122,45,111,115,120,45,102,111,110,116,45,115,109,111,111,116,104,105,110,103,58,103,114,97,121,115,99,97,108,101,59,98,97,99,107,103,114,111,117,110,100,45,99,111,108,111,114,58,35,50,52,50,52,50,52,59,102,111,110,116,45,102,97,109,105,108,121,58,73,110,116,101,114,44,115,121,115,116,101,109,45,117,105,44,45,97,112,112,108,101,45,115,121,115,116,101,109,44,66,108,105,110,107,77,97,99,83,121,115,116,101,109,70,111,110,116,44,83,101,103,111,101,32,85,73,44,82,111,98,111,116,111,44,78,111,116,111,32,83,97,110,115,44,85,98,117,110,116,117,44,67,97,110,116,97,114,101,108,108,44,72,101,108,118,101,116,105,99,97,32,78,101,117,101,44,65,118,101,110,105,114,44,72,101,108,118,101,116,105,99,97,44,65,114,105,97,108,44,115,97,110,115,45,115,101,114,105,102,59,102,111,110,116,45,119,101,105,103,104,116,58,52,48,48,59,108,105,110,101,45,104,101,105,103,104,116,58,49,46,53,125,64,109,101,100,105,97,32,40,112,114,101,102,101,114,115,45,99,111,108,111,114,45,115,99,104,101,109,101,58,100,97,114,107,41,123,58,114,111,111,116,123,45,45,108,105,103,104,116,110,105,110,103,99,115,115,45,108,105,103,104,116,58,32,59,45,45,108,105,103,104,116,110,105,110,103,99,115,115,45,100,97,114,107,58,105,110,105,116,105,97,108,125,125,97,123,99,111,108,111,114,58,35,54,52,54,99,102,102,59,45,119,101,98,107,105,116,45,116,101,120,116,45,100,101,99,111,114,97,116,105,111,110,58,105,110,104,101,114,105,116,59,116,101,120,116,45,100,101,99,111,114,97,116,105,111,110,58,105,110,104,101,114,105,116,59,102,111,110,116,45,119,101,105,103,104,116,58,53,48,48,125,97,58,104,111,118,101,114,123,99,111,108,111,114,58,35,53,51,53,98,102,50,125,98,111,100,121,123,112,108,97,99,101,45,105,116,101,109,115,58,99,101,110,116,101,114,59,109,105,110,45,119,105,100,116,104,58,51,50,48,112,120,59,109,105,110,45,104,101,105,103,104,116,58,49,48,48,118,104,59,109,97,114,103,105,110,58,48,59,100,105,115,112,108,97,121,58,102,108,101,120,125,104,49,123,102,111,110,116,45,115,105,122,101,58,51,46,50,101,109,59,108,105,110,101,45,104,101,105,103,104,116,58,49,46,49,125,98,117,116,116,111,110,123,99,117,114,115,111,114,58,112,111,105,110,116,101,114,59,98,97,99,107,103,114,111,117,110,100,45,99,111,108,111,114,58,35,49,97,49,97,49,97,59,98,111,114,100,101,114,58,49,112,120,32,115,111,108,105,100,32,35,48,48,48,48,59,98,111,114,100,101,114,45,114,97,100,105,117,115,58,56,112,120,59,112,97,100,100,105,110,103,58,46,54,101,109,32,49,46,50,101,109,59,102,111,110,116,45,102,97,109,105,108,121,58,105,110,104,101,114,105,116,59,102,111,110,116,45,115,105,122,101,58,49,101,109,59,102,111,110,116,45,119,101,105,103,104,116,58,53,48,48,59,116,114,97,110,115,105,116,105,111,110,58,98,111,114,100,101,114,45,99,111,108,111,114,32,46,50,53,115,125,98,117,116,116,111,110,58,104,111,118,101,114,123,98,111,114,100,101,114,45,99,111,108,111,114,58,35,54,52,54,99,102,102,125,98,117,116,116,111,110,58,102,111,99,117,115,123,111,117,116,108,105,110,101,58,52,112,120,32,97,117,116,111,32,45,119,101,98,107,105,116,45,102,111,99,117,115,45,114,105,110,103,45,99,111,108,111,114,125,98,117,116,116,111,110,58,102,111,99,117,115,45,118,105,115,105,98,108,101,123,111,117,116,108,105,110,101,58,52,112,120,32,97,117,116,111,32,45,119,101,98,107,105,116,45,102,111,99,117,115,45,114,105,110,103,45,99,111,108,111,114,125,64,109,101,100,105,97,32,40,112,114,101,102,101,114,115,45,99,111,108,111,114,45,115,99,104,101,109,101,58,108,105,103,104,116,41,123,58,114,111,111,116,123,99,111,108,111,114,58,35,50,49,51,53,52,55,59,98,97,99,107,103,114,111,117,110,100,45,99,111,108,111,114,58,35,102,102,102,125,97,58,104,111,118,101,114,123,99,111,108,111,114,58,35,55,52,55,98,102,102,125,98,117,116,116,111,110,123,98,97,99,107,103,114,111,117,110,100,45,99,111,108,111,114,58,35,102,57,102,57,102,57,125,125{}
Uint8Array(63) [
  104,  49, 123, 102, 111, 110, 116,  45, 115, 105, 122,
  101,  58,  50,  52, 112, 120, 125,  46, 103,  80,  77,
  114,  69,  87,  95, 109,  97, 105, 110, 123,  99, 111,
  108, 111, 114,  58, 114, 101, 100,  59,  98, 111, 114,
  100, 101, 114,  58,  49, 112, 120,  32, 115, 111, 108,
  105, 100,  32, 103, 114,  97, 121, 125
]

Correct result css

h1{font-size:24px}.gPMrEW_main{color:red;border:1px solid gray}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus{outline:4px auto -webkit-focus-ring-color}button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
<Buffer 68 31 7b 66 6f 6e 74 2d 73 69 7a 65 3a 32 34 70 78 7d 2e 67 50 4d 72 45 57 5f 6d 61 69 6e 7b 63 6f 6c 6f 72 3a 72 65 64 3b 62 6f 72 64 65 72 3a 31 70 ... >
<Buffer 3a 72 6f 6f 74 7b 2d 2d 6c 69 67 68 74 6e 69 6e 67 63 73 73 2d 6c 69 67 68 74 3a 69 6e 69 74 69 61 6c 3b 2d 2d 6c 69 67 68 74 6e 69 6e 67 63 73 73 2d ... >

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@easymikey
Copy link
Contributor Author

@bluwy I'll ask for your review. You're in the context :)

@easymikey easymikey changed the title fix(css): handle lightningcss build minify in Deno fix(css): handle lightningcss minification in Deno Jun 1, 2024
@easymikey easymikey force-pushed the fix-handle-lightningcss-build-minify branch from daa8d13 to caa6444 Compare June 1, 2024 17:48
Copy link
Member

@bluwy bluwy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@bluwy bluwy merged commit b3f5bd1 into vitejs:main Jun 3, 2024
@easymikey easymikey deleted the fix-handle-lightningcss-build-minify branch June 3, 2024 12:45
@bluwy bluwy mentioned this pull request Jun 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants