@thejaredwilcurt/csslop 0.0.31 → 0.0.32

package/package.json

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

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/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') {