postcss-calc 8.2.3 → 8.2.4

package/{dist → src}/lib/stringifier.js

@@ -1,77 +1,64 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
+'use strict';
 const order = {
-  "*": 0,
-  "/": 0,
-  "+": 1,
-  "-": 1
+  '*': 0,
+  '/': 0,
+  '+': 1,
+  '-': 1,
 };
+
 /**
  * @param {number} value
  * @param {number | false} prec
  */
-
 function round(value, prec) {
   if (prec !== false) {
     const precision = Math.pow(10, prec);
     return Math.round(value * precision) / precision;
   }
-
   return value;
 }
+
 /**
  * @param {number | false} prec
  * @param {import('../parser').CalcNode} node
  *
  * @return {string}
  */
-
-
 function stringify(node, prec) {
   switch (node.type) {
-    case "MathExpression":
-      {
-        const {
-          left,
-          right,
-          operator: op
-        } = node;
-        let str = "";
-
-        if (left.type === 'MathExpression' && order[op] < order[left.operator]) {
-          str += `(${stringify(left, prec)})`;
-        } else {
-          str += stringify(left, prec);
-        }
-
-        str += order[op] ? ` ${node.operator} ` : node.operator;
+    case 'MathExpression': {
+      const { left, right, operator: op } = node;
+      let str = '';
+      if (left.type === 'MathExpression' && order[op] < order[left.operator]) {
+        str += `(${stringify(left, prec)})`;
+      } else {
+        str += stringify(left, prec);
+      }
 
-        if (right.type === 'MathExpression' && order[op] < order[right.operator]) {
-          str += `(${stringify(right, prec)})`;
-        } else {
-          str += stringify(right, prec);
-        }
+      str += order[op] ? ` ${node.operator} ` : node.operator;
 
-        return str;
+      if (
+        right.type === 'MathExpression' &&
+        order[op] < order[right.operator]
+      ) {
+        str += `(${stringify(right, prec)})`;
+      } else {
+        str += stringify(right, prec);
       }
 
+      return str;
+    }
     case 'Number':
       return round(node.value, prec).toString();
-
     case 'Function':
       return node.value.toString();
-
     case 'ParenthesizedExpression':
       return `(${stringify(node.content, prec)})`;
-
     default:
       return round(node.value, prec) + node.unit;
   }
 }
+
 /**
  * @param {string} calc
  * @param {import('../parser').CalcNode} node
@@ -82,27 +69,25 @@ function stringify(node, prec) {
  *
  * @returns {string}
  */
-
-
-function _default(calc, node, originalValue, options, result, item) {
+module.exports = function (calc, node, originalValue, options, result, item) {
   let str = stringify(node, options.precision);
-  const shouldPrintCalc = node.type === "MathExpression" || node.type === "Function";
+
+  const shouldPrintCalc =
+    node.type === 'MathExpression' || node.type === 'Function';
 
   if (shouldPrintCalc) {
     // if calc expression couldn't be resolved to a single value, re-wrap it as
     // a calc()
-    str = `${calc}(${str})`; // if the warnWhenCannotResolve option is on, inform the user that the calc
-    // expression could not be resolved to a single value
+    str = `${calc}(${str})`;
 
+    // if the warnWhenCannotResolve option is on, inform the user that the calc
+    // expression could not be resolved to a single value
     if (options.warnWhenCannotResolve) {
-      result.warn("Could not reduce expression: " + originalValue, {
+      result.warn('Could not reduce expression: ' + originalValue, {
         plugin: 'postcss-calc',
-        node: item
+        node: item,
       });
     }
   }
-
   return str;
-}
-
-module.exports = exports.default;
+};

package/src/lib/transform.js

@@ -0,0 +1,109 @@
+'use strict';
+const selectorParser = require('postcss-selector-parser');
+const valueParser = require('postcss-value-parser');
+
+const { parser } = require('../parser.js');
+
+const reducer = require('./reducer.js');
+const stringifier = require('./stringifier.js');
+
+const MATCH_CALC = /((?:-(moz|webkit)-)?calc)/i;
+
+/**
+ * @param {string} value
+ * @param {{precision: number, warnWhenCannotResolve: boolean}} options
+ * @param {import("postcss").Result} result
+ * @param {import("postcss").ChildNode} item
+ */
+function transformValue(value, options, result, item) {
+  return valueParser(value)
+    .walk((node) => {
+      // skip anything which isn't a calc() function
+      if (node.type !== 'function' || !MATCH_CALC.test(node.value)) {
+        return;
+      }
+
+      // stringify calc expression and produce an AST
+      const contents = valueParser.stringify(node.nodes);
+      const ast = parser.parse(contents);
+
+      // reduce AST to its simplest form, that is, either to a single value
+      // or a simplified calc expression
+      const reducedAst = reducer(ast, options.precision);
+
+      // stringify AST and write it back
+      /** @type {valueParser.Node} */ (node).type = 'word';
+      node.value = stringifier(
+        node.value,
+        reducedAst,
+        value,
+        options,
+        result,
+        item
+      );
+
+      return false;
+    })
+    .toString();
+}
+/**
+ * @param {import("postcss-selector-parser").Selectors} value
+ * @param {{precision: number, warnWhenCannotResolve: boolean}} options
+ * @param {import("postcss").Result} result
+ * @param {import("postcss").ChildNode} item
+ */
+function transformSelector(value, options, result, item) {
+  return selectorParser((selectors) => {
+    selectors.walk((node) => {
+      // attribute value
+      // e.g. the "calc(3*3)" part of "div[data-size="calc(3*3)"]"
+      if (node.type === 'attribute' && node.value) {
+        node.setValue(transformValue(node.value, options, result, item));
+      }
+
+      // tag value
+      // e.g. the "calc(3*3)" part of "div:nth-child(2n + calc(3*3))"
+      if (node.type === 'tag') {
+        node.value = transformValue(node.value, options, result, item);
+      }
+
+      return;
+    });
+  }).processSync(value);
+}
+
+/**
+ * @param {any} node
+ * @param {{precision: number, preserve: boolean, warnWhenCannotResolve: boolean}} options
+ * @param {'value'|'params'|'selector'} property
+ * @param {import("postcss").Result} result
+ */
+module.exports = (node, property, options, result) => {
+  let value = node[property];
+
+  try {
+    value =
+      property === 'selector'
+        ? transformSelector(node[property], options, result, node)
+        : transformValue(node[property], options, result, node);
+  } catch (error) {
+    if (error instanceof Error) {
+      result.warn(error.message, { node });
+    } else {
+      result.warn('Error', { node });
+    }
+    return;
+  }
+
+  // if the preserve option is enabled and the value has changed, write the
+  // transformed value into a cloned node which is inserted before the current
+  // node, preserving the original value. Otherwise, overwrite the original
+  // value.
+  if (options.preserve && node[property] !== value) {
+    const clone = node.clone();
+    clone[property] = value;
+    node.parent.insertBefore(node, clone);
+  } else {
+    node[property] = value;
+  }
+};

package/src/parser.d.ts

@@ -0,0 +1,51 @@
+export interface MathExpression {
+  type: 'MathExpression';
+  right: CalcNode;
+  left: CalcNode;
+  operator: '*' | '+' | '-' | '/';
+}
+
+export interface ParenthesizedExpression {
+  type: 'ParenthesizedExpression';
+  content: CalcNode;
+}
+
+export interface DimensionExpression {
+  type:
+    | 'LengthValue'
+    | 'AngleValue'
+    | 'TimeValue'
+    | 'FrequencyValue'
+    | 'PercentageValue'
+    | 'ResolutionValue'
+    | 'EmValue'
+    | 'ExValue'
+    | 'ChValue'
+    | 'RemValue'
+    | 'VhValue'
+    | 'VwValue'
+    | 'VminValue'
+    | 'VmaxValue';
+  value: number;
+  unit: string;
+}
+
+export interface NumberExpression {
+  type: 'Number';
+  value: number;
+}
+
+export interface FunctionExpression {
+  type: 'Function';
+  value: string;
+}
+
+export type ValueExpression = DimensionExpression | NumberExpression;
+
+export type CalcNode = MathExpression | ValueExpression | FunctionExpression | ParenthesizedExpression;
+
+export interface Parser {
+  parse: (arg: string) => CalcNode;
+}
+
+export const parser: Parser;

package/src/parser.jison

@@ -0,0 +1,111 @@
+/* description: Parses expressions. */
+
+/* lexical grammar */
+%lex
+
+%options case-insensitive
+
+%%
+\s+                                             /* skip whitespace */
+
+(\-(webkit|moz)\-)?calc\b                       return 'CALC';
+
+[a-z][a-z0-9-]*\s*\((?:(?:\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\')|\([^)]*\)|[^\(\)]*)*\)     return 'FUNCTION';
+
+"*"                                             return 'MUL';
+"/"                                             return 'DIV';
+"+"                                             return 'ADD';
+"-"                                             return 'SUB';
+
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)em\b              return 'EMS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)ex\b              return 'EXS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)ch\b              return 'CHS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)rem\b             return 'REMS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vw\b              return 'VWS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vh\b              return 'VHS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vmin\b            return 'VMINS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)vmax\b            return 'VMAXS';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)cm\b              return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)mm\b              return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)Q\b               return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)in\b              return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)pt\b              return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)pc\b              return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)px\b              return 'LENGTH';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)deg\b             return 'ANGLE';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)grad\b            return 'ANGLE';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)rad\b             return 'ANGLE';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)turn\b            return 'ANGLE';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)s\b               return 'TIME';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)ms\b              return 'TIME';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)Hz\b              return 'FREQ';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)kHz\b             return 'FREQ';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)dpi\b             return 'RES';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)dpcm\b            return 'RES';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)dppx\b            return 'RES';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)\%                return 'PERCENTAGE';
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)\b                return 'NUMBER';
+
+(([0-9]+("."[0-9]+)?|"."[0-9]+)(e(\+|-)[0-9]+)?)-?([a-zA-Z_]|[\240-\377]|(\\[0-9a-fA-F]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-fA-F]))([a-zA-Z0-9_-]|[\240-\377]|(\\[0-9a-fA-F]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-fA-F]))*\b       return 'UNKNOWN_DIMENSION';
+
+"("                                             return 'LPAREN';
+")"                                             return 'RPAREN';
+
+<<EOF>>                                         return 'EOF';
+
+/lex
+
+%left ADD SUB
+%left MUL DIV
+%left UPREC
+
+
+%start expression
+
+%%
+
+expression
+  : math_expression EOF { return $1; }
+  ;
+
+  math_expression
+    : CALC LPAREN math_expression RPAREN { $$ = $3; }
+    | math_expression ADD math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
+    | math_expression SUB math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
+    | math_expression MUL math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
+    | math_expression DIV math_expression { $$ = { type: 'MathExpression', operator: $2, left: $1, right: $3 }; }
+    | LPAREN math_expression RPAREN { $$ = { type: 'ParenthesizedExpression', content: $2 }; }
+    | function { $$ = $1; }
+    | dimension { $$ = $1; }
+    | number { $$ = $1; }
+    ;
+
+  function
+    : FUNCTION { $$ = { type: 'Function', value: $1 }; }
+    ;
+
+  dimension
+    : LENGTH { $$ = { type: 'LengthValue', value: parseFloat($1), unit: /[a-z]+$/i.exec($1)[0] }; }
+    | ANGLE { $$ = { type: 'AngleValue', value: parseFloat($1), unit: /[a-z]+$/i.exec($1)[0] }; }
+    | TIME { $$ = { type: 'TimeValue', value: parseFloat($1), unit: /[a-z]+$/i.exec($1)[0] }; }
+    | FREQ { $$ = { type: 'FrequencyValue', value: parseFloat($1), unit: /[a-z]+$/i.exec($1)[0] }; }
+    | RES { $$ = { type: 'ResolutionValue', value: parseFloat($1), unit: /[a-z]+$/i.exec($1)[0] }; }
+    | UNKNOWN_DIMENSION { $$ = { type: 'UnknownDimension', value: parseFloat($1), unit: /[a-z]+$/i.exec($1)[0] }; }
+    | EMS { $$ = { type: 'EmValue', value: parseFloat($1), unit: 'em' }; }
+    | EXS { $$ = { type: 'ExValue', value: parseFloat($1), unit: 'ex' }; }
+    | CHS { $$ = { type: 'ChValue', value: parseFloat($1), unit: 'ch' }; }
+    | REMS { $$ = { type: 'RemValue', value: parseFloat($1), unit: 'rem' }; }
+    | VHS { $$ = { type: 'VhValue', value: parseFloat($1), unit: 'vh' }; }
+    | VWS { $$ = { type: 'VwValue', value: parseFloat($1), unit: 'vw' }; }
+    | VMINS { $$ = { type: 'VminValue', value: parseFloat($1), unit: 'vmin' }; }
+    | VMAXS { $$ = { type: 'VmaxValue', value: parseFloat($1), unit: 'vmax' }; }
+    | PERCENTAGE { $$ = { type: 'PercentageValue', value: parseFloat($1), unit: '%' }; }
+    | ADD dimension { var prev = $2; $$ = prev; }
+    | SUB dimension { var prev = $2; prev.value *= -1; $$ = prev; }
+    ;
+
+  number
+    : NUMBER { $$ = { type: 'Number', value: parseFloat($1) }; }
+    | ADD NUMBER { $$ = { type: 'Number', value: parseFloat($2) }; }
+    | SUB NUMBER { $$ = { type: 'Number', value: parseFloat($2) * -1 }; }
+    ;

package/types/index.d.ts

@@ -1,11 +1,4 @@
-export default pluginCreator;
-export type PostCssCalcOptions = {
-    precision?: number | false;
-    preserve?: boolean;
-    warnWhenCannotResolve?: boolean;
-    mediaQueries?: boolean;
-    selectors?: boolean;
-};
+export = pluginCreator;
 /**
  * @typedef {{precision?: number | false,
  *          preserve?: boolean,
@@ -14,11 +7,19 @@ export type PostCssCalcOptions = {
  *          selectors?: boolean}} PostCssCalcOptions
  */
 /**
-* @type {import('postcss').PluginCreator<PostCssCalcOptions>}
-* @param {PostCssCalcOptions} opts
-* @return {import('postcss').Plugin}
-*/
+ * @type {import('postcss').PluginCreator<PostCssCalcOptions>}
+ * @param {PostCssCalcOptions} opts
+ * @return {import('postcss').Plugin}
+ */
 declare function pluginCreator(opts: PostCssCalcOptions): import('postcss').Plugin;
 declare namespace pluginCreator {
-    const postcss: true;
+    export { postcss, PostCssCalcOptions };
 }
+type PostCssCalcOptions = {
+    precision?: number | false;
+    preserve?: boolean;
+    warnWhenCannotResolve?: boolean;
+    mediaQueries?: boolean;
+    selectors?: boolean;
+};
+declare var postcss: true;

package/types/lib/convertUnit.d.ts

@@ -1,4 +1,4 @@
-export default convertUnit;
+export = convertUnit;
 /**
  * @param {number} value
  * @param {string} sourceUnit

package/types/lib/reducer.d.ts

@@ -1,11 +1,14 @@
-export default reduce;
-export type Collectible = {
-    preOperator: '+' | '-';
-    node: import('../parser').CalcNode;
-};
+export = reduce;
 /**
  * @param {import('../parser').CalcNode} node
  * @param {number} precision
  * @return {import('../parser').CalcNode}
  */
 declare function reduce(node: import('../parser').CalcNode, precision: number): import('../parser').CalcNode;
+declare namespace reduce {
+    export { Collectible };
+}
+type Collectible = {
+    preOperator: '+' | '-';
+    node: import('../parser').CalcNode;
+};

package/types/lib/stringifier.d.ts

@@ -1,14 +1,5 @@
-/**
- * @param {string} calc
- * @param {import('../parser').CalcNode} node
- * @param {string} originalValue
- * @param {{precision: number | false, warnWhenCannotResolve: boolean}} options
- * @param {import("postcss").Result} result
- * @param {import("postcss").ChildNode} item
- *
- * @returns {string}
- */
-export default function _default(calc: string, node: import('../parser').CalcNode, originalValue: string, options: {
+declare function _exports(calc: string, node: import('../parser').CalcNode, originalValue: string, options: {
     precision: number | false;
     warnWhenCannotResolve: boolean;
 }, result: import("postcss").Result, item: import("postcss").ChildNode): string;
+export = _exports;

package/types/lib/transform.d.ts

@@ -1,6 +1,6 @@
-declare function _default(node: any, property: 'value' | 'params' | 'selector', options: {
+declare function _exports(node: any, property: 'value' | 'params' | 'selector', options: {
     precision: number;
     preserve: boolean;
     warnWhenCannotResolve: boolean;
 }, result: import("postcss").Result): void;
-export default _default;
+export = _exports;

package/dist/index.js

@@ -1,64 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _transform = _interopRequireDefault(require("./lib/transform"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * @typedef {{precision?: number | false,
- *          preserve?: boolean, 
- *          warnWhenCannotResolve?: boolean, 
- *          mediaQueries?: boolean, 
- *          selectors?: boolean}} PostCssCalcOptions
- */
-
-/**
-* @type {import('postcss').PluginCreator<PostCssCalcOptions>}
-* @param {PostCssCalcOptions} opts
-* @return {import('postcss').Plugin}
-*/
-function pluginCreator(opts) {
-  const options = Object.assign({
-    precision: 5,
-    preserve: false,
-    warnWhenCannotResolve: false,
-    mediaQueries: false,
-    selectors: false
-  }, opts);
-  return {
-    postcssPlugin: 'postcss-calc',
-
-    OnceExit(css, {
-      result
-    }) {
-      css.walk(node => {
-        const {
-          type
-        } = node;
-
-        if (type === 'decl') {
-          (0, _transform.default)(node, "value", options, result);
-        }
-
-        if (type === 'atrule' && options.mediaQueries) {
-          (0, _transform.default)(node, "params", options, result);
-        }
-
-        if (type === 'rule' && options.selectors) {
-          (0, _transform.default)(node, "selector", options, result);
-        }
-      });
-    }
-
-  };
-}
-
-pluginCreator.postcss = true;
-var _default = pluginCreator;
-exports.default = _default;
-module.exports = exports.default;