@thejaredwilcurt/csslop 0.0.54 → 0.0.56

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "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/at-rules.js

@@ -23,6 +23,127 @@ function removeIEMediaRules (rules) {
   });
 }
 
+/**
+ * Matches the media type keyword that opens a normalized `@media` query, such as `screen` in `screen and (width>=768px)`.
+ *
+ * @type {RegExp}
+ */
+const LEADING_MEDIA_TYPE_PATTERN = /^[a-z-]+(?=\s|$)/i;
+
+/**
+ * Matches one parenthesized media condition, allowing one level of nested parentheses such as `(not (color))`.
+ *
+ * @type {RegExp}
+ */
+const PARENTHESIZED_CONDITION_PATTERN = /\((?:[^()]|\([^()]*\))*\)/g;
+
+/**
+ * Splits a `@media` query into the media type it names and the conditions it adds, so that two queries can be joined with `and`. Queries that use a list, `not`, or `only` cannot be joined this way.
+ *
+ * @param  {string}      media  The raw `@media` query string.
+ * @return {object|null}        The `type` (null when none applies) and `conditions` text, or null when the query cannot be joined.
+ */
+function parseJoinableMediaQuery (media) {
+  const normalized = normalizeMedia(media);
+  const typeText = normalized.match(LEADING_MEDIA_TYPE_PATTERN)?.[0] ?? '';
+  const typeName = typeText.toLowerCase();
+  if (normalized.includes(',') || typeName === 'not' || typeName === 'only') {
+    return null;
+  }
+  // Drop the `and` that separates the media type from the conditions
+  const conditions = normalized.slice(typeText.length).replace(/^\s*and\s*/i, '');
+  // Anything left once the parenthesized conditions and `and` joiners are removed is an unsupported operator
+  const unparsedText = conditions.replace(PARENTHESIZED_CONDITION_PATTERN, '').replace(/\band\b/gi, '').trim();
+  if (unparsedText) {
+    return null;
+  }
+  return {
+    // `all` matches every document, so it adds no restriction of its own
+    type: typeName && typeName !== 'all' ? typeName : null,
+    conditions
+  };
+}
+
+/**
+ * Reports whether two queries name different media types. A document has only one media type, so a block requiring both can never match.
+ *
+ * @param  {object|null} outer  The parsed enclosing query, from `parseJoinableMediaQuery`.
+ * @param  {object|null} inner  The parsed nested query, from `parseJoinableMediaQuery`.
+ * @return {boolean}            True when the two queries name different media types.
+ */
+function areExclusiveMediaTypes (outer, inner) {
+  return Boolean(outer?.type && inner?.type && outer.type !== inner.type);
+}
+
+/**
+ * Joins a `@media` block nested directly inside another into the single query that matches the same documents, such as `screen and (width>=768px)`. A media type both queries share is written once.
+ *
+ * @param  {string}      outerMedia  The raw query of the enclosing `@media` block.
+ * @param  {string}      innerMedia  The raw query of the nested `@media` block.
+ * @return {string|null}             The joined query, or null when the pair must stay nested.
+ */
+function joinNestedMediaQueries (outerMedia, innerMedia) {
+  const outer = parseJoinableMediaQuery(outerMedia);
+  const inner = parseJoinableMediaQuery(innerMedia);
+  if (!outer || !inner || areExclusiveMediaTypes(outer, inner)) {
+    return null;
+  }
+  const parts = [outer.type || inner.type, outer.conditions, inner.conditions].filter(Boolean);
+  return parts.join(' and ') || 'all';
+}
+
+/**
+ * Reports whether an entry of a rule list is real content rather than the whitespace between entries.
+ *
+ * @param  {object}  entry  An entry of a rule list.
+ * @return {boolean}        True when the entry is not whitespace.
+ */
+function isContentEntry (entry) {
+  return entry.type !== 'whitespace';
+}
+
+/**
+ * Simplifies one `@media` block. A block whose only content is a single nested `@media` block is joined into one query, and the simplification repeats on the result. Nested `@media` blocks whose media type the block already excludes are removed.
+ *
+ * @param  {object} rule  The `@media` rule node to simplify.
+ * @return {object}       A new `@media` rule node.
+ */
+function simplifyMediaBlock (rule) {
+  const children = rule.rules || [];
+  const content = children.filter(isContentEntry);
+  if (content.length === 1 && content[0].type === 'media') {
+    const joinedMedia = joinNestedMediaQueries(rule.media, content[0].media);
+    if (joinedMedia !== null) {
+      return simplifyMediaBlock({ ...content[0], media: joinedMedia });
+    }
+  }
+  const outerQuery = parseJoinableMediaQuery(rule.media);
+  return {
+    ...rule,
+    rules: children.filter((child) => {
+      return !(child.type === 'media' && areExclusiveMediaTypes(outerQuery, parseJoinableMediaQuery(child.media)));
+    })
+  };
+}
+
+/**
+ * Simplifies the `@media` blocks in a rule list, dropping any block whose content was removed entirely as dead.
+ *
+ * @param  {Array} rules  The AST rule nodes to process.
+ * @return {Array}        A new array of rules with nested `@media` blocks simplified.
+ */
+function simplifyNestedMediaRules (rules) {
+  return rules.flatMap((rule) => {
+    if (rule.type !== 'media') {
+      return [rule];
+    }
+    const simplified = simplifyMediaBlock(rule);
+    const hadContent = (rule.rules || []).some(isContentEntry);
+    const isEmptiedByDeadContent = hadContent && !simplified.rules.some(isContentEntry);
+    return isEmptiedByDeadContent ? [] : [simplified];
+  });
+}
+
 /**
  * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
  *
@@ -126,5 +247,6 @@ export {
   deduplicateKeyframes,
   mergeLayerRules,
   mergeMediaRules,
-  removeIEMediaRules
+  removeIEMediaRules,
+  simplifyNestedMediaRules
 };

package/src/rules/optimize/index.js

@@ -6,7 +6,8 @@ import {
   deduplicateKeyframes,
   mergeLayerRules,
   mergeMediaRules,
-  removeIEMediaRules
+  removeIEMediaRules,
+  simplifyNestedMediaRules
 } from './at-rules.js';
 import { removeEmptyRules } from './empty-rules.js';
 import { expandPureNestedRules } from './expand-nesting.js';
@@ -45,6 +46,7 @@ function clearSelectorCaches () {
 function optimizeRuleList (rules) {
   let result = expandPureNestedRules(rules);
   result = removeIEMediaRules(result);
+  result = simplifyNestedMediaRules(result);
   result = mergeLayerRules(result, mergeSelectorRules);
   result = mergeMediaRules(result, mergeSelectorRules);
   result = deduplicateKeyframes(result);

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;
 }
 
 /**