@thejaredwilcurt/csslop 0.0.30 → 0.0.32

package/package.json

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

package/src/declarations/background.js

@@ -5,6 +5,7 @@
 import { minifyValue } from '../value/minify.js';
 
 import { shorthandMap } from './config.js';
+import { buildLayerPositionAndSize } from './image-layers.js';
 
 const BACKGROUND_POSITION_KEYWORDS = new Set(['left', 'center', 'right', 'top', 'bottom']);
 const BACKGROUND_REPEAT_KEYWORDS = new Set(['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'space', 'round']);
@@ -246,16 +247,7 @@ function buildBackgroundShorthandValue (valueMap, importantSuffix) {
   if (image && image !== 'none') {
     result.push(image);
   }
-  if (position && position !== '0 0' && position !== '0% 0%') {
-    result.push(position);
-  }
-  if (size && size !== 'auto') {
-    if (position && position !== '0 0' && position !== '0% 0%') {
-      result.push('/' + size);
-    } else {
-      result.push('0 0/' + size);
-    }
-  }
+  result.push(...buildLayerPositionAndSize(position, size));
   if (repeat && repeat !== 'repeat') {
     result.push(repeat);
   }

package/src/declarations/config.js

@@ -80,7 +80,7 @@ const shorthandMap = {
   'border-block-width': ['border-block-start-width', 'border-block-end-width'],
   transition: ['transition-property', 'transition-duration', 'transition-timing-function', 'transition-delay'],
   animation: ['animation-name', 'animation-duration', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
-  mask: ['mask-image', 'mask-repeat', 'mask-size'],
+  mask: ['mask-image', 'mask-position', 'mask-size', 'mask-repeat'],
   'position-try': ['position-try-order', 'position-try-fallbacks'],
   font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family'],
   marker: ['marker-start', 'marker-mid', 'marker-end'],
@@ -92,7 +92,7 @@ const shorthandOverrideMap = {
   columns: ['column-wrap'],
   border: ['border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
   font: ['font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position', 'font-feature-settings', 'font-kerning', 'font-language-override', 'font-optical-sizing', 'font-size-adjust', 'font-variation-settings'],
-  mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode', 'mask-position', 'mask-origin', 'mask-clip', 'mask-composite', 'mask-mode']
+  mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode', 'mask-origin', 'mask-clip', 'mask-composite', 'mask-mode']
 };
 
 /**

package/src/declarations/image-layers.js

@@ -0,0 +1,79 @@
+/**
+ * @file Shared grammar helpers for the layered image shorthands, `background` and `mask`, whose layers only accept a size behind a slash that follows a position.
+ */
+
+/**
+ * The layer positions a shorthand may leave unstated, since they already match
+ * the initial position that the shorthand resets the layer to.
+ *
+ * @type {Set<string>}
+ */
+const INITIAL_LAYER_POSITIONS = new Set(['0 0', '0% 0%']);
+
+/**
+ * The shortest spelling of the initial layer position, used whenever a stated
+ * size needs a position in front of it.
+ *
+ * @type {string}
+ */
+const SHORTEST_INITIAL_LAYER_POSITION = '0 0';
+
+/**
+ * The layer size a shorthand may leave unstated, since it already matches the
+ * initial size that the shorthand resets the layer to.
+ *
+ * @type {string}
+ */
+const INITIAL_LAYER_SIZE = 'auto';
+
+/**
+ * Reduces a layer position to what the shorthand has to spell out, which is
+ * nothing at all while the position holds its initial value.
+ *
+ * @param  {string} position  The layer position, or a falsy value when the layer states none.
+ * @return {string}           The position to write, or an empty string when it can be left out.
+ */
+function resolveStatedLayerPosition (position) {
+  if (!position || INITIAL_LAYER_POSITIONS.has(position)) {
+    return '';
+  }
+  return position;
+}
+
+/**
+ * Reduces a layer size to what the shorthand has to spell out, which is nothing
+ * at all while the size holds its initial value.
+ *
+ * @param  {string} size  The layer size, or a falsy value when the layer states none.
+ * @return {string}       The size to write, or an empty string when it can be left out.
+ */
+function resolveStatedLayerSize (size) {
+  if (!size || size === INITIAL_LAYER_SIZE) {
+    return '';
+  }
+  return size;
+}
+
+/**
+ * Builds the position and size components of a layered image shorthand value.
+ * The layer grammar only reads a size directly behind a `/` that follows a
+ * position, so a stated size pulls the initial position back into the output
+ * whenever the layer states no position of its own.
+ *
+ * @param  {string} position  The layer position, or a falsy value when the layer states none.
+ * @param  {string} size      The layer size, or a falsy value when the layer states none.
+ * @return {Array}            The shorthand components covering the position and the size.
+ */
+function buildLayerPositionAndSize (position, size) {
+  const statedPosition = resolveStatedLayerPosition(position);
+  const statedSize = resolveStatedLayerSize(size);
+  if (statedSize) {
+    return [(statedPosition || SHORTEST_INITIAL_LAYER_POSITION) + '/' + statedSize];
+  }
+  if (statedPosition) {
+    return [statedPosition];
+  }
+  return [];
+}
+
+export { buildLayerPositionAndSize };

package/src/declarations/shorthand-values.js

@@ -7,6 +7,7 @@ import { splitTopLevelComponents } from '../value/syntax.js';
 
 import { buildBackgroundShorthandValue } from './background.js';
 import { UNIFORM_VALUE_SHORTHANDS } from './config.js';
+import { buildLayerPositionAndSize } from './image-layers.js';
 
 /**
  * @typedef  {object} ShorthandComponents
@@ -124,26 +125,33 @@ function buildBackgroundValue ({ valueMap, importantSuffix }) {
 }
 
 /**
- * Builds a `mask` value, attaching the size after the position separator.
+ * Builds a `mask` value. A mask layer follows the same grammar as a background
+ * layer, so the image leads, the size only reads as a size while it sits behind
+ * a `/` that follows the position, and the repeat comes after both of them. A
+ * component holding its initial value is left out, since the shorthand already
+ * resets every longhand it covers back to that value.
  *
  * @param  {ShorthandComponents} components  The collected longhand values.
  * @return {string|null}                     The shorthand value, or null when it cannot be built.
  */
 function buildMaskValue ({ valueMap, importantSuffix }) {
   const image = valueMap.get('mask-image');
-  const repeat = valueMap.get('mask-repeat');
-  const size = valueMap.get('mask-size');
   if (!image) {
     return null;
   }
-  let result = image;
-  if (repeat) {
-    result += ' ' + repeat;
+  const repeat = valueMap.get('mask-repeat');
+  const result = [];
+  if (image !== 'none') {
+    result.push(image);
+  }
+  result.push(...buildLayerPositionAndSize(valueMap.get('mask-position'), valueMap.get('mask-size')));
+  if (repeat && repeat !== 'repeat') {
+    result.push(repeat);
   }
-  if (size) {
-    result += '/' + size;
+  if (!result.length) {
+    return 'none' + importantSuffix;
   }
-  return result + importantSuffix;
+  return result.join(' ') + importantSuffix;
 }
 
 /**

package/src/value/minify.js

@@ -980,12 +980,31 @@ const POSITION_OFFSET_SOURCE = '(?:left|center|right|top|bottom|[+-]?(?:\\d+|\\d
 const POSITION_COMPONENT_SOURCE = '(' + POSITION_OFFSET_SOURCE + '(?:\\s+' + POSITION_OFFSET_SOURCE + ')?)';
 
 /**
- * Matches a close-paren directly followed by a position that no slash follows,
- * which is the position that needs its separator put back.
+ * Matches everything a `url()` holds up to but not including its own closing
+ * parenthesis. A url is written without nested parentheses, so the first one
+ * that closes it is the end of the token.
+ *
+ * @type {string}
+ */
+const URL_TOKEN_BODY_SOURCE = 'url\\([^()]*';
+
+/**
+ * Matches a close-paren that ends an image function, directly followed by a
+ * position that no slash follows, which is the position that needs its
+ * separator put back. The parenthesis that ends a `url()` is skipped, since
+ * that one closes a token rather than a function.
+ *
+ * @type {RegExp}
+ */
+const UNSEPARATED_FUNCTION_POSITION_PATTERN = new RegExp('(?<!' + URL_TOKEN_BODY_SOURCE + ')\\)' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
+
+/**
+ * Matches a `url()` separated from the position that follows it, which is the
+ * separator a url does not need.
  *
  * @type {RegExp}
  */
-const UNSEPARATED_IMAGE_POSITION_PATTERN = new RegExp('\\)' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
+const SEPARATED_URL_POSITION_PATTERN = new RegExp('(' + URL_TOKEN_BODY_SOURCE + '\\))\\s+' + POSITION_COMPONENT_SOURCE, 'gi');
 
 /**
  * Matches a close-paren separated from a position that a slash follows, where
@@ -996,18 +1015,21 @@ const UNSEPARATED_IMAGE_POSITION_PATTERN = new RegExp('\\)' + POSITION_COMPONENT
 const SEPARATED_IMAGE_SIZE_POSITION_PATTERN = new RegExp('\\)\\s+' + POSITION_COMPONENT_SOURCE + '(?=\\/)', 'gi');
 
 /**
- * Restores the separator between an image function and the position that
+ * Normalizes the separator between the image of a layer and the position that
  * follows it. Both `background` and `mask` take a `<position> [ / <size> ]`
  * component after their image, and a bare position only reads as its own
- * component while whitespace separates it from the image function. A position
- * that a `/` follows needs no separator, since the slash delimits the pair.
+ * component while whitespace separates it from an image function. Neither a
+ * position that a `/` follows nor one that follows a `url()` needs the
+ * separator, since the slash delimits the pair and a url is consumed whole as a
+ * single token that ends at its own closing parenthesis.
  *
  * @param  {string} value  The layered image value, with the parenthesis padding removed.
- * @return {string}        The value with the position separator restored.
+ * @return {string}        The value with the position separator normalized.
  */
-function restoreImagePositionSeparator (value) {
-  const separated = value.replace(UNSEPARATED_IMAGE_POSITION_PATTERN, ') $1');
-  return separated.replace(SEPARATED_IMAGE_SIZE_POSITION_PATTERN, ')$1');
+function normalizeImagePositionSeparator (value) {
+  const separatedFromFunction = value.replace(UNSEPARATED_FUNCTION_POSITION_PATTERN, ') $1');
+  const joinedToUrl = separatedFromFunction.replace(SEPARATED_URL_POSITION_PATTERN, '$1$2');
+  return joinedToUrl.replace(SEPARATED_IMAGE_SIZE_POSITION_PATTERN, ')$1');
 }
 
 /**
@@ -1227,11 +1249,11 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
     if (normalized) {
       val = normalized;
     }
-    val = restoreImagePositionSeparator(val);
+    val = normalizeImagePositionSeparator(val);
   }
 
   if (property === 'mask') {
-    val = restoreImagePositionSeparator(val);
+    val = normalizeImagePositionSeparator(val);
   }
 
   if (property === 'border') {