feat: enable support to compress CSS vars

README.md

@@ -208,7 +208,7 @@ Here's a list of tasks I plan to work on:
 - [x] Add test coverage
 - [ ] Add support for IDs
 - [ ] Enable handling of multiple CSS files
-- [ ] Implement support for CSS variables
+- [x] Implement support for CSS variables
 - [ ] Include server-side rendering support
 - [ ] Move temporal files to a temporary directory instead of the root of the project
 - [ ] Improve stadistics of file size reduction

package.json

@@ -40,6 +40,7 @@
     "postcss": "8.4.31",
     "postcss-load-config": "4.0.1",
     "postcss-rename": "0.6.1",
+    "postcss-variable-compress": "3.0.0",
     "pretty-bytes": "6.1.1"
   },
   "devDependencies": {

src/utils.ts

@@ -1,6 +1,7 @@
 import { readdir } from 'node:fs/promises';
 import { resolve } from 'node:path';
 import postcssRename from 'postcss-rename';
+import postcssVariableCompress from 'postcss-variable-compress';
 
 import type { InternalRenameOptions } from './types.js';
 import type { Options as PostcssRenameOptions } from 'postcss-rename';
@@ -77,6 +78,9 @@ export const getViteConfiguration = async (
   const postcssPlugins = postcssConfigResult?.plugins?.slice() ?? [];
 
   postcssPlugins.push(postcssRename(options as PostcssRenameOptions));
+  // eslint-disable-next-line
+  // @ts-ignore
+  postcssPlugins.push(postcssVariableCompress());
 
   return {
     css: {

yarn.lock

@@ -2014,6 +2014,7 @@ __metadata:
     postcss: "npm:8.4.31"
     postcss-load-config: "npm:4.0.1"
     postcss-rename: "npm:0.6.1"
+    postcss-variable-compress: "npm:3.0.0"
     prettier: "npm:3.0.3"
     pretty-bytes: "npm:6.1.1"
     typescript: "npm:5.2.2"
@@ -6735,6 +6736,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-variable-compress@npm:3.0.0":
+  version: 3.0.0
+  resolution: "postcss-variable-compress@npm:3.0.0"
+  peerDependencies:
+    postcss: ^8.2.8
+  checksum: cc67906a4ea56f48ed0ee80dc70097f1f2e2f497b55caa7154144b3498cfc9ede99a7f1f43453a326829db3ff0f7604fdcfd49b081d1857a195301c956e8cf97
+  languageName: node
+  linkType: hard
+
 "postcss@npm:8.4.31, postcss@npm:^8.4.14, postcss@npm:^8.4.27, postcss@npm:^8.4.31":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"