@thejaredwilcurt/csslop 0.0.30 → 0.0.31

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "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/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;
 }
 
 /**