postcss-minify-gradients 9.0.4 → 9.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-minify-gradients",
-  "version": "9.0.4",
+  "version": "9.0.6",
   "description": "Minify gradient parameters with PostCSS.",
   "exports": {
     ".": {
@@ -35,7 +35,7 @@
   "dependencies": {
     "@colordx/core": "^7.2.0",
     "@csstools/css-tokenizer": "^4.0.2",
-    "cssnano-utils": "^8.0.0"
+    "cssnano-utils": "^8.0.2"
   },
   "bugs": {
     "url": "https://github.com/cssnano/cssnano/issues"

package/src/index.js

@@ -1,16 +1,11 @@
 /** @import {CSSToken} from '@csstools/css-tokenizer' */
+/** @import {SourceEdit, PositionValue} from './lib/positions.js' */
 import cssnanoUtils from 'cssnano-utils';
 import isKnownColor from './isKnownColor.js';
+import { isPositionZeroUnit, zeroPositionEdits } from './lib/positions.js';
 
-const {
-  TokenType,
-  applyEdits,
-  asciiLowerCase,
-  decoded,
-  lengthUnits,
-  numeric,
-  tokenEnd,
-} = cssnanoUtils;
+const { TokenType, applyEdits, asciiLowerCase, decoded, numeric, tokenEnd } =
+  cssnanoUtils;
 /** @type {typeof cssnanoUtils.balancedTokens} */
 const balancedTokens = cssnanoUtils.balancedTokens;
 
@@ -57,7 +52,6 @@ const lineKeywords = new Set([
   'top',
 ]);
 
-/** @typedef {{start: number, end: number, text: string}} SourceEdit */
 /**
  * A gradient stop before fixup: the argument it came from, the extent of its
  * colour, and the position tokens following that colour.
@@ -67,11 +61,6 @@ const lineKeywords = new Set([
  * @property {number} colorEnd Offset just past the colour in the declaration value.
  * @property {readonly number[]} position Positions following the colour.
  */
-/**
- * A position as a number and its unit, as reported by `numeric()`.
- *
- * @typedef {{number: number, unit: string}} PositionValue
- */
 
 /**
  * Significant tokens of a range, skipping whitespace, comments and the contents
@@ -120,38 +109,6 @@ function startsLineSpecification(input, parts) {
   );
 }
 
-/**
- * A zero length and a zero percentage name the same gradient position, which is
- * also what the unitless zero this plugin emits denotes. Angles and other
- * dimensions only share a spelling with it.
- *
- * @param {string} unit
- * @return {boolean}
- */
-function isPositionZeroUnit(unit) {
-  const lowered = asciiLowerCase(unit);
-  return lowered === '' || lowered === '%' || lengthUnits.has(lowered);
-}
-
-/**
- * Whether two positions are on the same scale, so their numbers can be ordered.
- * Only a length and a percentage naming zero are interchangeable.
- *
- * @param {PositionValue} current
- * @param {PositionValue} largest
- * @return {boolean}
- */
-function positionsComparable(current, largest) {
-  const unit = asciiLowerCase(current.unit);
-  const largestUnit = asciiLowerCase(largest.unit);
-  if (unit === largestUnit) return true;
-  return (
-    (current.number === 0 || largest.number === 0) &&
-    isPositionZeroUnit(unit) &&
-    isPositionZeroUnit(largestUnit)
-  );
-}
-
 /**
  * Offset just past the leading colour of an argument, so a functional colour
  * such as `rgb(0 0 0 / 50%)` ends at its closing parenthesis.
@@ -191,50 +148,6 @@ function lineDirectionEdit(input, parts) {
   return { start: from[2], end: tokenEnd(side), text: direction };
 }
 
-/**
- * Colour stop fixup raises a position to the largest position before it, so a
- * position at or below that non-negative maximum can be written as a zero.
- *
- * @param {readonly CSSToken[]} input
- * @param {readonly number[]} position Offsets of the position tokens.
- * @param {PositionValue | undefined} maximum Running maximum of the preceding positions.
- * @param {Map<number, SourceEdit>} edits Collects the positions reduced to a zero.
- * @return {PositionValue | undefined} The maximum the following stops clamp to.
- */
-function zeroPositionEdits(input, position, maximum, edits) {
-  let largest = maximum;
-  for (const index of position) {
-    const token = input[index];
-    const current = numeric(token);
-    if (!current) {
-      largest = undefined;
-      continue;
-    }
-    // A zero clamps to any non-negative maximum whatever units name them, so
-    // the maximum survives the rewritten spelling instead of resetting on the
-    // next pass.
-    if (
-      largest &&
-      largest.number >= 0 &&
-      current.number === 0 &&
-      isPositionZeroUnit(current.unit)
-    ) {
-      edits.set(index, { start: token[2], end: tokenEnd(token), text: '0' });
-      continue;
-    }
-    if (largest && !positionsComparable(current, largest)) {
-      largest = undefined;
-      continue;
-    }
-    if (largest && largest.number >= 0 && largest.number >= current.number) {
-      edits.set(index, { start: token[2], end: tokenEnd(token), text: '0' });
-    } else {
-      largest = current;
-    }
-  }
-  return largest;
-}
-
 /**
  * Collect the colour stops of one gradient argument list, the count of leading
  * arguments naming the line or shape instead of a stop, and the positions that
@@ -245,9 +158,10 @@ function zeroPositionEdits(input, position, maximum, edits) {
  * @param {NonNullable<ReturnType<typeof balancedTokens>>} structure
  * @param {{startIndex: number, endIndex: number}[]} args
  * @param {boolean} linear Whether the line specification may hold an angle.
+ * @param {boolean} conic Whether the stop positions are angles.
  * @return {{stops: ColorStop[], lineSpecifications: number, zeroEdits: Map<number, SourceEdit>, directionEdit: SourceEdit | undefined}}
  */
-function collectColorStops(source, input, structure, args, linear) {
+function collectColorStops(source, input, structure, args, linear, conic) {
   /** @type {ColorStop[]} */
   const stops = [];
   /** @type {Map<number, SourceEdit>} */
@@ -285,7 +199,7 @@ function collectColorStops(source, input, structure, args, linear) {
     }
     // Positions before the first stop belong to the line specification.
     if (!stops.length) continue;
-    largest = zeroPositionEdits(input, position, largest, zeroEdits);
+    largest = zeroPositionEdits(input, position, largest, zeroEdits, conic);
   }
   return { stops, lineSpecifications, zeroEdits, directionEdit };
 }
@@ -301,9 +215,17 @@ function collectColorStops(source, input, structure, args, linear) {
  * @param {number} lineSpecifications
  * @param {number} args
  * @param {Map<number, SourceEdit>} zeroEdits
+ * @param {boolean} conic
  * @return {SourceEdit[]}
  */
-function boundaryStopEdits(input, stops, lineSpecifications, args, zeroEdits) {
+function boundaryStopEdits(
+  input,
+  stops,
+  lineSpecifications,
+  args,
+  zeroEdits,
+  conic
+) {
   /** @type {SourceEdit[]} */
   const edits = [];
   for (const slot of new Set([0, stops.length - 1])) {
@@ -315,7 +237,7 @@ function boundaryStopEdits(input, stops, lineSpecifications, args, zeroEdits) {
     if (!value) continue;
     let removable = false;
     if (slot === 0 && stop.argIndex === lineSpecifications) {
-      removable = value.number === 0 && isPositionZeroUnit(value.unit);
+      removable = value.number === 0 && isPositionZeroUnit(value.unit, conic);
     }
     if (
       slot === stops.length - 1 &&
@@ -367,14 +289,12 @@ function optimise(decl) {
     const end = structure.endForOpening(index);
     if (end === undefined) continue;
     const args = structure.topLevelSegments(index + 1, end);
+    // The legacy prefixed syntax has no `to <side>` form, where an angle
+    // would also point in the opposite sense.
+    const linear = name.includes('linear') && !name.startsWith('-webkit-');
+    const conic = name.includes('conic');
     const { stops, lineSpecifications, zeroEdits, directionEdit } =
-      collectColorStops(
-        source,
-        input,
-        structure,
-        args,
-        name.includes('linear')
-      );
+      collectColorStops(source, input, structure, args, linear, conic);
     if (directionEdit) replacements.push(directionEdit);
     replacements.push(
       ...boundaryStopEdits(
@@ -382,7 +302,8 @@ function optimise(decl) {
         stops,
         lineSpecifications,
         args.length,
-        zeroEdits
+        zeroEdits,
+        conic
       ),
       ...zeroEdits.values()
     );

package/src/lib/positions.js

@@ -0,0 +1,99 @@
+/** @import {CSSToken} from '@csstools/css-tokenizer' */
+import cssnanoUtils from 'cssnano-utils';
+
+const { asciiLowerCase, lengthUnits, numeric, tokenEnd } = cssnanoUtils;
+
+/** @typedef {{start: number, end: number, text: string}} SourceEdit */
+
+/**
+ * A position as a number and its unit, as reported by `numeric()`.
+ *
+ * @typedef {{number: number, unit: string}} PositionValue
+ */
+
+const angleUnits = new Set(['deg', 'grad', 'rad', 'turn']);
+
+/**
+ * A zero in the position's own dimension and a zero percentage name the same
+ * gradient position, which is also what the unitless zero this plugin emits
+ * denotes. Conic positions are angles and the other gradients' are lengths; a
+ * zero of the other dimension is invalid there, so it must not be rewritten
+ * into a valid one.
+ *
+ * @param {string} unit
+ * @param {boolean} conic Whether the positions are `<angle-percentage>`.
+ * @return {boolean}
+ */
+export function isPositionZeroUnit(unit, conic) {
+  const lowered = asciiLowerCase(unit);
+  return (
+    lowered === '' ||
+    lowered === '%' ||
+    (conic ? angleUnits : lengthUnits).has(lowered)
+  );
+}
+
+/**
+ * Whether two positions are on the same scale, so their numbers can be ordered.
+ * Only a length and a percentage naming zero are interchangeable.
+ *
+ * @param {PositionValue} current
+ * @param {PositionValue} largest
+ * @param {boolean} conic
+ * @return {boolean}
+ */
+export function positionsComparable(current, largest, conic) {
+  const unit = asciiLowerCase(current.unit);
+  const largestUnit = asciiLowerCase(largest.unit);
+  if (unit === largestUnit) return true;
+  return (
+    (current.number === 0 || largest.number === 0) &&
+    isPositionZeroUnit(unit, conic) &&
+    isPositionZeroUnit(largestUnit, conic)
+  );
+}
+
+/**
+ * Colour stop fixup raises a position to the largest position before it, so a
+ * position at or below that non-negative maximum can be written as a zero.
+ *
+ * @param {readonly CSSToken[]} input
+ * @param {readonly number[]} position Offsets of the position tokens.
+ * @param {PositionValue | undefined} maximum Running maximum of the preceding positions.
+ * @param {Map<number, SourceEdit>} edits Collects the positions reduced to a zero.
+ * @param {boolean} conic
+ * @return {PositionValue | undefined} The maximum the following stops clamp to.
+ */
+export function zeroPositionEdits(input, position, maximum, edits, conic) {
+  let largest = maximum;
+  for (const index of position) {
+    const token = input[index];
+    const current = numeric(token);
+    if (!current) {
+      largest = undefined;
+      continue;
+    }
+    // A zero clamps to any non-negative maximum whatever units name them, so
+    // the maximum survives the rewritten spelling instead of resetting on the
+    // next pass.
+    if (
+      largest &&
+      largest.number >= 0 &&
+      current.number === 0 &&
+      isPositionZeroUnit(current.unit, conic)
+    ) {
+      edits.set(index, { start: token[2], end: tokenEnd(token), text: '0' });
+      continue;
+    }
+    if (largest && !positionsComparable(current, largest, conic)) {
+      largest = undefined;
+      continue;
+    }
+    if (largest && largest.number >= 0 && largest.number >= current.number) {
+      edits.set(index, { start: token[2], end: tokenEnd(token), text: '0' });
+    } else {
+      largest = current;
+    }
+  }
+  return largest;
+}

package/types/index.d.ts

@@ -1,8 +1,3 @@
-export type SourceEdit = {
-    start: number;
-    end: number;
-    text: string;
-};
 export type ColorStop = {
     /**
      * Comma-separated argument the stop came from.
@@ -17,10 +12,6 @@ export type ColorStop = {
      */
     position: readonly number[];
 };
-export type PositionValue = {
-    number: number;
-    unit: string;
-};
 /** @return {import('postcss').Plugin} */
 declare function pluginCreator(): import('postcss').Plugin;
 declare namespace pluginCreator {

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AA2DI,YAAsD,UAAU,GAAtD;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAY;AAKjE,YAAkB,SAAS,GAC3B;;;;IAAmB,QAAQ,EAAhB,MAAM,CACjB;;;;IAAmB,QAAQ,EAAhB,MAAM,CACjB;;;;IAA8B,QAAQ,EAA3B,SAAS,MAAM,EAAE,CAC9B;CAAA,CAAA;AAIE,YAA0C,aAAa,GAA7C;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAe;AAkU1D,yCAAyC;AACzC,iBAAS,aAAa,IADT,OAAO,SAAS,EAAE,MAAM,CAQpC;kBAPQ,aAAa;iBAQX,IAAI;;AAEf,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AA0DG,YAAkB,SAAS,GAC3B;;;;IAAmB,QAAQ,EAAhB,MAAM,CACjB;;;;IAAmB,QAAQ,EAAhB,MAAM,CACjB;;;;IAA8B,QAAQ,EAA3B,SAAS,MAAM,EAAE,CAC9B;CAAA,CAAA;AA6PD,yCAAyC;AACzC,iBAAS,aAAa,IADT,OAAO,SAAS,EAAE,MAAM,CAQpC;kBAPQ,aAAa;iBAQX,IAAI;;AAEf,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,CAAC"}

package/types/lib/positions.d.ts

@@ -0,0 +1,45 @@
+import type { CSSToken } from '@csstools/css-tokenizer';
+export type SourceEdit = {
+    start: number;
+    end: number;
+    text: string;
+};
+export type PositionValue = {
+    number: number;
+    unit: string;
+};
+/**
+ * A zero in the position's own dimension and a zero percentage name the same
+ * gradient position, which is also what the unitless zero this plugin emits
+ * denotes. Conic positions are angles and the other gradients' are lengths; a
+ * zero of the other dimension is invalid there, so it must not be rewritten
+ * into a valid one.
+ *
+ * @param {string} unit
+ * @param {boolean} conic Whether the positions are `<angle-percentage>`.
+ * @return {boolean}
+ */
+export declare function isPositionZeroUnit(unit: string, conic: boolean): boolean;
+/**
+ * Whether two positions are on the same scale, so their numbers can be ordered.
+ * Only a length and a percentage naming zero are interchangeable.
+ *
+ * @param {PositionValue} current
+ * @param {PositionValue} largest
+ * @param {boolean} conic
+ * @return {boolean}
+ */
+export declare function positionsComparable(current: PositionValue, largest: PositionValue, conic: boolean): boolean;
+/**
+ * Colour stop fixup raises a position to the largest position before it, so a
+ * position at or below that non-negative maximum can be written as a zero.
+ *
+ * @param {readonly CSSToken[]} input
+ * @param {readonly number[]} position Offsets of the position tokens.
+ * @param {PositionValue | undefined} maximum Running maximum of the preceding positions.
+ * @param {Map<number, SourceEdit>} edits Collects the positions reduced to a zero.
+ * @param {boolean} conic
+ * @return {PositionValue | undefined} The maximum the following stops clamp to.
+ */
+export declare function zeroPositionEdits(input: readonly CSSToken[], position: readonly number[], maximum: PositionValue | undefined, edits: Map<number, SourceEdit>, conic: boolean): PositionValue | undefined;
+//# sourceMappingURL=positions.d.ts.map

package/types/lib/positions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positions.d.ts","sourceRoot":"","sources":["../../src/lib/positions.js"],"names":[],"mappings":"AAAI,OAAQ,KAAA,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAA;AAKjD,YAAsD,UAAU,GAAtD;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAY;AAKjE,YAA0C,aAAa,GAA7C;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,CAAe;AAK1D;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAJ5B,MAI4B,EAAE,KAAK,EAHnC,OAGmC,GAFlC,OAAO,CASlB;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EALhC,aAKgC,EAAE,OAAO,EAJzC,aAIyC,EAAE,KAAK,EAHhD,OAGgD,GAF/C,OAAO,CAWlB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAP5B,SAAS,QAAQ,EAOW,EAAE,QAAQ,EANtC,SAAS,MAAM,EAMuB,EAAE,OAAO,EAL/C,aAAa,GAAG,SAK+B,EAAE,KAAK,EAJtD,GAAG,CAAC,MAAM,EAAE,UAAU,CAIgC,EAAE,KAAK,EAH7D,OAG6D,GAF5D,aAAa,GAAG,SAAS,CAkCpC"}