@startlibs/utils 1.1.1 → 1.2.0-rc.1

package/lib/index.cjs

@@ -12,16 +12,16 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _isPlainObject = require('lodash/fp/isPlainObject');
 var _fromPairs = require('lodash/fp/fromPairs');
 var _isFinite = require('lodash/fp/isFinite');
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _find = require('lodash/fp/find');
-var _reverse = require('lodash/fp/reverse');
 var _isEqual = require('lodash/fp/isEqual');
-var _isFunction = require('lodash/fp/isFunction');
 var _get = require('lodash/fp/get');
+var _isFunction = require('lodash/fp/isFunction');
+var styled = require('styled-components');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _reverse = require('lodash/fp/reverse');
 var _unset = require('lodash/fp/unset');
 var polished = require('polished');
-var styled = require('styled-components');
 var createEmotion = require('create-emotion');
 var _flow = require('lodash/fp/flow');
 var _without = require('lodash/fp/without');
@@ -55,15 +55,15 @@ var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _isPlainObject__default = /*#__PURE__*/_interopDefault(_isPlainObject);
 var _fromPairs__default = /*#__PURE__*/_interopDefault(_fromPairs);
 var _isFinite__default = /*#__PURE__*/_interopDefault(_isFinite);
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var _find__default = /*#__PURE__*/_interopDefault(_find);
-var _reverse__default = /*#__PURE__*/_interopDefault(_reverse);
 var _isEqual__default = /*#__PURE__*/_interopDefault(_isEqual);
-var _isFunction__default = /*#__PURE__*/_interopDefault(_isFunction);
 var _get__default = /*#__PURE__*/_interopDefault(_get);
-var _unset__default = /*#__PURE__*/_interopDefault(_unset);
+var _isFunction__default = /*#__PURE__*/_interopDefault(_isFunction);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+var _reverse__default = /*#__PURE__*/_interopDefault(_reverse);
+var _unset__default = /*#__PURE__*/_interopDefault(_unset);
 var createEmotion__default = /*#__PURE__*/_interopDefault(createEmotion);
 var _flow__default = /*#__PURE__*/_interopDefault(_flow);
 var _without__default = /*#__PURE__*/_interopDefault(_without);
@@ -239,7 +239,23 @@ const smoothScroll = function (el) {
   step();
 };
 
+// Soma a largura da scrollbar aos limites de largura de um mediaText.
+// Reconhece a forma antiga (`max-width: 600px`, `min-width: 37.5em`, que o sc emite) e a
+// sintaxe de intervalo (`width <= 600px`, `width < 600px`, `600px <= width`,
+// `400px < width < 600px`), que o Chromium devolve para o CSS estático do yak.
+// Sem lookbehind de propósito: é erro de sintaxe no Safari < 16.4, e o browserslist do pacote
+// ainda promete Safari 11. O caractere antes de `width` é capturado e devolvido igual, só pra
+// não casar o `width` de `device-width`.
+const LEGACY_OR_WIDTH_FIRST = /(m(?:in|ax)-width\s*:\s*|(?:^|[^-\w])width\s*[<>]=?\s*)([\d.]+)(px|em)/gi;
+const VALUE_FIRST = /([\d.]+)(px|em)(\s*[<>]=?\s*width)(?![-\w])/gi;
+function fixMediaText(mediaText, scrollWidth, fontSize) {
+  const grow = (value, unit) => unit.toLowerCase() === 'px' ? parseFloat(value) + scrollWidth + unit : (parseFloat(value) * fontSize + scrollWidth) / fontSize + unit;
+  return mediaText.replace(LEGACY_OR_WIDTH_FIRST, (match, prefix, value, unit) => prefix + grow(value, unit)).replace(VALUE_FIRST, (match, value, unit, suffix) => grow(value, unit) + suffix);
+}
+
 let fixed = false;
