@thejaredwilcurt/csslop 0.0.55 → 0.0.57

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",

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/factor-parents.js

@@ -276,6 +276,40 @@ function createWrapperDeclarations (run) {
   ];
 }
 
+/**
+ * Collects the run of consecutive sibling rules, starting at a given index,
+ * whose selectors can all nest under a candidate parent. Comments never affect
+ * the cascade, so they are passed over instead of ending the run.
+ *
+ * @param  {Array}                           rules                The sibling AST entries.
+ * @param  {number}                          startIndex           The index the run starts at.
+ * @param  {function(string): (string|null)} matchNestedSelector  The matcher built for the candidate parent.
+ * @return {object}                                               The `run` of rules paired with their nested selectors, and the `end` index just past the run's last rule.
+ */
+function collectSiblingRun (rules, startIndex, matchNestedSelector) {
+  const run = [];
+  let end = startIndex;
+  let lookahead = startIndex;
+  while (lookahead < rules.length) {
+    const sibling = rules[lookahead];
+    if (sibling.type === 'comment') {
+      lookahead++;
+      continue;
+    }
+    if (sibling.type !== 'rule' || !sibling.selectors?.length) {
+      break;
+    }
+    const nestedSelectors = nestSelectorsUnderParent(sibling, matchNestedSelector);
+    if (!nestedSelectors) {
+      break;
+    }
+    run.push({ sibling, nestedSelectors });
+    lookahead++;
+    end = lookahead;
+  }
+  return { end, run };
+}
+
 /**
  * Groups consecutive sibling rules that share a common leading selector
  * portion (such as `.foo` in `.foo .a`, `.foo .b`, or `.menu .item` in
@@ -308,20 +342,7 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       }
       const matchNestedSelector = createNestedSelectorMatcher(candidateParent);
       // Collect the run of consecutive rules whose selectors can all nest under the candidate.
-      const run = [];
-      let lookahead = index;
-      while (lookahead < rules.length) {
-        const sibling = rules[lookahead];
-        if (sibling.type !== 'rule' || !sibling.selectors?.length) {
-          break;
-        }
-        const nestedSelectors = nestSelectorsUnderParent(sibling, matchNestedSelector);
-        if (!nestedSelectors) {
-          break;
-        }
-        run.push({ sibling, nestedSelectors });
-        lookahead++;
-      }
+      const { end, run } = collectSiblingRun(rules, index, matchNestedSelector);
       const selectorCount = run.reduce((total, entry) => {
         return total + entry.nestedSelectors.length;
       }, 0);
@@ -333,8 +354,11 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       const savings = measureWrapperSavings(run, declarations, candidateParent);
       if (savings > 0 && (!bestGrouping || savings > bestGrouping.savings)) {
         bestGrouping = {
+          comments: rules.slice(index, end).filter((entry) => {
+            return entry.type === 'comment';
+          }),
           declarations,
-          lookahead,
+          end,
           parent: candidateParent,
           savings
         };
@@ -349,12 +373,12 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       index++;
       continue;
     }
-    result.push({
+    result.push(...bestGrouping.comments, {
       type: 'rule',
       selectors: [bestGrouping.parent],
       declarations: bestGrouping.declarations
     });
-    index = bestGrouping.lookahead;
+    index = bestGrouping.end;
   }
   return result;
 }

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

@@ -28,13 +28,13 @@ function nestSelectorRemainder (remainder) {
   if (remainder.startsWith(':')) {
     return '&' + remainder;
   }
-  if (remainder.startsWith(' ')) {
-    return remainder.slice(1);
-  }
   const combinatorMatch = remainder.match(LEADING_COMBINATOR_PATTERN);
   if (combinatorMatch) {
     return combinatorMatch[1] + combinatorMatch[2];
   }
+  if (remainder.startsWith(' ')) {
+    return remainder.slice(1);
+  }
   return null;
 }