build: terse cssr use babel

build/rollup-plugin-css-render.js

@@ -1,4 +1,4 @@
-const cleanCssr = require('./utils/clean-cssr')
+const cleanCssr = require('./utils/terse-cssr')
 
 module.exports = () => ({
   async transform (code, id) {

build/utils/clean-cssr.js

@@ -1,3 +0,0 @@
-module.exports = function cleanCssr (code) {
-  return code.replace(/\n\s+/g, '\n')
-}

build/utils/terse-cssr.js

@@ -0,0 +1,24 @@
+const parser = require('@babel/parser')
+const { default: traverse } = require('@babel/traverse')
+const { default: generate } = require('@babel/generator')
+
+module.exports = function terseCssr (code) {
+  if (process.env.NODE_ENV === 'production') {
+    const pattern = /[\n\t\s]+/g
+
+    const ast = parser.parse(code, {
+      sourceType: 'module'
+    })
+
+    traverse(ast, {
+      TemplateElement (path) {
+        ;['raw', 'cooked'].forEach((type) => {
+          path.node.value[type] = path.node.value[type].replace(pattern, '')
+        })
+      }
+    })
+
+    return generate(ast).code
+  }
+  return code
+}

build/vite-plugin-css-render.js

@@ -1,4 +1,4 @@
-const cleanCssr = require('./utils/clean-cssr')
+const cleanCssr = require('./utils/terse-cssr')
 
 module.exports = () => {
   return {

package.json

@@ -58,13 +58,16 @@
     ]
   },
   "devDependencies": {
+    "@babel/generator": "^7.12.11",
+    "@babel/parser": "^7.12.11",
     "@babel/preset-env": "^7.12.10",
+    "@babel/traverse": "^7.12.12",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@types/jest": "^26.0.15",
-    "@vue/compiler-sfc": "^3.0.5",
     "@vitejs/plugin-vue": "^1.0.4",
+    "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/test-utils": "^2.0.0-beta.12",
     "autoprefixer": "^9.8.6",
@@ -120,4 +123,4 @@
     }
   },
   "sideEffects": false
-}
+}