@thejaredwilcurt/csslop 0.0.21 → 0.0.23

package/README.md

@@ -20,16 +20,23 @@
 
 * All tests pass.
 * Several new tests were created upstream, and some existing tests were improved/fixed upstream (all manually by me, no AI used).
-* The `src` folder is 100% vibe coded, and despite passing all tests, is almost certainly not worth using. Though if you do, and you find issues, you can isolate the problem and [compare against the correct output of real minifiers](https://TheJaredWilcurt.com/playground), then use that to create a [new test upstream](https://github.com/keithamus/css-minify-tests/issues) for the AI's to be forced to pass.
+* The `src` folder is 100% vibe coded, and despite passing all tests, is absolutely not worth using as CSSLOP often outputs invalid CSS syntax. But that's the point, any time it outputs something wrong, that's an indication of a missing test upstream.
+* I've made [an online playground](https://TheJaredWilcurt.com/playground) of all modern CSS minifiers so you can compare and isolate the problem, then use that to create a [new test upstream](https://github.com/keithamus/css-minify-tests/issues) for the AI's to be forced to pass.
 * No AI generated code exists outside of the `src` folder, this README, for example, is 100% human crafted.
 
-**AI's used:**
+**AI's used during initial library creation:**
 
 * Claude Opus 4.6 (Thinking)
 * Claude Sonnet 4.6 (Thinking)
 * Gemini 3.1 Pro (High Thinking)
 * GPT-5.4 High (Thinking)
 
+These were the latest and greatest models at the time.
+
+**AI's used during maintenance:**
+
+As new tests are created upstream I use whatever the latest models are, like "Claude 5 High Thinking".
+
 These tools were prompted to pass the tests in the `/copiedTests` folder that came from `keithamus/css-minify-tests`.
 
 **Summary of project phases:**
@@ -51,8 +58,8 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
 1. **Test improvements:** Throughout this process, as upstream tests were improved or created, they were pulled in, and the AI was instructed to pass those new tests with prompts like, "Run `npm t` and fix all failing tests by modifying files in `src`."
 1. **Publish:** I had the AI pick a name for the library. Then I published it to npm. It was added to the `css-minify-tests` repo as evidence that it is possible to get all tests to pass and none are conflicting.
 1. **Real world testing:** I created a [separate repo](https://github.com/TheJaredWilcurt/real-world-css-libraries) with copies of 150+ real-world CSS files from open source licensed repos. Then ran all of those CSS files through CSSLOP. One file found a bug in CSSLOP, so I had Claude fix it with a one-line change. See: [`realWorldResults.json`](https://github.com/TheJaredWilcurt/csslop/blob/main/realWorldResults.json) for how well the library actually does on real CSS files. Examining the output has lead to many upstream improvements to the test suite.
-1. **Failed Performance improvements:** CSSLOP takes 3 hours to minify all the real-world tests. Which averages to 144 seconds per test. In reality, most tests take 0-50ms, but there are a handful of large (2-5MB) CSS files that can take over an hour. I asked Claude to improve performance, and it did so bad I had to reject all changes. Then I gave GPT a chance and it took a safer approach. I Had Claude clean up the messy code after the fact. Then bench marked it and it was somehow even slower (+20 min), and also the outputs weren't as small as before (+0.05%). Details below.
-1. **Playground:** Created an [online playground](https://TheJaredWilcurt.com/csslop) (no AI used) for others to more easily test things out and find issues that can be fixed upstream.
+1. **Failed Performance improvements:** CSSLOP takes 3 hours to minify all the real-world tests. Which averages to 144 seconds per test. In reality, most tests take 0-50ms, but there are a handful of large (2-5MB) CSS files that can take over an hour. I asked Claude to improve performance, and it did so bad I had to reject all changes. Then I gave GPT a chance and it took a safer approach. I Had Claude clean up the messy code after the fact. Then benchmarked it and it was somehow even slower (+20 min), and also the outputs weren't as small as before (+0.05%). Details below. **Update:** The "Real world" library has grown. It now takes over 7 hours to complete.
+1. **Playground:** Created an [online playground](https://TheJaredWilcurt.com/csslop) (no AI used) for others to more easily test things out and find and create new upstream tests.
 
 
 **Full Notes of AI Experiment:**
@@ -166,7 +173,7 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * Okay, so GPT's changes look promising, it's passing all tests, passing the linter, and it added some new files related to worker threads. Though it did out out of using promises, because it didn't want to change the entrypoint function of the library to be async. This would be a breaking change for library consumers, but I was aware of that when I told it to do it and it ignored me, so whatever.
   * On to actually testing it! Before the optimizations, the 150 files took 3 hours and 4 minutes to run, and now with the new and improved optimizations, it only takes 3 hours and 20 minutes. Also the total minified filesize increased by 0.05%. So that's cool.... Dumping those changes.
 * **KILL ALL HUMANS:**
-  * More libraries were added to the "Real World CSS Libraries". Now when I run `npm run real` to minify all of them, it ends up taking about 7 hours to run. This is because the optimizations CSSLOP performs do not scale linearly with more CSS rules, they scale exponentially. There are a handfull of large CSS files that each take about an hour to complete, where as the smaller files all go by pretty fast.
+  * More libraries were added to the "Real World CSS Libraries". Now when I run `npm run real` to minify all of them, it ends up taking about 7 hours to run. This is because the optimizations CSSLOP performs do not scale linearly with more CSS rules, they scale exponentially. There are a handful of large CSS files that each take about an hour to complete, where as the smaller files all go by pretty fast.
   * When the upstream `css-minify-tests` adds a new test to their suite, I pull it in and have the AI update the library to pass that new test. For some reason, the AI notices `/tests/realworld.test.js`, sees that `npm run real` will execute that, then sees it has permission to run `npm run *`, so it takes it upon itself to run this SEVEN HOUR LONG COMMAND, without anyone asking it to...
   * This has happened several times. Me saying "Don't run `npm run real`", doesn't actually stop it from doing it. I also tried "Do not, under any circumstance, run `npm run real`.". And it *mostly* stopped doing it... but not completely.
   * This has lead me to update all my prompts to now end with: "DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -16,7 +16,7 @@
     "real": "node ./tests/realworld.test.js",
     "lint": "eslint *.js scripts src tests --fix",
     "fix": "npm run lint",
-    "bump": "npx --yes -- @jsdevtools/version-bump-prompt && npm i"
+    "bump": "npx --yes -- @jsdevtools/version-bump-prompt patch && npm i"
   },
   "dependencies": {
     "@csstools/css-calc": "^3.3.0",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.8",
+    "@codemirror/view": "^6.43.9",
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
@@ -34,12 +34,12 @@
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^64.1.0",
+    "eslint-plugin-jsdoc": "^64.2.1",
     "fflate": "^0.8.3",
     "globals": "^17.11.0",
     "pretty-ms": "^9.3.0",
-    "real-world-css-libraries": "^1.0.7",
-    "vite": "^8.2.1"
+    "real-world-css-libraries": "^1.0.8",
+    "vite": "^8.2.2"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",

package/src/charset.js

@@ -0,0 +1,246 @@
+/**
+ * @file Resolves `@charset` labels against the Encoding Standard so charset rules can be deduplicated, hoisted, shortened, or removed.
+ */
+
+/**
+ * The default encoding of a stylesheet, used when no `@charset` is declared.
+ *
+ * @type {string}
+ */
+const DEFAULT_ENCODING = 'UTF-8';
+
+/**
+ * Encodings that a stylesheet can never actually be in when labelled by a
+ * `@charset` rule. The rule itself is written in ASCII bytes, so a UTF-16
+ * label falls back to UTF-8 when determining the fallback encoding.
+ * https://drafts.csswg.org/css-syntax-3/#determine-the-fallback-encoding
+ *
+ * @type {Set<string>}
+ */
+const UTF_16_ENCODINGS = new Set(['UTF-16BE', 'UTF-16LE']);
+
+/**
+ * Every encoding name of the Encoding Standard mapped to all of its labels.
+ * A `@charset` label is looked up here (ASCII case-insensitively, after
+ * trimming whitespace) to find the encoding a browser will use, and any label
+ * of that encoding can be swapped in without changing how the file is decoded.
+ * https://encoding.spec.whatwg.org/#names-and-labels
+ *
+ * @type {object}
+ */
+const ENCODING_LABELS = {
+  // The encoding
+  'UTF-8': ['unicode-1-1-utf-8', 'unicode11utf8', 'unicode20utf8', 'utf-8', 'utf8', 'x-unicode20utf8'],
+  // Legacy single-byte encodings
+  IBM866: ['866', 'cp866', 'csibm866', 'ibm866'],
+  'ISO-8859-2': ['csisolatin2', 'iso-8859-2', 'iso-ir-101', 'iso8859-2', 'iso88592', 'iso_8859-2', 'iso_8859-2:1987', 'l2', 'latin2'],
+  'ISO-8859-3': ['csisolatin3', 'iso-8859-3', 'iso-ir-109', 'iso8859-3', 'iso88593', 'iso_8859-3', 'iso_8859-3:1988', 'l3', 'latin3'],
+  'ISO-8859-4': ['csisolatin4', 'iso-8859-4', 'iso-ir-110', 'iso8859-4', 'iso88594', 'iso_8859-4', 'iso_8859-4:1988', 'l4', 'latin4'],
+  'ISO-8859-5': ['csisolatincyrillic', 'cyrillic', 'iso-8859-5', 'iso-ir-144', 'iso8859-5', 'iso88595', 'iso_8859-5', 'iso_8859-5:1988'],
+  'ISO-8859-6': ['arabic', 'asmo-708', 'csiso88596e', 'csiso88596i', 'csisolatinarabic', 'ecma-114', 'iso-8859-6', 'iso-8859-6-e', 'iso-8859-6-i', 'iso-ir-127', 'iso8859-6', 'iso88596', 'iso_8859-6', 'iso_8859-6:1987'],
+  'ISO-8859-7': ['csisolatingreek', 'ecma-118', 'elot_928', 'greek', 'greek8', 'iso-8859-7', 'iso-ir-126', 'iso8859-7', 'iso88597', 'iso_8859-7', 'iso_8859-7:1987', 'sun_eu_greek'],
+  'ISO-8859-8': ['csiso88598e', 'csisolatinhebrew', 'hebrew', 'iso-8859-8', 'iso-8859-8-e', 'iso-ir-138', 'iso8859-8', 'iso88598', 'iso_8859-8', 'iso_8859-8:1988', 'visual'],
+  'ISO-8859-8-I': ['csiso88598i', 'iso-8859-8-i', 'logical'],
+  'ISO-8859-10': ['csisolatin6', 'iso-8859-10', 'iso-ir-157', 'iso8859-10', 'iso885910', 'l6', 'latin6'],
+  'ISO-8859-13': ['iso-8859-13', 'iso8859-13', 'iso885913'],
+  'ISO-8859-14': ['iso-8859-14', 'iso8859-14', 'iso885914'],
+  'ISO-8859-15': ['csisolatin9', 'iso-8859-15', 'iso8859-15', 'iso885915', 'iso_8859-15', 'l9'],
+  'ISO-8859-16': ['iso-8859-16'],
+  'KOI8-R': ['cskoi8r', 'koi', 'koi8', 'koi8-r', 'koi8_r'],
+  'KOI8-U': ['koi8-ru', 'koi8-u'],
+  macintosh: ['csmacintosh', 'mac', 'macintosh', 'x-mac-roman'],
+  'windows-874': ['dos-874', 'iso-8859-11', 'iso8859-11', 'iso885911', 'tis-620', 'windows-874'],
+  'windows-1250': ['cp1250', 'windows-1250', 'x-cp1250'],
+  'windows-1251': ['cp1251', 'windows-1251', 'x-cp1251'],
+  'windows-1252': ['ansi_x3.4-1968', 'ascii', 'cp1252', 'cp819', 'csisolatin1', 'ibm819', 'iso-8859-1', 'iso-ir-100', 'iso8859-1', 'iso88591', 'iso_8859-1', 'iso_8859-1:1987', 'l1', 'latin1', 'us-ascii', 'windows-1252', 'x-cp1252'],
+  'windows-1253': ['cp1253', 'windows-1253', 'x-cp1253'],
+  'windows-1254': ['cp1254', 'csisolatin5', 'iso-8859-9', 'iso-ir-148', 'iso8859-9', 'iso88599', 'iso_8859-9', 'iso_8859-9:1989', 'l5', 'latin5', 'windows-1254', 'x-cp1254'],
+  'windows-1255': ['cp1255', 'windows-1255', 'x-cp1255'],
+  'windows-1256': ['cp1256', 'windows-1256', 'x-cp1256'],
+  'windows-1257': ['cp1257', 'windows-1257', 'x-cp1257'],
+  'windows-1258': ['cp1258', 'windows-1258', 'x-cp1258'],
+  'x-mac-cyrillic': ['x-mac-cyrillic', 'x-mac-ukrainian'],
+  // Legacy multi-byte Chinese (simplified) encodings
+  GBK: ['chinese', 'csgb2312', 'csiso58gb231280', 'gb2312', 'gb_2312', 'gb_2312-80', 'gbk', 'iso-ir-58', 'x-gbk'],
+  gb18030: ['gb18030'],
+  // Legacy multi-byte Chinese (traditional) encodings
+  Big5: ['big5', 'big5-hkscs', 'cn-big5', 'csbig5', 'x-x-big5'],
+  // Legacy multi-byte Japanese encodings
+  'EUC-JP': ['cseucpkdfmtjapanese', 'euc-jp', 'x-euc-jp'],
+  'ISO-2022-JP': ['csiso2022jp', 'iso-2022-jp'],
+  Shift_JIS: ['csshiftjis', 'ms932', 'ms_kanji', 'shift-jis', 'shift_jis', 'sjis', 'windows-31j', 'x-sjis'],
+  // Legacy multi-byte Korean encodings
+  'EUC-KR': ['cseuckr', 'csksc56011987', 'euc-kr', 'iso-ir-149', 'korean', 'ks_c_5601-1987', 'ks_c_5601-1989', 'ksc5601', 'ksc_5601', 'windows-949'],
+  // Legacy miscellaneous encodings
+  replacement: ['csiso2022kr', 'hz-gb-2312', 'iso-2022-cn', 'iso-2022-cn-ext', 'iso-2022-kr', 'replacement'],
+  'UTF-16BE': ['unicodefffe', 'utf-16be'],
+  'UTF-16LE': ['csunicode', 'iso-10646-ucs-2', 'ucs-2', 'unicode', 'unicodefeff', 'utf-16', 'utf-16le'],
+  'x-user-defined': ['x-user-defined']
+};
+
+/**
+ * Builds the lookup of every Encoding Standard label to the encoding it names.
+ *
+ * @return {Map} Map of lowercase label to encoding name.
+ */
+function createEncodingByLabelLookup () {
+  const encodingByLabel = new Map();
+  for (const encodingName in ENCODING_LABELS) {
+    for (const label of ENCODING_LABELS[encodingName]) {
+      encodingByLabel.set(label, encodingName);
+    }
+  }
+  return encodingByLabel;
+}
+
+/**
+ * Builds the lookup of every encoding to its fewest-bytes label, so a
+ * `@charset` rule can be rewritten with a shorter but equivalent label.
+ * Labels of the same length are ordered alphabetically to keep output stable.
+ *
+ * @return {Map} Map of encoding name to its shortest label.
+ */
+function createShortestLabelLookup () {
+  const shortestLabels = new Map();
+  for (const encodingName in ENCODING_LABELS) {
+    const labelsByLength = [...ENCODING_LABELS[encodingName]].sort((labelA, labelB) => {
+      if (labelA.length !== labelB.length) {
+        return labelA.length - labelB.length;
+      }
+      return labelA.localeCompare(labelB);
+    });
+    shortestLabels.set(encodingName, labelsByLength[0]);
+  }
+  return shortestLabels;
+}
+
+const ENCODING_BY_LABEL = createEncodingByLabelLookup();
+const SHORTEST_LABEL_BY_ENCODING = createShortestLabelLookup();
+
+/**
+ * Reduces a raw `@charset` value to the label that gets looked up, by removing
+ * the surrounding quotes, trimming whitespace, and lowercasing it, since
+ * Encoding Standard labels are matched ASCII case-insensitively.
+ *
+ * @param  {string} charsetValue  The `@charset` value, with or without surrounding quotes.
+ * @return {string}               The normalized label, or empty string when there is no value.
+ */
+function normalizeCharsetLabel (charsetValue) {
+  if (!charsetValue) {
+    return '';
+  }
+  // Remove one layer of matching single or double quotes wrapping the label
+  const unquoted = String(charsetValue).trim().replace(/^(["'])([\s\S]*)\1$/, '$2');
+  return unquoted.trim().toLowerCase();
+}
+
+/**
+ * Resolves a `@charset` value to the encoding a browser will actually decode
+ * the stylesheet with. Labels that are not in the Encoding Standard are
+ * ignored, and UTF-16 labels fall back to UTF-8, so both leave the stylesheet
+ * in the default encoding.
+ *
+ * @param  {string} charsetValue  The `@charset` value, with or without surrounding quotes.
+ * @return {string}               The effective encoding name.
+ */
+function resolveEffectiveEncoding (charsetValue) {
+  const encodingName = ENCODING_BY_LABEL.get(normalizeCharsetLabel(charsetValue));
+  if (!encodingName || UTF_16_ENCODINGS.has(encodingName)) {
+    return DEFAULT_ENCODING;
+  }
+  return encodingName;
+}
+
+/**
+ * Determines whether a `@charset` value leaves the stylesheet in an encoding
+ * that can represent every unicode character, meaning unicode escapes may be
+ * safely replaced with the literal characters they resolve to.
+ *
+ * @param  {string}  charsetValue  The `@charset` value, with or without surrounding quotes.
+ * @return {boolean}               True when the effective encoding supports all unicode characters.
+ */
+function isUnicodeCompatibleCharset (charsetValue) {
+  return resolveEffectiveEncoding(charsetValue) === DEFAULT_ENCODING;
+}
+
+/**
+ * Rewrites a `@charset` value as the shortest quoted label for the same
+ * encoding, or as an empty string when the rule has no effect at all and can
+ * be deleted, because the stylesheet is left in the default UTF-8 encoding.
+ * The declared label is kept when no shorter label exists for its encoding.
+ *
+ * @param  {string} charsetValue  The `@charset` value, with or without surrounding quotes.
+ * @return {string}               The shortest equivalent quoted value, or empty string when the rule is removable.
+ */
+function optimizeCharsetValue (charsetValue) {
+  const encodingName = resolveEffectiveEncoding(charsetValue);
+  if (encodingName === DEFAULT_ENCODING) {
+    return '';
+  }
+  const declaredLabel = normalizeCharsetLabel(charsetValue);
+  const shortestLabel = SHORTEST_LABEL_BY_ENCODING.get(encodingName);
+  if (shortestLabel.length < declaredLabel.length) {
+    return '"' + shortestLabel + '"';
+  }
+  return '"' + declaredLabel + '"';
+}
+
+/**
+ * Finds the `@charset` value that applies to a stylesheet by scanning the raw
+ * CSS text before it is parsed. Only the first `@charset` of a document has any
+ * effect, so later ones (usually the result of concatenating files) are ignored.
+ *
+ * @param  {string} css  The raw CSS string to scan.
+ * @return {string}      The first `@charset` value (with quotes), or empty string when none is declared.
+ */
+function detectCharset (css) {
+  // Match @charset followed by a quoted value and semicolon
+  const match = css.match(/@charset\s+(["'][^"']+["'])\s*;/i);
+  if (match) {
+    return match[1];
+  }
+  return '';
+}
+
+/**
+ * Applies the browser's `@charset` handling to the top-level rules of a
+ * stylesheet. Only the first `@charset` is meaningful, and it is only honored
+ * when it is the very first thing in the file, so it is shortened and hoisted
+ * to the front while every later `@charset` is dropped. A first `@charset` that
+ * leaves the stylesheet in the default UTF-8 encoding is dropped as well.
+ *
+ * @param  {Array} rules  The top-level AST rule nodes to filter.
+ * @return {Array}        A new array of rules, with at most one `@charset` rule, placed at the start.
+ */
+function filterRedundantCharsets (rules) {
+  let hoistedCharset = null;
+  let foundCharset = false;
+
+  const filtered = rules.filter((rule) => {
+    if (rule.type !== 'charset') {
+      return true;
+    }
+    if (!foundCharset) {
+      foundCharset = true;
+      const optimizedCharset = optimizeCharsetValue(rule.charset);
+      if (optimizedCharset) {
+        hoistedCharset = {
+          ...rule,
+          charset: optimizedCharset
+        };
+      }
+    }
+    return false;
+  });
+
+  if (hoistedCharset) {
+    return [hoistedCharset, ...filtered];
+  }
+  return filtered;
+}
+
+export {
+  detectCharset,
+  filterRedundantCharsets,
+  isUnicodeCompatibleCharset
+};

package/src/context.js

@@ -2,6 +2,8 @@
  * @file Manages the shared minification context for tracking registered custom properties and their syntax.
  */
 
+import { isUnicodeCompatibleCharset } from './charset.js';
+
 /**
  * Creates a fresh minification context used to track `@property`-registered custom properties and their declared syntax types across the entire stylesheet.
  *
@@ -22,18 +24,15 @@ function createMinifyContext () {
 let activeCharset = '';
 
 /**
- * Returns true when the active charset is a unicode-compatible encoding
- * (UTF-8, UTF-16, or the default when no `@charset` is declared), meaning
- * CSS unicode escapes can safely be resolved to literal characters.
+ * Returns true when the active charset leaves the stylesheet in a
+ * unicode-compatible encoding (UTF-8, a UTF-16 label that falls back to UTF-8,
+ * an unrecognized label, or the default when no `@charset` is declared),
+ * meaning CSS unicode escapes can safely be resolved to literal characters.
  *
  * @return {boolean} True if the active charset supports unicode characters.
  */
 function isUnicodeCharset () {
-  if (!activeCharset) {
-    return true;
-  }
-  const normalized = activeCharset.toLowerCase().replace(/["']/g, '');
-  return normalized === 'utf-8' || normalized.startsWith('utf-16');
+  return isUnicodeCompatibleCharset(activeCharset);
 }
 
 /**

package/src/declarations/css-wide-keywords.js

@@ -0,0 +1,285 @@
+/**
+ * @file Rewrites longhand declarations that share a CSS-wide keyword into a shorthand carrying that keyword, followed by the longhands that override it.
+ */
+
+import { minifyValue } from '../value/minify.js';
+
+import {
+  CSS_WIDE_KEYWORDS,
+  shorthandMap,
+  shorthandOverrideMap
+} from './config.js';
+
+/**
+ * Expands a property into the set of leaf longhands it ultimately sets, so that
+ * different groupings of the same box, such as `border-width` and
+ * `border-top-width`, can be compared for equivalent coverage.
+ *
+ * @param  {string} property        The property name to expand.
+ * @param  {Set}    leafProperties  The set collecting the leaf longhand names.
+ * @return {Set}                    The set of leaf longhand property names.
+ */
+function expandToLeafProperties (property, leafProperties = new Set()) {
+  const longhands = shorthandMap[property];
+  if (!longhands) {
+    leafProperties.add(property);
+    return leafProperties;
+  }
+  for (const longhand of longhands) {
+    expandToLeafProperties(longhand, leafProperties);
+  }
+  return leafProperties;
+}
+
+/**
+ * Checks whether a group of longhands sets every leaf longhand that the
+ * shorthand sets. A CSS-wide keyword may only move into the shorthand when the
+ * group covers all of them, otherwise the keyword would also land on a longhand
+ * the author never declared.
+ *
+ * @param  {string}  shorthandName  The target shorthand property name.
+ * @param  {Array}   properties     The longhand property names in the group.
+ * @return {boolean}                Whether the group covers the whole shorthand.
+ */
+function coversEveryLonghandOfShorthand (shorthandName, properties) {
+  const coveredLeaves = new Set();
+  for (const property of properties) {
+    expandToLeafProperties(property, coveredLeaves);
+  }
+  return [...expandToLeafProperties(shorthandName)].every((leafProperty) => {
+    return coveredLeaves.has(leafProperty);
+  });
+}
+
+/**
+ * @typedef  {object}  LonghandEntry
+ * @property {object}  declaration    The original declaration object.
+ * @property {number}  index          The declaration's index within the rule.
+ * @property {string}  property       The longhand property name.
+ * @property {string}  text           The minified `property:value` text.
+ * @property {string}  value          The minified value, without any `!important`.
+ * @property {boolean} isImportant    Whether the declaration carries `!important`.
+ */
+
+/**
+ * Collects the declarations of a rule that set one of a shorthand's longhands,
+ * in source order.
+ *
+ * @param  {Array}  declarations   The declarations of a single rule.
+ * @param  {string} shorthandName  The shorthand whose longhands to collect.
+ * @return {Array}                 The matching longhand entries, in source order.
+ */
+function collectLonghandEntries (declarations, shorthandName) {
+  const longhands = shorthandMap[shorthandName];
+  const entries = [];
+  declarations.forEach((declaration, index) => {
+    if (!declaration.property || !longhands.includes(declaration.property)) {
+      return;
+    }
+    const minifiedValue = minifyValue(declaration);
+    const isImportant = minifiedValue.includes('!important');
+    entries.push({
+      declaration,
+      index,
+      property: declaration.property,
+      text: declaration.property + ':' + minifiedValue,
+      value: minifiedValue.replace('!important', '').trim(),
+      isImportant
+    });
+  });
+  return entries;
+}
+
+/**
+ * Checks whether a group declares the same property more than once, which
+ * happens when an intentional fallback was kept. Rewriting such a group would
+ * drop one of the two declarations, so it is left alone.
+ *
+ * @param  {Array}   entries  The longhand entries of the group.
+ * @return {boolean}          Whether any property appears more than once.
+ */
+function hasRepeatedProperty (entries) {
+  const seenProperties = new Set();
+  return entries.some((entry) => {
+    if (seenProperties.has(entry.property)) {
+      return true;
+    }
+    seenProperties.add(entry.property);
+    return false;
+  });
+}
+
+/**
+ * Resolves the `!important` suffix the shorthand must carry. A group that mixes
+ * important and normal longhands cannot be rewritten, because the shorthand
+ * would either lose or gain priority over the longhands it replaces.
+ *
+ * @param  {Array}       entries  The longhand entries of the group.
+ * @return {string|null}          The suffix to append, or null when the group cannot be rewritten.
+ */
+function resolveImportantSuffix (entries) {
+  const allImportant = entries.every((entry) => {
+    return entry.isImportant;
+  });
+  if (allImportant) {
+    return '!important';
+  }
+  const noneImportant = entries.every((entry) => {
+    return !entry.isImportant;
+  });
+  if (noneImportant) {
+    return '';
+  }
+  return null;
+}
+
+/**
+ * Resolves the single CSS-wide keyword shared by the longhands that use one.
+ * A group with no keyword has nothing to hoist, and a group mixing different
+ * keywords has no single value the shorthand could carry.
+ *
+ * @param  {Array}       entries  The longhand entries of the group.
+ * @return {string|null}          The shared keyword, or null when there is none.
+ */
+function resolveSharedKeyword (entries) {
+  const keywords = entries.filter((entry) => {
+    return CSS_WIDE_KEYWORDS.has(entry.value.toLowerCase());
+  }).map((entry) => {
+    return entry.value.toLowerCase();
+  });
+  if (!keywords.length) {
+    return null;
+  }
+  const isSharedByAll = keywords.every((keyword) => {
+    return keyword === keywords[0];
+  });
+  if (!isSharedByAll) {
+    return null;
+  }
+  return keywords[0];
+}
+
+/**
+ * Checks whether a property the shorthand also resets, such as `border-image`
+ * for `border`, is declared before the point where the shorthand would be
+ * inserted. Inserting the shorthand there would discard that declaration.
+ *
+ * @param  {Array}   declarations    The declarations of a single rule.
+ * @param  {string}  shorthandName   The target shorthand property name.
+ * @param  {number}  insertionIndex  The index the shorthand would be inserted at.
+ * @return {boolean}                 Whether an earlier declaration would be discarded.
+ */
+function resetsEarlierDeclaration (declarations, shorthandName, insertionIndex) {
+  const resetProperties = shorthandOverrideMap[shorthandName] || [];
+  if (!resetProperties.length) {
+    return false;
+  }
+  return declarations.slice(0, insertionIndex).some((declaration) => {
+    return resetProperties.includes(declaration.property);
+  });
+}
+
+/**
+ * Rewrites one longhand group into a shorthand holding the shared CSS-wide
+ * keyword, followed by the longhands that override it, when that is shorter
+ * than the group of longhands it replaces.
+ *
+ * @param  {Array}      declarations   The declarations of a single rule.
+ * @param  {string}     shorthandName  The target shorthand property name.
+ * @return {Array|null}                The rewritten declarations, or null when the rewrite does not apply.
+ */
+function rewriteGroupAsKeywordShorthand (declarations, shorthandName) {
+  const shorthandAlreadyExists = declarations.some((declaration) => {
+    return declaration.property === shorthandName;
+  });
+  if (shorthandAlreadyExists) {
+    return null;
+  }
+
+  const entries = collectLonghandEntries(declarations, shorthandName);
+  if (entries.length < 2 || hasRepeatedProperty(entries)) {
+    return null;
+  }
+  const properties = entries.map((entry) => {
+    return entry.property;
+  });
+  if (!coversEveryLonghandOfShorthand(shorthandName, properties)) {
+    return null;
+  }
+
+  const importantSuffix = resolveImportantSuffix(entries);
+  const sharedKeyword = resolveSharedKeyword(entries);
+  if (importantSuffix === null || !sharedKeyword) {
+    return null;
+  }
+
+  const insertionIndex = entries[0].index;
+  if (resetsEarlierDeclaration(declarations, shorthandName, insertionIndex)) {
+    return null;
+  }
+
+  // The longhands whose value is not the shared keyword have to be restated
+  // after the shorthand, because the shorthand also set them to the keyword.
+  const overrideEntries = entries.filter((entry) => {
+    return entry.value.toLowerCase() !== sharedKeyword;
+  });
+  const shorthandDeclaration = {
+    property: shorthandName,
+    value: sharedKeyword + importantSuffix,
+    isAssembledShorthand: true
+  };
+  const rewrittenLength = [shorthandDeclaration.property + ':' + shorthandDeclaration.value, ...overrideEntries.map((entry) => {
+    return entry.text;
+  })].join(';').length;
+  const longhandLength = entries.map((entry) => {
+    return entry.text;
+  }).join(';').length;
+  if (rewrittenLength >= longhandLength) {
+    return null;
+  }
+
+  const groupIndexes = new Set(entries.map((entry) => {
+    return entry.index;
+  }));
+  const result = [];
+  declarations.forEach((declaration, index) => {
+    if (index === insertionIndex) {
+      result.push(shorthandDeclaration);
+      for (const entry of overrideEntries) {
+        result.push(entry.declaration);
+      }
+      return;
+    }
+    if (groupIndexes.has(index)) {
+      return;
+    }
+    result.push(declaration);
+  });
+  return result;
+}
+
+/**
+ * Hoists a CSS-wide keyword such as `inherit` out of a group of longhands into
+ * their shorthand. A CSS-wide keyword is only valid as a declaration's whole
+ * value, so `border-style:inherit;border-color:inherit;border-width:2px` cannot
+ * become `border:2px inherit inherit`. It can however become `border:inherit`
+ * followed by `border-width:2px`, which inherits every border property and then
+ * overrides the one that differs.
+ *
+ * @param  {Array} declarations  The declarations of a single rule.
+ * @return {Array}               The declarations, with eligible groups rewritten.
+ */
+function hoistCssWideKeywordsIntoShorthands (declarations) {
+  let result = declarations;
+  // Shorthands are visited in declaration order, so the widest shorthand of a
+  // family is rewritten before the narrower shorthands it contains.
+  for (const shorthandName of Object.keys(shorthandMap)) {
+    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName);
+    if (rewritten) {
+      result = rewritten;
+    }
+  }
+  return result;
+}
+
+export { hoistCssWideKeywordsIntoShorthands };

package/src/declarations/process.js

@@ -8,6 +8,7 @@ import { hasInvalidQuotesCount } from '../value/quotes.js';
 import { absorbBackgroundLonghandsIntoShorthand } from './background.js';
 import { collapseBorderTrioWithPerEdgeColor } from './border.js';
 import { shorthandMap } from './config.js';
+import { hoistCssWideKeywordsIntoShorthands } from './css-wide-keywords.js';
 import {
   getMergeProps,
   tryMergeToShorthand
@@ -304,6 +305,7 @@ function processDeclarations (declarations, context) {
   result = removeLonghandsOverriddenByShorthands(result);
   result = absorbBackgroundLonghandsIntoShorthand(result);
   result = mergeLonghandsIntoShorthands(result, context);
+  result = hoistCssWideKeywordsIntoShorthands(result);
   result = collapseBorderTrioWithPerEdgeColor(result);
 
   return orderDeclarations(result);

package/src/index.js

@@ -4,6 +4,10 @@
 
 import { parse } from '@node-projects/css-parser';
 
+import {
+  detectCharset,
+  filterRedundantCharsets
+} from './charset.js';
 import {
   clearActiveCharset,
   createMinifyContext,
@@ -13,7 +17,6 @@ import {
   analyzePositionTryRules,
   cleanPositionTryRules,
   collectRuleMetadata,
-  filterRedundantCharsets,
   filterUnusedPositionTry
 } from './position-try.js';
 import {
@@ -34,7 +37,10 @@ import {
   removeEmptyRules,
   removeOverriddenMultiSelectorProperties
 } from './rules/optimize.js';
-import { stringifyRule } from './rules/stringify.js';
+import {
+  removeRedundantLayerStatementSemicolon,
+  stringifyRule
+} from './rules/stringify.js';
 import { minifyValue } from './value/minify.js';
 
 /**
@@ -169,22 +175,6 @@ function mergeAdjacentRulesWithIdenticalBodies (ruleStrings) {
   return result;
 }
 
-/**
- * Extracts the first `@charset` value from raw CSS text before parsing.
- * Scans for `@charset` followed by a quoted string and semicolon.
- *
- * @param  {string} css  The raw CSS string to scan.
- * @return {string}      The first charset value (with quotes), or empty string if none found.
- */
-function detectCharset (css) {
-  // Match @charset followed by a quoted value and semicolon
-  const match = css.match(/@charset\s+(["'][^"']+["'])\s*;/i);
-  if (match) {
-    return match[1];
-  }
-  return '';
-}
-
 /**
  * Parses, optimizes, and minifies a CSS string by applying rule merging, declaration deduplication, value compression, and dead-code elimination.
  *
@@ -256,7 +246,7 @@ export const minifyCSS = function (input) {
       output.push(stringifyRule(rule, context));
     }
 
-    const mergedOutput = mergeAdjacentRulesWithIdenticalBodies(output);
+    const mergedOutput = removeRedundantLayerStatementSemicolon(mergeAdjacentRulesWithIdenticalBodies(output));
 
     clearActiveCharset();
     return restoreEscapeSequences(mergedOutput.join(''));

package/src/position-try.js

@@ -163,41 +163,9 @@ function filterUnusedPositionTry (rules, positionTryRules, positionTryUsage) {
   });
 }
 
-/**
- * Removes duplicate and redundant UTF-8 `@charset` rules, keeping only the first
- * non-UTF-8 charset declaration and moving it to the top of the document.
- * Per the CSS specification, `@charset` must be the very first thing in a stylesheet.
- *
- * @param  {Array} rules  The top-level AST rule nodes to filter.
- * @return {Array}        A new array of rules with the first non-UTF-8 `@charset` at the start and all others removed.
- */
-function filterRedundantCharsets (rules) {
-  let keptCharset = null;
-
-  const filtered = rules.filter((rule) => {
-    if (rule.type !== 'charset') {
-      return true;
-    }
-    if (!keptCharset) {
-      // Strip surrounding quotes from the charset value for comparison
-      const normalizedCharset = rule.charset?.toLowerCase().replace(/["']/g, '');
-      if (normalizedCharset !== 'utf-8') {
-        keptCharset = rule;
-      }
-    }
-    return false;
-  });
-
-  if (keptCharset) {
-    return [keptCharset, ...filtered];
-  }
-  return filtered;
-}
-
 export {
   analyzePositionTryRules,
   cleanPositionTryRules,
   collectRuleMetadata,
-  filterRedundantCharsets,
   filterUnusedPositionTry
 };

package/src/rules/normalize.js

@@ -48,6 +48,18 @@ function unescapeSelector (selector) {
   });
 }
 
+/**
+ * Normalizes a `@layer` cascade layer name list by trimming it and removing the
+ * optional whitespace that may surround the commas separating the layer names.
+ *
+ * @param  {string} layerNames  The raw layer name list (e.g. "reset, base,\n  components").
+ * @return {string}             The normalized comma-separated layer name list.
+ */
+function normalizeLayerNames (layerNames) {
+  // Collapse the optional whitespace surrounding the commas between layer names
+  return String(layerNames ?? '').trim().replace(/\s*,\s*/g, ',');
+}
+
 /**
  * Normalizes a `@media` query string by collapsing whitespace, stripping the default "all and" prefix, and converting min/max-width to range syntax.
  *
@@ -112,6 +124,7 @@ function canUnwrapSupports (supports) {
 
 export {
   canUnwrapSupports,
+  normalizeLayerNames,
   normalizeMedia,
   normalizeSupports,
   unescapeIdent,

package/src/rules/optimize.js

@@ -4,7 +4,10 @@
 
 import { escapeRegexString } from '../utilities.js';
 
-import { normalizeMedia } from './normalize.js';
+import {
+  normalizeLayerNames,
+  normalizeMedia
+} from './normalize.js';
 
 /**
  * Expands rules that contain only nested sub-rules into flat rules with combined selectors, enabling further merging when the combined selectors already exist elsewhere.
@@ -786,7 +789,7 @@ function mergeLayerRules (rules, mergeSelectorRules) {
   const result = [];
   for (const rule of rules) {
     if (rule.type === 'layer') {
-      const layerName = rule.layer || '';
+      const layerName = normalizeLayerNames(rule.layer);
       if (rule.rules && rule.rules.length > 0) {
         if (layerName && layerBlockMap.has(layerName)) {
           layerBlockMap.get(layerName).rules.push(...rule.rules);

package/src/rules/stringify.js

@@ -11,6 +11,7 @@ import {
 } from './custom-properties.js';
 import {
   canUnwrapSupports,
+  normalizeLayerNames,
   normalizeMedia,
   normalizeSupports,
   unescapeIdent,
@@ -40,6 +41,34 @@ function stringifyDeclarations (declarations) {
     .join(';');
 }
 
+/**
+ * Matches a complete `@layer` statement, which declares layer names without a
+ * block and ends with the semicolon that separates it from the CSS that follows
+ * it. Layer names are identifiers, so any block, string, or function character
+ * means the string is something other than a lone layer statement.
+ *
+ * @type {RegExp}
+ */
+const LAYER_STATEMENT_PATTERN = /^@layer [^{}();'"]*;$/;
+
+/**
+ * Removes the semicolon of a trailing `@layer` statement, since that semicolon
+ * only exists to separate the statement from whatever comes after it. When the
+ * statement ends a stylesheet or a block, there is nothing left to separate.
+ *
+ * @param  {Array} ruleStrings  The stringified rules, in output order.
+ * @return {Array}              The stringified rules, without the redundant semicolon.
+ */
+function removeRedundantLayerStatementSemicolon (ruleStrings) {
+  const lastIndex = ruleStrings.length - 1;
+  if (lastIndex < 0 || !LAYER_STATEMENT_PATTERN.test(ruleStrings[lastIndex])) {
+    return ruleStrings;
+  }
+  const result = [...ruleStrings];
+  result[lastIndex] = result[lastIndex].slice(0, -1);
+  return result;
+}
+
 /**
  * Recursively stringifies child rules into a concatenated minified CSS string.
  *
@@ -48,9 +77,10 @@ function stringifyDeclarations (declarations) {
  * @return {string}          The concatenated minified CSS for all child rules.
  */
 function stringifyChildRules (rules, context) {
-  return (rules || []).map((childRule) => {
+  const ruleStrings = (rules || []).map((childRule) => {
     return stringifyRule(childRule, context);
-  }).join('');
+  }).filter(Boolean);
+  return removeRedundantLayerStatementSemicolon(ruleStrings).join('');
 }
 /**
  * Minifies a `@function` prelude (signature) by collapsing whitespace around
@@ -341,9 +371,7 @@ function stringifyRule (rule, context) {
     const renderedDeclarations = mediaDeclarations.map((declaration) => {
       return [unescapeIdent(declaration.property), ':', minifyValue(declaration)].join('');
     }).join(';');
-    const renderedRules = subRules.map((childRule) => {
-      return stringifyRule(childRule, context);
-    }).join('');
+    const renderedRules = stringifyChildRules(subRules, context);
     const children = [renderedDeclarations, renderedRules].filter(Boolean).join('');
     if (!children) {
       return '';
@@ -474,10 +502,11 @@ function stringifyRule (rule, context) {
   }
 
   if (rule.type === 'layer') {
+    const layerNames = normalizeLayerNames(rule.layer);
     if (rule.rules && rule.rules.length) {
-      return '@layer ' + (rule.layer || '') + '{' + stringifyChildRules(rule.rules, context) + '}';
+      return '@layer ' + layerNames + '{' + stringifyChildRules(rule.rules, context) + '}';
     } else {
-      return '@layer ' + rule.layer + ';';
+      return '@layer ' + layerNames + ';';
     }
   }
 
@@ -635,4 +664,7 @@ function stringifyRule (rule, context) {
   return ''; // Ignore unknown for now
 }
 
-export { stringifyRule };
+export {
+  removeRedundantLayerStatementSemicolon,
+  stringifyRule
+};

package/src/value/minify.js

@@ -30,6 +30,7 @@ import {
 } from './relative-colors.js';
 import {
   collapseShorthandParts,
+  convertAbsoluteLengthToPx,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,
@@ -711,6 +712,49 @@ function convertMillisecondsToSeconds (value) {
   });
 }
 
+/**
+ * Matches an absolute CSS length token: an optionally signed number followed by
+ * an absolute length unit. The lookbehind rejects digits that belong to a larger
+ * identifier, such as the custom property name in `var(--size-2in)`, where the
+ * digits and unit do not form a value of their own.
+ *
+ * @type {RegExp}
+ */
+const ABSOLUTE_LENGTH_PATTERN = /(?<![\w#.%-])(-?(?:\d+|\d*\.\d+))(pt|pc|in|cm|mm|q)\b/gi;
+
+/**
+ * The largest difference in pixels that a rounded conversion may introduce and
+ * still count as exact, which allows for binary floating point error without
+ * allowing a visible change to the rendered length.
+ *
+ * @type {number}
+ */
+const PIXEL_ROUNDING_TOLERANCE = 1e-6;
+
+/**
+ * Converts absolute length values (pt, pc, in, cm, mm, Q) to their pixel
+ * equivalent when the conversion is exact and the pixel form is no longer than
+ * the original. Normalizing to px also improves compression by reducing the
+ * number of distinct unit strings in the output.
+ *
+ * @param  {string} value  A CSS value segment, outside strings and urls.
+ * @return {string}        The segment with eligible absolute lengths converted to px.
+ */
+function convertAbsoluteLengthsToPx (value) {
+  return value.replace(ABSOLUTE_LENGTH_PATTERN, (token, amount, unit) => {
+    const pixels = convertAbsoluteLengthToPx(amount, unit);
+    if (pixels === null) {
+      return token;
+    }
+    const converted = roundCompactNumber(pixels) + 'px';
+    const isExact = Math.abs(parseFloat(converted) - pixels) < PIXEL_ROUNDING_TOLERANCE;
+    if (!isExact || converted.length > token.length) {
+      return token;
+    }
+    return converted;
+  });
+}
+
 /**
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
@@ -867,11 +911,11 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
     });
   }
 
-  if (property === 'font-size') {
-    // Convert point (pt) font-size values to their pixel (px) equivalent
-    val = val.replace(/^(-?(?:\d+|\d*\.\d+))pt$/i, (match, amount) => {
-      return roundCompactNumber(parseFloat(amount) * (96 / 72)) + 'px';
-    });
+  // Custom properties hold an arbitrary token stream rather than a typed value,
+  // so a unit-like token in one is not necessarily a length.
+  const isCustomProperty = Boolean(property) && property.startsWith('--');
+  if (!isCustomProperty) {
+    val = replaceOutsideStringsAndUrls(val, convertAbsoluteLengthsToPx);
   }
 
   if (property === 'syntax') {