Dumb pipe

[dbox]

Now that all of the calc stuff has been ripped out, all we're doing is changing

20pxv to calc(20 * var(--pxv-unit)) which is just syntactic sugar. I'm fairly confident that negative values, decimals etc are all 100% handled by the calc so we can rip all that out..

the new plugin should probably look something like:

const valueParser = require('postcss-value-parser');

/**
 * PostCSS PXV (Viewport Pixel)
 * Provides syntactic sugar for fluid scaling units.
 * Converts '10pxv' shorthand into 'calc(10 * var(--pxv-unit))'.
 */
module.exports = (opts = {}) => {
  // Configurable variable name, defaulting to the explicit '--pxv-unit'
  const unitVar = opts.unitVar || '--pxv-unit';

  return {
    postcssPlugin: 'postcss-pxv',

    Declaration(decl) {
      // Performance guard: Case-insensitive check for the unit string
      if (!decl.value.toLowerCase().includes('pxv')) return;

      const parsed = valueParser(decl.value);

      parsed.walk((node) => {
        // Matches: 16pxv, -10pxv, .5pxv, -0.25pxv
        // Logic: Optional negative, optional leading decimal, required digits, unit
        const pxvRegex = /^-?[0-9]*\.?[0-9]+pxv$/i;

        if (node.type === 'word' && pxvRegex.test(node.value)) {
          // Extract the numeric part (e.g., "16" or "-10.5")
          const num = node.value.replace(/pxv/i, '');
          
          // The "Dumb Pipe" transformation:
          // Wraps the number in a calc multiplied by the cascade variable.
          node.value = `calc(${num} * var(${unitVar}))`;
        }
      });

      decl.value = parsed.toString();
    },
  };
};

module.exports.postcss = true;