feat(css): minify style tag

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

@@ -248,6 +248,7 @@ const commonjsProxyRE = /[?&]commonjs-proxy/
 const inlineRE = /[?&]inline\b/
 const inlineCSSRE = /[?&]inline-css\b/
 const styleAttrRE = /[?&]style-attr\b/
+const styleTagCloseRE = /<\/style(?=[\t\n\f\r />])/gi
 const functionCallRE = /^[A-Z_][.\w-]*\(/i
 const transformOnlyRE = /[?&]transform-only\b/
 const nonEscapedDoubleQuoteRe = /(?<!\\)"/g
@@ -563,6 +564,11 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
         if (inlineCSS && isHTMLProxy) {
           if (styleAttrRE.test(id)) {
             css = css.replace(/"/g, '&quot;')
+          } else {
+            if (config.command !== 'serve' && config.build.cssMinify) {
+              css = await minifyCSS(css, config, true, id)
+            }
+            css = css.replace(styleTagCloseRE, '<\\/style')
           }
           const index = htmlProxyIndexRE.exec(id)?.[1]
           if (index == null) {
@@ -3392,7 +3398,7 @@ async function compileLightningCSS(
               return id
             },
           },
-          minify: config.isProduction && !!config.build.cssMinify,
+          minify: false,
           sourceMap:
             config.command === 'build'
               ? !!config.build.sourcemap

playground/css-lightningcss/__tests__/css-lightningcss.spec.ts

@@ -80,6 +80,18 @@ test.runIf(isBuild)('minify css', async () => {
   expect(cssFile).not.toMatch('#ffff00b3')
 })
 
+test.runIf(isBuild)('minify inline style', () => {
+  expect(readFile('dist/index.html')).toContain(
+    '<style>.inline-style{color:red}</style>',
+  )
+})
+
+test.runIf(isBuild)('escapes closing style tags in inline CSS', () => {
+  expect(readFile('dist/index.html')).toContain(
+    '<style>.escaped-closing-style{content:"<\\/style>"}</style>',
+  )
+})
+
 test.runIf(isBuild)('does not run the visitor again during minify', () => {
   expect(readFile('dist/media-query-visits.txt')).toBe('2')
 })

playground/css-lightningcss/index.html

@@ -1,5 +1,17 @@
 <link rel="stylesheet" href="./linked.css" />
 
+<style>
+  .inline-style {
+    color: red;
+  }
+</style>
+
+<style>
+  .escaped-closing-style {
+    content: '<\/style>';
+  }
+</style>
+
 <div class="wrapper">
   <h1>Lightning CSS</h1>
 

playground/minify/__tests__/minify.spec.ts

@@ -19,3 +19,15 @@ test.runIf(isBuild)('no minifySyntax', () => {
   expect(cssContent).toContain('color:#ff0000')
   expect(cssContent).not.toContain('/*! explicit comment */')
 })
+
+test.runIf(isBuild)('minifies inline style with esbuild', () => {
+  expect(readFile('dist/index.html')).toContain(
+    '<style>.inline-style{color:#ff0000}</style>',
+  )
+})
+
+test.runIf(isBuild)('escapes closing style tags with esbuild', () => {
+  expect(readFile('dist/index.html')).toContain(
+    '<style>.escaped-closing-style{content:"<\\/style>"}</style>',
+  )
+})

playground/minify/index.html

@@ -1,3 +1,15 @@
 <h1>Minify</h1>
 
+<style>
+  .inline-style {
+    color: #ff0000;
+  }
+</style>
+
+<style>
+  .escaped-closing-style {
+    content: '<\/style>';
+  }
+</style>
+
 <script type="module" src="./main.js"></script>