+// Each rule may only get the scrollbar width added once, even if its sheet is seen again.
+const patched = new WeakSet();
 const scrollWidth = function () {
   if (!window.document) return 0;
   const html = document.documentElement;
@@ -252,25 +268,47 @@ const scrollWidth = function () {
 const fixMediaQueryFn = function () {
   const fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
   if (scrollWidth > 0) {
-    [].slice.call(document.styleSheets).filter(styleSheet => isValidExternal(styleSheet) || isInline(styleSheet)).forEach(stylesheet => {
-      try {
-        [].slice.call(stylesheet.cssRules || stylesheet.media).filter(rule => rule.constructor === window.CSSMediaRule).forEach(rule => {
-          rule.media.mediaText = rule.media.mediaText.replace(/m(in|ax)-width:\s*(\d|\.)+(px|em)/gi, function (strA) {
-            if (strA.match('px')) {
-              return strA.replace(/\d+px/gi, function (strB) {
-                return parseInt(strB, 10) + scrollWidth + 'px';
-              });
-            } else {
-              return strA.replace(/\d.+?em/gi, function (strB) {
-                return (parseFloat(strB) * fontSize + scrollWidth) / fontSize + 'em';
-              });
-            }
-          });
-        });
-      } catch (e) {}
-    });
+    [].slice.call(document.styleSheets).forEach(fixStylesheet);
+    watchLateStylesheets();
   }
   fixed = true;
+  function fixStylesheet(stylesheet) {
+    if (!stylesheet || patched.has(stylesheet) || !(isValidExternal(stylesheet) || isInline(stylesheet))) {
+      return;
+    }
+    try {
+      [].slice.call(stylesheet.cssRules).filter(rule => rule.constructor === window.CSSMediaRule).forEach(rule => {
+        rule.media.mediaText = fixMediaText(rule.media.mediaText, scrollWidth, fontSize);
+      });
+      patched.add(stylesheet);
+    } catch (e) {}
+  }
+
+  // Lazy routes add <link>s, and Vite dev and HMR add or rewrite <style>s, after the first pass.
+  function watchLateStylesheets() {
+    new MutationObserver(mutations => mutations.forEach(_ref => {
+      let target = _ref.target,
+        addedNodes = _ref.addedNodes;
+      const owner = target.nodeType === Node.TEXT_NODE ? target.parentNode : target;
+      if (owner && owner.nodeName === 'STYLE') {
+        fixStylesheet(owner.sheet);
+      }
+      [].slice.call(addedNodes).forEach(node => {
+        if (node.nodeName === 'STYLE') {
+          fixStylesheet(node.sheet);
+        }
+        if (node.nodeName === 'LINK' && node.rel === 'stylesheet') {
+          // Not parsed yet when added; `load` also fires again if its href changes.
+          node.addEventListener('load', () => fixStylesheet(node.sheet));
+          fixStylesheet(node.sheet);
+        }
+      });
+    })).observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
   function sameOrigin(url) {
     const loc = window.location,
       a = document.createElement('a');
@@ -773,6 +811,13 @@ let getFetcher = async (url, json, options) => getFetcherWithResponse(url, json,
 const formFetchWithResponse = (url, options) => (values, meta) => postFetcherWithResponse(callIfFunction(url, meta, values), values, callIfFunction(options, meta, values));
 const formFetch = (url, options) => (values, meta) => postFetcher(callIfFunction(url, meta, values), values, callIfFunction(options, meta, values));
 
+// Saída sc (lib/): o keyframes do emotion, como sempre foi. A saída yak (lib-yak/) usa
+// animationKeyframes.yak.js no lugar deste arquivo (ver tools/rollup.base.mjs).
+const emotion = createEmotion__default["default"]({
+  nonce: typeof document !== 'undefined' && (document.querySelector('meta[property="csp-nonce"]') || {}).content || 'animation_nonce'
+});
+const animationKeyframes = emotion.keyframes;
+
 const moveElement = _curry__default["default"]((from, to, list) => {
   const el = list[from];
   const without = _pullAt__default["default"](from, list);
@@ -936,6 +981,60 @@ const customTheme = type => function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _get__default["default"](["theme", "startlibs", type], props) || '';
 };
+const vheight = (strings, size) => {
+  const propType = strings[0];
+  const calc = (strings[1] || "").replace(";", "").trim();
+  return "\n  ".concat(propType, " ").concat(calc ? "calc(".concat(size, "vh ").concat(calc, ")") : "".concat(size, "vh"), ";\n  ").concat(propType, " ").concat(calc ? "calc(calc(var(--vh, 1vh) * ".concat(size, ") ").concat(calc, ")") : "calc(var(--vh, 1vh) * ".concat(size, ")"), ";\n  ");
+};
+const getFrameOffset = (i, total) => Math.round(i * 100 / (total - 1));
+const oneWayAnimation = function () {
+  for (var _len = arguments.length, frames = new Array(_len), _key = 0; _key < _len; _key++) {
+    frames[_key] = arguments[_key];
+  }
+  return animationKeyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", ""])), frames.map((frame, i) => !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }")));
+};
+const twoWayAnimation = function () {
+  for (var _len2 = arguments.length, frames = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    frames[_key2] = arguments[_key2];
+  }
+  return [frames, _reverse__default["default"](frames)].map(frames => oneWayAnimation(...frames));
+};
+const animationTiming = props => function () {
+  for (var _len3 = arguments.length, animations = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    animations[_key3] = arguments[_key3];
+  }
+  return animations.filter(_ => _).map(_ => _ + ' ' + props).join(',');
+};
+const identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
+const identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
+function testSinglePath(props, path) {
+  if (typeof path === 'string') {
+    return !!_s.get(path, props);
+  } else if (typeof path === 'number') {
+    return !!props[path];
+  } else {
+    return false;
+  }
+}
+
+// ifProp na forma antiga (valor pronto, não template): devolve pass ou fail
+const ifPropValue = (path, pass, fail) => function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let result = false;
+  if (Array.isArray(path)) {
+    result = path.every(p => testSinglePath(props, p));
+  } else if (typeof path === 'object') {
+    result = !Object.entries(path).find(_ref3 => {
+      let _ref4 = _slicedToArray__default["default"](_ref3, 2),
+        k = _ref4[0],
+        v = _ref4[1];
+      return props[k] !== v;
+    });
+  } else {
+    result = testSinglePath(props, path);
+  }
+  return result ? pass : fail;
+};
 
 /**
  * Returns `pass` if prop is truthy. Otherwise returns `fail`
@@ -954,23 +1053,7 @@ const customTheme = type => function () {
 const ifProp = (path, pass, fail) => {
   if (pass && !_isFunction__default["default"](pass)) {
     // old version
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      let result = false;
-      if (Array.isArray(path)) {
-        result = path.every(p => testSinglePath(props, p));
-      } else if (typeof path === 'object') {
-        result = !Object.entries(path).find(_ref3 => {
-          let _ref4 = _slicedToArray__default["default"](_ref3, 2),
-            k = _ref4[0],
-            v = _ref4[1];
-          return props[k] !== v;
-        });
-      } else {
-        result = testSinglePath(props, path);
-      }
-      return result ? pass : fail;
-    };
+    return ifPropValue(path, pass, fail);
   } else {
     return function () {
       for (var _len = arguments.length, argsTrue = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -992,10 +1075,10 @@ const ifPropEquals = (path, str) => ifProp(path, _isEqual__default["default"](st
 const ifNotProp = path => ifProp(path, v => !v);
 const checkCustomScreenWidth = (sizeParis, customWidth) => {
   const currentWidth = callIfFunction(customWidth);
-  return !sizeParis.find(_ref5 => {
-    let _ref6 = _slicedToArray__default["default"](_ref5, 2),
-      size = _ref6[0],
-      type = _ref6[1];
+  return !sizeParis.find(_ref => {
+    let _ref2 = _slicedToArray__default["default"](_ref, 2),
+      size = _ref2[0],
+      type = _ref2[1];
     if (type === "min-width") {
       return currentWidth < size;
     }
@@ -1014,10 +1097,10 @@ const media = function () {
     }
     return styled.css(["", ""], props => {
       var _props$theme, _props$theme2;
-      return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.overrideMediaWidth ? checkCustomScreenWidth(sizePairs, (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.overrideMediaWidth) ? styled.css(...args) : "" : styled.css(["@media ", "{", "}"], sizePairs.map(_ref7 => {
-        let _ref8 = _slicedToArray__default["default"](_ref7, 2),
-          size = _ref8[0],
-          type = _ref8[1];
+      return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.overrideMediaWidth ? checkCustomScreenWidth(sizePairs, (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.overrideMediaWidth) ? styled.css(...args) : "" : styled.css(["@media ", "{", "}"], sizePairs.map(_ref3 => {
+        let _ref4 = _slicedToArray__default["default"](_ref3, 2),
+          size = _ref4[0],
+          type = _ref4[1];
         return "(".concat(type, ": ").concat(size + scrollWidth, "px)");
       }).join(' and '), styled.css(...args));
     });
@@ -1028,51 +1111,13 @@ media.between = (min, max) => media([min, 'min-width'], [max, 'max-width']);
 media.max = n => media([n, 'max-width']);
 media.min = n => media([n, 'min-width']);
 media.desktop = media([601, 'min-width']);
-const vheight = (strings, size) => {
-  const propType = strings[0];
-  const calc = (strings[1] || "").replace(";", "").trim();
-  return "\n  ".concat(propType, " ").concat(calc ? "calc(".concat(size, "vh ").concat(calc, ")") : "".concat(size, "vh"), ";\n  ").concat(propType, " ").concat(calc ? "calc(calc(var(--vh, 1vh) * ".concat(size, ") ").concat(calc, ")") : "calc(var(--vh, 1vh) * ".concat(size, ")"), ";\n  ");
-};
-function testSinglePath(props, path) {
-  if (typeof path === 'string') {
-    return !!_s.get(path, props);
-  } else if (typeof path === 'number') {
-    return !!props[path];
-  } else {
-    return false;
-  }
-}
-const getFrameOffset = (i, total) => Math.round(i * 100 / (total - 1));
-const emotion = createEmotion__default["default"]({
-  nonce: typeof document !== 'undefined' && (document.querySelector('meta[property="csp-nonce"]') || {}).content || 'animation_nonce'
-});
-const oneWayAnimation = function () {
-  for (var _len5 = arguments.length, frames = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    frames[_key5] = arguments[_key5];
-  }
-  return emotion.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", ""])), frames.map((frame, i) => !frame ? '' : "".concat(getFrameOffset(i, frames.length), "% {\n      ").concat(frame, "\n    }")));
-};
-const twoWayAnimation = function () {
-  for (var _len6 = arguments.length, frames = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-    frames[_key6] = arguments[_key6];
-  }
-  return [frames, _reverse__default["default"](frames)].map(frames => oneWayAnimation(...frames));
-};
-const animationTiming = props => function () {
-  for (var _len7 = arguments.length, animations = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-    animations[_key7] = arguments[_key7];
-  }
-  return animations.filter(_ => _).map(_ => _ + ' ' + props).join(',');
-};
-const identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);');
-const identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;');
-const styledExtend = _ref9 => {
-  let target = _ref9.target,
-    componentStyle = _ref9.componentStyle;
+const styledExtend = _ref5 => {
+  let target = _ref5.target,
+    componentStyle = _ref5.componentStyle;
   return function () {
     const wasStatic = !_find__default["default"](_isFunction__default["default"], componentStyle.rules);
-    for (var _len8 = arguments.length, template = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-      template[_key8] = arguments[_key8];
+    for (var _len5 = arguments.length, template = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      template[_key5] = arguments[_key5];
     }
     const v = /*#__PURE__*/styled__default["default"](target)(...template, ...(wasStatic ? [] : [() => ""]));
     v.componentStyle.rules = [...componentStyle.rules, ...v.componentStyle.rules];
@@ -1080,18 +1125,84 @@ const styledExtend = _ref9 => {
   };
 };
 const printerMedia = function () {
-  for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-    args[_key9] = arguments[_key9];
+  for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+    args[_key6] = arguments[_key6];
   }
   return props => props.theme.printMode ? styled.css(...args) : styled.css(["@media print{", "}"], styled.css(...args));
 };
 const notPrinterMedia = function () {
-  for (var _len0 = arguments.length, args = new Array(_len0), _key0 = 0; _key0 < _len0; _key0++) {
-    args[_key0] = arguments[_key0];
+  for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+    args[_key7] = arguments[_key7];
   }
   return props => props.theme.printMode ? '' : styled.css(["@media screen{", "}"], styled.css(...args));
 };
 
+// Registra um @keyframes pelo CSSOM, sem criar <style> na página: funciona com CSP
+// `style-src 'self'` sem nonce. Ordem de tentativa:
+//   1. uma folha construída (new CSSStyleSheet) em document.adoptedStyleSheets;
+//   2. browser sem folha construída: insertRule numa folha do próprio site já carregada
+//      (de preferência um <link>, que nenhum runtime de CSS-in-JS gerencia);
+//   3. nenhuma das duas: <style> com o nonce do <meta property="csp-nonce">, se houver.
+// Cada nome entra uma vez só; quem chama garante que nome igual é conteúdo igual.
+const inserted = new Set();
+let adoptedSheet = null;
+let pageSheet = null;
+const canAdoptSheets = () => typeof CSSStyleSheet !== 'undefined' && 'replaceSync' in CSSStyleSheet.prototype && 'adoptedStyleSheets' in document;
+
+// Outro código pode reatribuir document.adoptedStyleSheets e tirar a folha da lista: recoloca.
+const getAdoptedSheet = () => {
+  if (!adoptedSheet) adoptedSheet = new CSSStyleSheet();
+  if (document.adoptedStyleSheets.indexOf(adoptedSheet) < 0) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.concat(adoptedSheet);
+  }
+  return adoptedSheet;
+};
+
+// Folha que vale pra tela inteira e cujas regras dá pra ler (folha de outra origem lança erro).
+const isWritable = sheet => {
+  if (sheet.disabled || !sheet.ownerNode || !sheet.ownerNode.isConnected) return false;
+  if (sheet.media && sheet.media.length && sheet.media.mediaText !== 'all') return false;
+  try {
+    return !!sheet.cssRules;
+  } catch (e) {
+    return false;
+  }
+};
+const getPageSheet = () => {
+  if (pageSheet && isWritable(pageSheet)) return pageSheet;
+  const sheets = Array.prototype.slice.call(document.styleSheets).filter(isWritable);
+  pageSheet = sheets.filter(sheet => sheet.ownerNode.tagName === 'LINK')[0] || sheets[0] || null;
+  return pageSheet;
+};
+const appendRule = (sheet, rule) => {
+  try {
+    sheet.insertRule(rule, sheet.cssRules.length);
+  } catch (e) {
+    // regra que o browser não entende: igual a um <style> com ela, só não faz nada
+  }
+};
+const appendStyleElement = (name, rule) => {
+  const style = document.createElement('style');
+  style.id = 'startlibs-keyframes-' + name;
+  const nonce = (document.querySelector('meta[property="csp-nonce"]') || {}).content;
+  if (nonce) style.nonce = nonce;
+  style.textContent = rule;
+  document.head.appendChild(style);
+};
+const insertKeyframes = (name, frames) => {
+  if (typeof document === 'undefined' || inserted.has(name)) return name;
+  inserted.add(name);
+  const rule = '@keyframes ' + name + ' {' + frames + '}';
+  if (canAdoptSheets()) {
+    appendRule(getAdoptedSheet(), rule);
+  } else if (getPageSheet()) {
+    appendRule(pageSheet, rule);
+  } else {
+    appendStyleElement(name, rule);
+  }
+  return name;
+};
+
 const escapedValidParts = /(^|[^\\])(dd?|DD?|mm?|LL?|hh?|MM?|ss|SSS|yy(?:yy)?)/g;
 const validParts = /(dd?|DD?|mm?|LL?|hh?|MM?|yy(?:yy)|yy|ss|SSS)$/;
 const addZero = v => (v < 10 ? '0' : '') + v;
@@ -1163,7 +1274,7 @@ function formatDateToPattern(format) {
   return format.replace(escapedValidParts, (_, _1, _2) => _1 + (_2 === 'yy' ? '##' : _2 === 'yyyy' ? '####' : '0#'));
 }
 function formatDate(date, format, messages, noUTC) {
-  if (!date) return '';
+  if (!date && date !== 0) return '';
   const separators = format.replace(escapedValidParts, '\0').split('\0');
   const parts = format.match(escapedValidParts);
   const formattedDate = parts.reduce((acc, part) => acc.concat(separators.length ? [separators.shift()] : [], part.replace(validParts, ''), val[part.match(validParts)[0]][0](date, messages, noUTC)), []);
@@ -1744,6 +1855,7 @@ exports.ifNotProp = ifNotProp;
 exports.ifProp = ifProp;
 exports.ifPropEquals = ifPropEquals;
 exports.ifUndefined = ifUndefined;
+exports.insertKeyframes = insertKeyframes;
 exports.intToHour = intToHour;
 exports.intervalsIntersect = intervalsIntersect;
 exports.intervalsIntersectExclusive = intervalsIntersectExclusive;