@thejaredwilcurt/csslop 0.0.54 → 0.0.55

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -34,13 +34,13 @@
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.2",
     "eslint-config-tjw-jsdoc": "^2.0.1",
-    "eslint-plugin-import-x": "^4.18.0",
+    "eslint-plugin-import-x": "^4.18.1",
     "eslint-plugin-jsdoc": "^65.4.5",
     "fflate": "^0.8.3",
     "globals": "^17.14.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.9",
-    "vite": "^8.3.6"
+    "vite": "^8.3.7"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",

package/src/rules/optimize/nest-rules.js

@@ -2,6 +2,8 @@
  * @file Nests flat rules under a preceding rule whose selector their own selector starts with, so CSS nesting writes the shared part once.
  */
 
+import { findTopLevelDelimiter } from '../../parser/source-search.js';
+
 /**
  * Matches the part of a child selector that follows its parent when that part
  * starts with an explicit combinator. Optional whitespace, then the combinator
@@ -78,6 +80,46 @@ function isSelectorWhitespace (character) {
   return (/\s/).test(character);
 }
 
+/**
+ * The characters that can end a parent selector: the colon of a pseudo-class,
+ * the whitespace of a descendant combinator, and the explicit combinators.
+ *
+ * @type {string}
+ */
+const PARENT_BOUNDARY_CHARACTERS = ':>+~ \t\n\r\f';
+
+/**
+ * Records the parent selector that a boundary character would end, when it
+ * ends one. Boundaries are only found at the top level of the selector, so
+ * whitespace inside an attribute selector or a pseudo-class argument, and
+ * characters escaped with a backslash, never end a parent.
+ *
+ * @param {string} childSelector  The trimmed child selector.
+ * @param {number} boundaryIndex  The index of the boundary character within the child selector.
+ * @param {Set}    candidates     The set the candidate parent selector is added to.
+ */
+function addCandidateParentSelector (childSelector, boundaryIndex, candidates) {
+  const character = childSelector[boundaryIndex];
+  if (character === ':' || isSelectorWhitespace(character)) {
+    // The second colon of a pseudo-element is part of its `::` introducer,
+    // not a boundary between a potential parent and nested child.
+    if (character === ':' && childSelector[boundaryIndex - 1] === ':') {
+      return;
+    }
+    candidates.add(childSelector.slice(0, boundaryIndex));
+    return;
+  }
+  // A combinator may be separated from its parent by whitespace, which
+  // belongs to neither side, so the parent ends where that run begins.
+  let boundary = boundaryIndex;
+  while (boundary > 0 && isSelectorWhitespace(childSelector[boundary - 1])) {
+    boundary--;
+  }
+  if (boundary > 0) {
+    candidates.add(childSelector.slice(0, boundary));
+  }
+}
+
 /**
  * Collects every prefix of a child selector that could act as its nesting
  * parent. A parent always ends immediately before a pseudo-class colon, a
@@ -91,29 +133,10 @@ function isSelectorWhitespace (character) {
  */
 function collectCandidateParentSelectors (childSelector) {
   const candidates = new Set();
-  for (let index = 1; index < childSelector.length; index++) {
-    const character = childSelector[index];
-    if (character === ':' || isSelectorWhitespace(character)) {
-      // The second colon of a pseudo-element is part of its `::` introducer,
-      // not a boundary between a potential parent and nested child.
-      if (character === ':' && childSelector[index - 1] === ':') {
-        continue;
-      }
-      candidates.add(childSelector.slice(0, index));
-      continue;
-    }
-    if (character !== '>' && character !== '+' && character !== '~') {
-      continue;
-    }
-    // A combinator may be separated from its parent by whitespace, which
-    // belongs to neither side, so the parent ends where that run begins.
-    let boundary = index;
-    while (boundary > 0 && isSelectorWhitespace(childSelector[boundary - 1])) {
-      boundary--;
-    }
-    if (boundary > 0) {
-      candidates.add(childSelector.slice(0, boundary));
-    }
+  let boundaryIndex = findTopLevelDelimiter(childSelector, PARENT_BOUNDARY_CHARACTERS, 1);
+  while (boundaryIndex !== -1) {
+    addCandidateParentSelector(childSelector, boundaryIndex, candidates);
+    boundaryIndex = findTopLevelDelimiter(childSelector, PARENT_BOUNDARY_CHARACTERS, boundaryIndex + 1);
   }
   return candidates;
 }

package/src/rules/stringify.js

@@ -306,6 +306,83 @@ function simplifyNthPseudoClasses (selector) {
   return minified;
 }
 
+/**
+ * Matches an attribute selector's brackets: the attribute name, the matcher
+ * (such as `=` or `^=`), the value, and the optional case-sensitivity flag `i`
+ * or `s`. The value is a double-quoted string, a single-quoted string, or a run
+ * of unquoted characters in which escapes may stand in for spaces.
+ *
+ * @type {RegExp}
+ */
+const ATTRIBUTE_SELECTOR_PATTERN = /\[\s*([^\s=\]]+?)\s*([~|^$*]?=)\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|(?:\\.|[^\s"'\\\]])+)(?:\s*([is]))?\s*\]/gi;
+
+/**
+ * Matches a value that can be written without quotes: an identifier made of
+ * letters, digits, hyphens, underscores, and escapes. It cannot start with a
+ * digit, or with a hyphen followed by a digit.
+ *
+ * @type {RegExp}
+ */
+const UNQUOTED_ATTRIBUTE_VALUE_PATTERN = /^(?:-?[a-zA-Z_]|\\.)(?:[\w-]|\\.)*$/;
+
+/**
+ * Writes the text of a quoted attribute value without its quotes, escaping the
+ * characters that would otherwise end an unquoted identifier.
+ *
+ * @param  {string}      content  The value's text, without its quotes.
+ * @return {string|null}          The unquoted value, or null when it cannot be written without quotes.
+ */
+function escapeAttributeValue (content) {
+  if (content.includes('\\')) {
+    return null;
+  }
+  // Escape special characters that require quoting (spaces, #, ., :, /, ;)
+  const escaped = content.replace(/([ #.:/;])/g, '\\$1');
+  if (!UNQUOTED_ATTRIBUTE_VALUE_PATTERN.test(escaped)) {
+    return null;
+  }
+  return escaped;
+}
+
+/**
+ * Writes an attribute value with double quotes, removing the escapes that only
+ * an unquoted value needs. A value that already has quotes keeps them, unless
+ * a single-quoted value holds a double quote that would have to be escaped.
+ *
+ * @param  {string} rawValue  The value as written, with or without quotes.
+ * @return {string}           The value wrapped in double quotes.
+ */
+function quoteAttributeValue (rawValue) {
+  if (rawValue[0] === '"' || rawValue[0] === '\'') {
+    const content = rawValue.slice(1, -1);
+    return content.includes('"') ? rawValue : '"' + content + '"';
+  }
+  // Unescape the characters that only an unquoted value needs escaped
+  return '"' + rawValue.replace(/\\([ #.:/;])/g, '$1') + '"';
+}
+
+/**
+ * Writes an attribute value and its case-sensitivity flag in whichever form is
+ * shorter. A value written with quotes stays quoted on a tie, and a value written
+ * without quotes stays unquoted. A flag after an unquoted value needs a space,
+ * but a flag after a quoted value does not.
+ *
+ * @param  {string}      rawValue  The value as written, including its quotes when it has them.
+ * @param  {string|null} flag      The flag as written, or null when there is none.
+ * @return {string}                The value followed by the flag, in its shortest form.
+ */
+function formatAttributeValue (rawValue, flag) {
+  const isQuoted = rawValue[0] === '"' || rawValue[0] === '\'';
+  const quotedForm = quoteAttributeValue(rawValue) + (flag || '');
+  const unquotedValue = isQuoted ? escapeAttributeValue(rawValue.slice(1, -1)) : rawValue;
+  if (unquotedValue === null) {
+    return quotedForm;
+  }
+  const unquotedForm = unquotedValue + (flag ? ' ' + flag : '');
+  const useUnquoted = isQuoted ? unquotedForm.length < quotedForm.length : unquotedForm.length <= quotedForm.length;
+  return useUnquoted ? unquotedForm : quotedForm;
+}
+
 /**
  * Writes each attribute selector's value quoted or escaped, whichever is
  * shorter, and removes the whitespace inside its brackets.
@@ -314,35 +391,9 @@ function simplifyNthPseudoClasses (selector) {
  * @return {string}           The selector with minified attribute selectors.
  */
 function minifyAttributeSelectors (selector) {
-  let minified = selector;
-  // Minify double-quoted attribute selectors: remove inner whitespace and escape when shorter
-  minified = minified.replace(/\[\s*([^=]+)\s*=\s*"(.*?)"\s*\]/g, (match, attribute, value) => {
-    // Escape special characters that require quoting (spaces, #, ., :, /, ;), and compare lengths
-    let escaped = value.replace(/([ #.:/;])/g, '\\$1');
-    if (escaped.length < value.length + 2) {
-      return '[' + attribute + '=' + escaped + ']';
-    }
-    return '[' + attribute + '="' + value + '"]';
-  });
-  // Minify single-quoted attribute selectors: remove inner whitespace and escape when shorter
-  minified = minified.replace(/\[\s*([^=]+)\s*=\s*'(.*?)'\s*\]/g, (match, attribute, value) => {
-    // Escape special characters that require quoting (spaces, #, ., :, /, ;), and compare lengths
-    let escaped = value.replace(/([ #.:/;])/g, '\\$1');
-    if (escaped.length < value.length + 2) {
-      return '[' + attribute + '=' + escaped + ']';
-    }
-    return '[' + attribute + '="' + value + '"]';
-  });
-  // Minify unquoted attribute selectors: quote when unescaping produces a shorter result
-  minified = minified.replace(/\[\s*([^=]+)\s*=\s*([^"'].*?)\s*\]/g, (match, attribute, value) => {
-    // Unescape special characters (spaces, #, ., :, /, ;) and compare with quoted form
-    let unescaped = value.replace(/\\([ #.:/;])/g, '$1');
-    if (unescaped.length + 2 < value.length) {
-      return '[' + attribute + '="' + unescaped + '"]';
-    }
-    return '[' + attribute + '=' + value + ']';
+  return selector.replace(ATTRIBUTE_SELECTOR_PATTERN, (match, attribute, matcher, rawValue, flag) => {
+    return '[' + attribute + matcher + formatAttributeValue(rawValue, flag) + ']';
   });
-  return minified;
 }
 
 /**