@thejaredwilcurt/csslop 0.0.55 → 0.0.56

package/package.json

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