jsxstyle-utils - npm Package Compare versions

Comparing version 0.0.0-canary-202173223623 to 0.0.0-canary-20217545826

CHANGELOG.md

 # jsxstyle-utils
 
-## 0.0.0-canary-202173223623
+## 0.0.0-canary-20217545826
 
@@ -5,0 +5,0 @@ ### Major Changes

lib/jsxstyle-utils.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var canUseDOM = !!(
+const canUseDOM = !!(
   typeof window !== 'undefined' &&
@@ -11,3 +11,3 @@ window.document &&
 );
-var styleElement;
+let styleElement;
 
@@ -20,4 +20,3 @@ if (
   // gross
-  var _module = module,
-    hot = _module.hot;
+  const { hot } = module;
 
@@ -28,3 +27,3 @@ if (hot.data != null) {
 
-  hot.addDisposeHandler(function (data) {
+  hot.addDisposeHandler((data) => {
     data.styleElement = styleElement;
@@ -48,3 +47,3 @@ });
   if (styleElement && styleElement.sheet) {
-    var sheet = styleElement.sheet;
+    const sheet = styleElement.sheet;
 
@@ -69,3 +68,3 @@ try {
 
-var componentStyles = {
+const componentStyles = {
   Block: {
@@ -130,3 +129,3 @@ display: 'block',
 // https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/dangerousStyleValue.js
-var isUnitlessNumber = {
+const isUnitlessNumber = {
   animationIterationCount: true,
@@ -182,5 +181,5 @@ aspectRatio: true,
 
-var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
-Object.keys(isUnitlessNumber).forEach(function (prop) {
-  prefixes.forEach(function (prefix) {
+const prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+Object.keys(isUnitlessNumber).forEach((prop) => {
+  prefixes.forEach((prefix) => {
     isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
@@ -190,3 +189,3 @@ });
 function dangerousStyleValue(name, value) {
-  var isEmpty = value == null || typeof value === 'boolean' || value === '';
+  const isEmpty = value == null || typeof value === 'boolean' || value === '';
 
@@ -226,8 +225,8 @@ if (isEmpty) {
 
-var uppercasePattern = /([A-Z])/g;
-var msPattern = /^ms-/;
-var hyphenateCache = {};
+const uppercasePattern = /([A-Z])/g;
+const msPattern = /^ms-/;
+const hyphenateCache = {};
 function hyphenateStyleName(styleName) {
   if (!hyphenateCache.hasOwnProperty(styleName)) {
-    var hyphenatedString = styleName
+    const hyphenatedString = styleName
       .replace(uppercasePattern, '-$1')
@@ -242,25 +241,5 @@ .toLowerCase()
 
-function _extends() {
-  _extends =
-    Object.assign ||
-    function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-  return _extends.apply(this, arguments);
-}
-
 // global flag makes subsequent calls of capRegex.test advance to the next match
-var capRegex = /[A-Z]/g;
-var commonComponentProps = {
+const capRegex = /[A-Z]/g;
+const commonComponentProps = {
   // class (preact) and className (React) are handled separately
@@ -277,3 +256,3 @@ checked: true,
 };
-var pseudoelements = {
+const pseudoelements = {
   after: true,
@@ -284,3 +263,3 @@ before: true,
 };
-var pseudoclasses = {
+const pseudoclasses = {
   active: true,
@@ -301,3 +280,3 @@ checked: true,
 
-var skippedProps = {
+const skippedProps = {
   component: true,
@@ -307,3 +286,3 @@ mediaQueries: true,
 };
-var doubleSpecificityPrefixes = {
+const doubleSpecificityPrefixes = {
   animation: true,
@@ -316,35 +295,27 @@ background: true,
 };
-var shorthandProps = {
-  marginH: function marginH(margin) {
-    return {
-      marginLeft: margin,
-      marginRight: margin,
-    };
-  },
-  marginV: function marginV(margin) {
-    return {
-      marginTop: margin,
-      marginBottom: margin,
-    };
-  },
-  paddingH: function paddingH(padding) {
-    return {
-      paddingLeft: padding,
-      paddingRight: padding,
-    };
-  },
-  paddingV: function paddingV(padding) {
-    return {
-      paddingTop: padding,
-      paddingBottom: padding,
-    };
-  },
+const shorthandProps = {
+  marginH: (margin) => ({
+    marginLeft: margin,
+    marginRight: margin,
+  }),
+  marginV: (margin) => ({
+    marginTop: margin,
+    marginBottom: margin,
+  }),
+  paddingH: (padding) => ({
+    paddingLeft: padding,
+    paddingRight: padding,
+  }),
+  paddingV: (padding) => ({
+    paddingTop: padding,
+    paddingBottom: padding,
+  }),
 };
-var parseStyleProps = function parseStyleProps(props, classNamePropKey) {
-  var componentProps =
-    typeof props.props === 'object' ? _extends({}, props.props) : {};
-  var parsedStyleProps = {};
+const parseStyleProps = (props, classNamePropKey) => {
+  const componentProps =
+    typeof props.props === 'object' ? Object.assign({}, props.props) : {};
+  const parsedStyleProps = {};
 
-  for (var originalPropName in props) {
-    var propValue = props[originalPropName]; // separate known component props from style props
+  for (const originalPropName in props) {
+    const propValue = props[originalPropName]; // separate known component props from style props
 
@@ -364,9 +335,9 @@ if (commonComponentProps.hasOwnProperty(originalPropName)) {
 
-    var propName = originalPropName;
-    var pseudoelement = void 0;
-    var pseudoclass = void 0;
-    var specificity = 0;
+    let propName = originalPropName;
+    let pseudoelement;
+    let pseudoclass;
+    let specificity = 0;
     capRegex.lastIndex = 0;
-    var splitIndex = 0;
-    var propNamePrefix =
+    let splitIndex = 0;
+    let propNamePrefix =
       capRegex.test(originalPropName) &&
@@ -409,9 +380,9 @@ capRegex.lastIndex > 1 &&
 
-    var keySuffix =
+    const keySuffix =
       (pseudoelement ? '::' + pseudoelement : '') +
       (pseudoclass ? ':' + pseudoclass : '');
-    var propFn = shorthandProps[propName];
+    const propFn = shorthandProps[propName];
 
     if (typeof propFn === 'function') {
-      var expandedProps = propFn(propValue);
+      const expandedProps = propFn(propValue);
 
@@ -422,4 +393,4 @@ if (expandedProps == null || typeof expandedProps !== 'object') {
 
-      for (var expandedPropName in expandedProps) {
-        var expandedPropValue = expandedProps[expandedPropName];
+      for (const expandedPropName in expandedProps) {
+        const expandedPropValue = expandedProps[expandedPropName];
 
@@ -431,5 +402,5 @@ if (expandedPropValue == null || expandedPropValue === false) {
         parsedStyleProps[expandedPropName + keySuffix] = {
-          pseudoelement: pseudoelement,
-          pseudoclass: pseudoclass,
-          specificity: specificity,
+          pseudoelement,
+          pseudoclass,
+          specificity,
           propName: expandedPropName,
@@ -445,7 +416,7 @@ propValue: expandedPropValue,
       parsedStyleProps[propName + keySuffix] = {
-        pseudoelement: pseudoelement,
-        pseudoclass: pseudoclass,
-        specificity: specificity,
-        propName: propName,
-        propValue: propValue,
+        pseudoelement,
+        pseudoclass,
+        specificity,
+        propName,
+        propValue,
       };
@@ -456,4 +427,4 @@ }
   return {
-    parsedStyleProps: parsedStyleProps,
-    componentProps: componentProps,
+    parsedStyleProps,
+    componentProps,
   };
@@ -463,3 +434,3 @@ };
 function processProps(props, classNamePropKey, getClassNameForKey, mediaQuery) {
-  var rules = [];
+  const rules = [];
 
@@ -469,9 +440,10 @@ if (props == null || typeof props !== 'object') {
       props: {},
-      rules: rules,
+      rules,
     };
   }
 
-  var _parseStyleProps = parseStyleProps(props, classNamePropKey),
-    parsedStyleProps = _parseStyleProps.parsedStyleProps,
-    componentProps = _parseStyleProps.componentProps;
+  const { parsedStyleProps, componentProps } = parseStyleProps(
+    props,
+    classNamePropKey
+  );
 
@@ -481,18 +453,15 @@ if (!parsedStyleProps) {
       props: componentProps,
-      rules: rules,
+      rules,
     };
   }
 
-  var classNames = props[classNamePropKey] || '';
+  let classNames = props[classNamePropKey] || '';
 
-  propLoop: for (var key in parsedStyleProps) {
-    var mergedProp = parsedStyleProps[key];
-    var pseudoelement = mergedProp.pseudoelement,
-      pseudoclass = mergedProp.pseudoclass,
-      propName = mergedProp.propName,
-      propValue = mergedProp.propValue;
-    var specificity = mergedProp.specificity;
-    var styleValue = void 0;
-    var className = void 0;
-    var hyphenatedPropName = void 0;
+  propLoop: for (const key in parsedStyleProps) {
+    const mergedProp = parsedStyleProps[key];
+    const { pseudoelement, pseudoclass, propName, propValue } = mergedProp;
+    let specificity = mergedProp.specificity;
+    let styleValue;
+    let className;
+    let hyphenatedPropName;
 
@@ -508,23 +477,24 @@ if (mediaQuery) {
     ) {
-      var animationValue = '';
+      let animationValue = '';
 
-      for (var k in propValue) {
-        var obj = propValue[k];
-        var groupStyles = '';
-        var animationResult = parseStyleProps(obj, 'className');
+      for (const k in propValue) {
+        const obj = propValue[k];
+        let groupStyles = '';
+        const animationResult = parseStyleProps(obj, 'className');
 
-        for (var _key in animationResult.parsedStyleProps) {
-          var _animationResult$pars = animationResult.parsedStyleProps[_key],
-            _propName = _animationResult$pars.propName,
-            _propValue = _animationResult$pars.propValue,
-            _pseudoclass = _animationResult$pars.pseudoclass,
-            _pseudoelement = _animationResult$pars.pseudoelement;
+        for (const key in animationResult.parsedStyleProps) {
+          const {
+            propName,
+            propValue,
+            pseudoclass,
+            pseudoelement,
+          } = animationResult.parsedStyleProps[key];
 
-          if (_pseudoclass || _pseudoelement) {
+          if (pseudoclass || pseudoelement) {
             if (process.env.NODE_ENV !== 'production') {
               console.error(
                 '[jsxstyle] Encountered a pseudo-prefixed prop in animation value: %s%s%s',
-                _propName,
-                _pseudoelement ? '::' + _pseudoelement : '',
-                _pseudoclass ? ':' + _pseudoclass : ''
+                propName,
+                pseudoelement ? '::' + pseudoelement : '',
+                pseudoclass ? ':' + pseudoclass : ''
               );
@@ -536,7 +506,7 @@ }
 
-          var value = dangerousStyleValue(_propName, _propValue);
+          const value = dangerousStyleValue(propName, propValue);
           if (value === '') continue;
           groupStyles +=
             (groupStyles === '' ? ' ' : '; ') +
-            hyphenateStyleName(_propName) +
+            hyphenateStyleName(propName) +
             ':' +
@@ -565,3 +535,3 @@ value;
 
-      var animationKey = getClassNameForKey(animationValue);
+      const animationKey = getClassNameForKey(animationValue);
       className = animationKey;
@@ -571,3 +541,3 @@ hyphenatedPropName = 'animation-name';
       specificity++;
-      rules.push('@keyframes ' + animationKey + ' { ' + animationValue + '}');
+      rules.push(`@keyframes ${animationKey} { ${animationValue}}`);
     } else {
@@ -582,3 +552,3 @@ styleValue = dangerousStyleValue(propName, propValue);
 
-    var styleRule =
+    const styleRule =
       (mediaQuery ? '@media ' + mediaQuery + ' { ' : '') +
@@ -609,3 +579,3 @@ '.' +
     props: componentProps,
-    rules: rules,
+    rules,
   };
@@ -616,4 +586,4 @@ }
 function stringHash(str) {
-  var hash = 5381;
-  var i = str.length;
+  let hash = 5381;
+  let i = str.length;
 
@@ -630,11 +600,11 @@ while (i) {
 
-var throwProdError = function throwProdError() {
+const throwProdError = () => {
   throw new Error();
 };
 
-var cannotInject = throwProdError;
-var alreadyInjected = throwProdError;
+let cannotInject = throwProdError;
+let alreadyInjected = throwProdError;
 
 if (process.env.NODE_ENV !== 'production') {
-  cannotInject = function cannotInject() {
+  cannotInject = () => {
     throw new Error(
@@ -645,3 +615,3 @@ 'jsxstyle error: `injectOptions` must be called before any jsxstyle components mount.'
 
-  alreadyInjected = function alreadyInjected() {
+  alreadyInjected = () => {
     throw new Error(
@@ -653,3 +623,3 @@ 'jsxstyle error: `injectOptions` should be called once and only once.'
 
-var getStringHash = function getStringHash(key) {
+const getStringHash = (key) => {
   return '_' + stringHash(key).toString(36);
@@ -659,15 +629,16 @@ };
 function getStyleCache() {
-  var cache = {};
-  var getClassNameForKey = getStringHash;
-  var onInsertRule;
+  let cache = {};
+  let getClassNameForKey = getStringHash;
+  let onInsertRule;
 
-  var memoizedGetClassNameForKey = function memoizedGetClassNameForKey(key) {
+  const memoizedGetClassNameForKey = (key) => {
     return (cache[key] = cache[key] || getClassNameForKey(key));
   };
 
-  var styleCache = {
-    reset: function reset() {
+  const styleCache = {
+    reset() {
       cache = {};
     },
-    injectOptions: function injectOptions(options) {
+
+    injectOptions(options) {
       if (options) {
@@ -683,9 +654,6 @@ if (options.getClassName) {
     },
-    getComponentProps: function getComponentProps(props, classNamePropKey) {
-      if (classNamePropKey === void 0) {
-        classNamePropKey = 'className';
-      }
 
+    getComponentProps(props, classNamePropKey = 'className') {
       styleCache.injectOptions = cannotInject;
-      var propsAndRules = processProps(
+      const propsAndRules = processProps(
         props,
@@ -695,3 +663,3 @@ classNamePropKey,
       );
-      propsAndRules.rules.forEach(function (rule) {
+      propsAndRules.rules.forEach((rule) => {
         onInsertRule && onInsertRule(rule);
@@ -698,0 +666,0 @@ addStyleToHead(rule);

lib/jsxstyle-utils.es.js

@@ -1,2 +0,2 @@
-var canUseDOM = !!(
+const canUseDOM = !!(
   typeof window !== 'undefined' &&
@@ -6,3 +6,3 @@ window.document &&
 );
-var styleElement;
+let styleElement;
 
@@ -15,4 +15,3 @@ if (
   // gross
-  var _module = module,
-    hot = _module.hot;
+  const { hot } = module;
 
@@ -23,3 +22,3 @@ if (hot.data != null) {
 
-  hot.addDisposeHandler(function (data) {
+  hot.addDisposeHandler((data) => {
     data.styleElement = styleElement;
@@ -43,3 +42,3 @@ });
   if (styleElement && styleElement.sheet) {
-    var sheet = styleElement.sheet;
+    const sheet = styleElement.sheet;
 
@@ -64,3 +63,3 @@ try {
 
-var componentStyles = {
+const componentStyles = {
   Block: {
@@ -125,3 +124,3 @@ display: 'block',
 // https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/dangerousStyleValue.js
-var isUnitlessNumber = {
+const isUnitlessNumber = {
   animationIterationCount: true,
@@ -177,5 +176,5 @@ aspectRatio: true,
 
-var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
-Object.keys(isUnitlessNumber).forEach(function (prop) {
-  prefixes.forEach(function (prefix) {
+const prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+Object.keys(isUnitlessNumber).forEach((prop) => {
+  prefixes.forEach((prefix) => {
     isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
@@ -185,3 +184,3 @@ });
 function dangerousStyleValue(name, value) {
-  var isEmpty = value == null || typeof value === 'boolean' || value === '';
+  const isEmpty = value == null || typeof value === 'boolean' || value === '';
 
@@ -221,8 +220,8 @@ if (isEmpty) {
 
-var uppercasePattern = /([A-Z])/g;
-var msPattern = /^ms-/;
-var hyphenateCache = {};
+const uppercasePattern = /([A-Z])/g;
+const msPattern = /^ms-/;
+const hyphenateCache = {};
 function hyphenateStyleName(styleName) {
   if (!hyphenateCache.hasOwnProperty(styleName)) {
-    var hyphenatedString = styleName
+    const hyphenatedString = styleName
       .replace(uppercasePattern, '-$1')
@@ -237,25 +236,5 @@ .toLowerCase()
 
-function _extends() {
-  _extends =
-    Object.assign ||
-    function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-  return _extends.apply(this, arguments);
-}
-
 // global flag makes subsequent calls of capRegex.test advance to the next match
-var capRegex = /[A-Z]/g;
-var commonComponentProps = {
+const capRegex = /[A-Z]/g;
+const commonComponentProps = {
   // class (preact) and className (React) are handled separately
@@ -272,3 +251,3 @@ checked: true,
 };
-var pseudoelements = {
+const pseudoelements = {
   after: true,
@@ -279,3 +258,3 @@ before: true,
 };
-var pseudoclasses = {
+const pseudoclasses = {
   active: true,
@@ -296,3 +275,3 @@ checked: true,
 
-var skippedProps = {
+const skippedProps = {
   component: true,
@@ -302,3 +281,3 @@ mediaQueries: true,
 };
-var doubleSpecificityPrefixes = {
+const doubleSpecificityPrefixes = {
   animation: true,
@@ -311,35 +290,27 @@ background: true,
 };
-var shorthandProps = {
-  marginH: function marginH(margin) {
-    return {
-      marginLeft: margin,
-      marginRight: margin,
-    };
-  },
-  marginV: function marginV(margin) {
-    return {
-      marginTop: margin,
-      marginBottom: margin,
-    };
-  },
-  paddingH: function paddingH(padding) {
-    return {
-      paddingLeft: padding,
-      paddingRight: padding,
-    };
-  },
-  paddingV: function paddingV(padding) {
-    return {
-      paddingTop: padding,
-      paddingBottom: padding,
-    };
-  },
+const shorthandProps = {
+  marginH: (margin) => ({
+    marginLeft: margin,
+    marginRight: margin,
+  }),
+  marginV: (margin) => ({
+    marginTop: margin,
+    marginBottom: margin,
+  }),
+  paddingH: (padding) => ({
+    paddingLeft: padding,
+    paddingRight: padding,
+  }),
+  paddingV: (padding) => ({
+    paddingTop: padding,
+    paddingBottom: padding,
+  }),
 };
-var parseStyleProps = function parseStyleProps(props, classNamePropKey) {
-  var componentProps =
-    typeof props.props === 'object' ? _extends({}, props.props) : {};
-  var parsedStyleProps = {};
+const parseStyleProps = (props, classNamePropKey) => {
+  const componentProps =
+    typeof props.props === 'object' ? Object.assign({}, props.props) : {};
+  const parsedStyleProps = {};
 
-  for (var originalPropName in props) {
-    var propValue = props[originalPropName]; // separate known component props from style props
+  for (const originalPropName in props) {
+    const propValue = props[originalPropName]; // separate known component props from style props
 
@@ -359,9 +330,9 @@ if (commonComponentProps.hasOwnProperty(originalPropName)) {
 
-    var propName = originalPropName;
-    var pseudoelement = void 0;
-    var pseudoclass = void 0;
-    var specificity = 0;
+    let propName = originalPropName;
+    let pseudoelement;
+    let pseudoclass;
+    let specificity = 0;
     capRegex.lastIndex = 0;
-    var splitIndex = 0;
-    var propNamePrefix =
+    let splitIndex = 0;
+    let propNamePrefix =
       capRegex.test(originalPropName) &&
@@ -404,9 +375,9 @@ capRegex.lastIndex > 1 &&
 
-    var keySuffix =
+    const keySuffix =
       (pseudoelement ? '::' + pseudoelement : '') +
       (pseudoclass ? ':' + pseudoclass : '');
-    var propFn = shorthandProps[propName];
+    const propFn = shorthandProps[propName];
 
     if (typeof propFn === 'function') {
-      var expandedProps = propFn(propValue);
+      const expandedProps = propFn(propValue);
 
@@ -417,4 +388,4 @@ if (expandedProps == null || typeof expandedProps !== 'object') {
 
-      for (var expandedPropName in expandedProps) {
-        var expandedPropValue = expandedProps[expandedPropName];
+      for (const expandedPropName in expandedProps) {
+        const expandedPropValue = expandedProps[expandedPropName];
 
@@ -426,5 +397,5 @@ if (expandedPropValue == null || expandedPropValue === false) {
         parsedStyleProps[expandedPropName + keySuffix] = {
-          pseudoelement: pseudoelement,
-          pseudoclass: pseudoclass,
-          specificity: specificity,
+          pseudoelement,
+          pseudoclass,
+          specificity,
           propName: expandedPropName,
@@ -440,7 +411,7 @@ propValue: expandedPropValue,
       parsedStyleProps[propName + keySuffix] = {
-        pseudoelement: pseudoelement,
-        pseudoclass: pseudoclass,
-        specificity: specificity,
-        propName: propName,
-        propValue: propValue,
+        pseudoelement,
+        pseudoclass,
+        specificity,
+        propName,
+        propValue,
       };
@@ -451,4 +422,4 @@ }
   return {
-    parsedStyleProps: parsedStyleProps,
-    componentProps: componentProps,
+    parsedStyleProps,
+    componentProps,
   };
@@ -458,3 +429,3 @@ };
 function processProps(props, classNamePropKey, getClassNameForKey, mediaQuery) {
-  var rules = [];
+  const rules = [];
 
@@ -464,9 +435,10 @@ if (props == null || typeof props !== 'object') {
       props: {},
-      rules: rules,
+      rules,
     };
   }
 
-  var _parseStyleProps = parseStyleProps(props, classNamePropKey),
-    parsedStyleProps = _parseStyleProps.parsedStyleProps,
-    componentProps = _parseStyleProps.componentProps;
+  const { parsedStyleProps, componentProps } = parseStyleProps(
+    props,
+    classNamePropKey
+  );
 
@@ -476,18 +448,15 @@ if (!parsedStyleProps) {
       props: componentProps,
-      rules: rules,
+      rules,
     };
   }
 
-  var classNames = props[classNamePropKey] || '';
+  let classNames = props[classNamePropKey] || '';
 
-  propLoop: for (var key in parsedStyleProps) {
-    var mergedProp = parsedStyleProps[key];
-    var pseudoelement = mergedProp.pseudoelement,
-      pseudoclass = mergedProp.pseudoclass,
-      propName = mergedProp.propName,
-      propValue = mergedProp.propValue;
-    var specificity = mergedProp.specificity;
-    var styleValue = void 0;
-    var className = void 0;
-    var hyphenatedPropName = void 0;
+  propLoop: for (const key in parsedStyleProps) {
+    const mergedProp = parsedStyleProps[key];
+    const { pseudoelement, pseudoclass, propName, propValue } = mergedProp;
+    let specificity = mergedProp.specificity;
+    let styleValue;
+    let className;
+    let hyphenatedPropName;
 
@@ -503,23 +472,24 @@ if (mediaQuery) {
     ) {
-      var animationValue = '';
+      let animationValue = '';
 
-      for (var k in propValue) {
-        var obj = propValue[k];
-        var groupStyles = '';
-        var animationResult = parseStyleProps(obj, 'className');
+      for (const k in propValue) {
+        const obj = propValue[k];
+        let groupStyles = '';
+        const animationResult = parseStyleProps(obj, 'className');
 
-        for (var _key in animationResult.parsedStyleProps) {
-          var _animationResult$pars = animationResult.parsedStyleProps[_key],
-            _propName = _animationResult$pars.propName,
-            _propValue = _animationResult$pars.propValue,
-            _pseudoclass = _animationResult$pars.pseudoclass,
-            _pseudoelement = _animationResult$pars.pseudoelement;
+        for (const key in animationResult.parsedStyleProps) {
+          const {
+            propName,
+            propValue,
+            pseudoclass,
+            pseudoelement,
+          } = animationResult.parsedStyleProps[key];
 
-          if (_pseudoclass || _pseudoelement) {
+          if (pseudoclass || pseudoelement) {
             if (process.env.NODE_ENV !== 'production') {
               console.error(
                 '[jsxstyle] Encountered a pseudo-prefixed prop in animation value: %s%s%s',
-                _propName,
-                _pseudoelement ? '::' + _pseudoelement : '',
-                _pseudoclass ? ':' + _pseudoclass : ''
+                propName,
+                pseudoelement ? '::' + pseudoelement : '',
+                pseudoclass ? ':' + pseudoclass : ''
               );
@@ -531,7 +501,7 @@ }
 
-          var value = dangerousStyleValue(_propName, _propValue);
+          const value = dangerousStyleValue(propName, propValue);
           if (value === '') continue;
           groupStyles +=
             (groupStyles === '' ? ' ' : '; ') +
-            hyphenateStyleName(_propName) +
+            hyphenateStyleName(propName) +
             ':' +
@@ -560,3 +530,3 @@ value;
 
-      var animationKey = getClassNameForKey(animationValue);
+      const animationKey = getClassNameForKey(animationValue);
       className = animationKey;
@@ -566,3 +536,3 @@ hyphenatedPropName = 'animation-name';
       specificity++;
-      rules.push('@keyframes ' + animationKey + ' { ' + animationValue + '}');
+      rules.push(`@keyframes ${animationKey} { ${animationValue}}`);
     } else {
@@ -577,3 +547,3 @@ styleValue = dangerousStyleValue(propName, propValue);
 
-    var styleRule =
+    const styleRule =
       (mediaQuery ? '@media ' + mediaQuery + ' { ' : '') +
@@ -604,3 +574,3 @@ '.' +
     props: componentProps,
-    rules: rules,
+    rules,
   };
@@ -611,4 +581,4 @@ }
 function stringHash(str) {
-  var hash = 5381;
-  var i = str.length;
+  let hash = 5381;
+  let i = str.length;
 
@@ -625,11 +595,11 @@ while (i) {
 
-var throwProdError = function throwProdError() {
+const throwProdError = () => {
   throw new Error();
 };
 
-var cannotInject = throwProdError;
-var alreadyInjected = throwProdError;
+let cannotInject = throwProdError;
+let alreadyInjected = throwProdError;
 
 if (process.env.NODE_ENV !== 'production') {
-  cannotInject = function cannotInject() {
+  cannotInject = () => {
     throw new Error(
@@ -640,3 +610,3 @@ 'jsxstyle error: `injectOptions` must be called before any jsxstyle components mount.'
 
-  alreadyInjected = function alreadyInjected() {
+  alreadyInjected = () => {
     throw new Error(
@@ -648,3 +618,3 @@ 'jsxstyle error: `injectOptions` should be called once and only once.'
 
-var getStringHash = function getStringHash(key) {
+const getStringHash = (key) => {
   return '_' + stringHash(key).toString(36);
@@ -654,15 +624,16 @@ };
 function getStyleCache() {
-  var cache = {};
-  var getClassNameForKey = getStringHash;
-  var onInsertRule;
+  let cache = {};
+  let getClassNameForKey = getStringHash;
+  let onInsertRule;
 
-  var memoizedGetClassNameForKey = function memoizedGetClassNameForKey(key) {
+  const memoizedGetClassNameForKey = (key) => {
     return (cache[key] = cache[key] || getClassNameForKey(key));
   };
 
-  var styleCache = {
-    reset: function reset() {
+  const styleCache = {
+    reset() {
       cache = {};
     },
-    injectOptions: function injectOptions(options) {
+
+    injectOptions(options) {
       if (options) {
@@ -678,9 +649,6 @@ if (options.getClassName) {
     },
-    getComponentProps: function getComponentProps(props, classNamePropKey) {
-      if (classNamePropKey === void 0) {
-        classNamePropKey = 'className';
-      }
 
+    getComponentProps(props, classNamePropKey = 'className') {
       styleCache.injectOptions = cannotInject;
-      var propsAndRules = processProps(
+      const propsAndRules = processProps(
         props,
@@ -690,3 +658,3 @@ classNamePropKey,
       );
-      propsAndRules.rules.forEach(function (rule) {
+      propsAndRules.rules.forEach((rule) => {
         onInsertRule && onInsertRule(rule);
@@ -693,0 +661,0 @@ addStyleToHead(rule);

lib/jsxstyle-utils.js

 define('jsxstyle-utils', ['exports'], function (exports) {
   'use strict';
 
-  var canUseDOM = !!(
+  const canUseDOM = !!(
     typeof window !== 'undefined' &&
@@ -9,3 +9,3 @@ window.document &&
   );
-  var styleElement;
+  let styleElement;
 
@@ -18,4 +18,3 @@ if (
     // gross
-    var _module = module,
-      hot = _module.hot;
+    const { hot } = module;
 
@@ -26,3 +25,3 @@ if (hot.data != null) {
 
-    hot.addDisposeHandler(function (data) {
+    hot.addDisposeHandler((data) => {
       data.styleElement = styleElement;
@@ -46,3 +45,3 @@ });
     if (styleElement && styleElement.sheet) {
-      var sheet = styleElement.sheet;
+      const sheet = styleElement.sheet;
 
@@ -67,3 +66,3 @@ try {
 
-  var componentStyles = {
+  const componentStyles = {
     Block: {
@@ -128,3 +127,3 @@ display: 'block',
   // https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/dangerousStyleValue.js
-  var isUnitlessNumber = {
+  const isUnitlessNumber = {
     animationIterationCount: true,
@@ -180,5 +179,5 @@ aspectRatio: true,
 
-  var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
-  Object.keys(isUnitlessNumber).forEach(function (prop) {
-    prefixes.forEach(function (prefix) {
+  const prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+  Object.keys(isUnitlessNumber).forEach((prop) => {
+    prefixes.forEach((prefix) => {
       isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
@@ -188,3 +187,3 @@ });
   function dangerousStyleValue(name, value) {
-    var isEmpty = value == null || typeof value === 'boolean' || value === '';
+    const isEmpty = value == null || typeof value === 'boolean' || value === '';
 
@@ -224,8 +223,8 @@ if (isEmpty) {
 
-  var uppercasePattern = /([A-Z])/g;
-  var msPattern = /^ms-/;
-  var hyphenateCache = {};
+  const uppercasePattern = /([A-Z])/g;
+  const msPattern = /^ms-/;
+  const hyphenateCache = {};
   function hyphenateStyleName(styleName) {
     if (!hyphenateCache.hasOwnProperty(styleName)) {
-      var hyphenatedString = styleName
+      const hyphenatedString = styleName
         .replace(uppercasePattern, '-$1')
@@ -240,25 +239,5 @@ .toLowerCase()
 
-  function _extends() {
-    _extends =
-      Object.assign ||
-      function (target) {
-        for (var i = 1; i < arguments.length; i++) {
-          var source = arguments[i];
-
-          for (var key in source) {
-            if (Object.prototype.hasOwnProperty.call(source, key)) {
-              target[key] = source[key];
-            }
-          }
-        }
-
-        return target;
-      };
-
-    return _extends.apply(this, arguments);
-  }
-
   // global flag makes subsequent calls of capRegex.test advance to the next match
-  var capRegex = /[A-Z]/g;
-  var commonComponentProps = {
+  const capRegex = /[A-Z]/g;
+  const commonComponentProps = {
     // class (preact) and className (React) are handled separately
@@ -275,3 +254,3 @@ checked: true,
   };
-  var pseudoelements = {
+  const pseudoelements = {
     after: true,
@@ -282,3 +261,3 @@ before: true,
   };
-  var pseudoclasses = {
+  const pseudoclasses = {
     active: true,
@@ -299,3 +278,3 @@ checked: true,
 
-  var skippedProps = {
+  const skippedProps = {
     component: true,
@@ -305,3 +284,3 @@ mediaQueries: true,
   };
-  var doubleSpecificityPrefixes = {
+  const doubleSpecificityPrefixes = {
     animation: true,
@@ -314,35 +293,27 @@ background: true,
   };
-  var shorthandProps = {
-    marginH: function marginH(margin) {
-      return {
-        marginLeft: margin,
-        marginRight: margin,
-      };
-    },
-    marginV: function marginV(margin) {
-      return {
-        marginTop: margin,
-        marginBottom: margin,
-      };
-    },
-    paddingH: function paddingH(padding) {
-      return {
-        paddingLeft: padding,
-        paddingRight: padding,
-      };
-    },
-    paddingV: function paddingV(padding) {
-      return {
-        paddingTop: padding,
-        paddingBottom: padding,
-      };
-    },
+  const shorthandProps = {
+    marginH: (margin) => ({
+      marginLeft: margin,
+      marginRight: margin,
+    }),
+    marginV: (margin) => ({
+      marginTop: margin,
+      marginBottom: margin,
+    }),
+    paddingH: (padding) => ({
+      paddingLeft: padding,
+      paddingRight: padding,
+    }),
+    paddingV: (padding) => ({
+      paddingTop: padding,
+      paddingBottom: padding,
+    }),
   };
-  var parseStyleProps = function parseStyleProps(props, classNamePropKey) {
-    var componentProps =
-      typeof props.props === 'object' ? _extends({}, props.props) : {};
-    var parsedStyleProps = {};
+  const parseStyleProps = (props, classNamePropKey) => {
+    const componentProps =
+      typeof props.props === 'object' ? Object.assign({}, props.props) : {};
+    const parsedStyleProps = {};
 
-    for (var originalPropName in props) {
-      var propValue = props[originalPropName]; // separate known component props from style props
+    for (const originalPropName in props) {
+      const propValue = props[originalPropName]; // separate known component props from style props
 
@@ -362,9 +333,9 @@ if (commonComponentProps.hasOwnProperty(originalPropName)) {
 
-      var propName = originalPropName;
-      var pseudoelement = void 0;
-      var pseudoclass = void 0;
-      var specificity = 0;
+      let propName = originalPropName;
+      let pseudoelement;
+      let pseudoclass;
+      let specificity = 0;
       capRegex.lastIndex = 0;
-      var splitIndex = 0;
-      var propNamePrefix =
+      let splitIndex = 0;
+      let propNamePrefix =
         capRegex.test(originalPropName) &&
@@ -407,9 +378,9 @@ capRegex.lastIndex > 1 &&
 
-      var keySuffix =
+      const keySuffix =
         (pseudoelement ? '::' + pseudoelement : '') +
         (pseudoclass ? ':' + pseudoclass : '');
-      var propFn = shorthandProps[propName];
+      const propFn = shorthandProps[propName];
 
       if (typeof propFn === 'function') {
-        var expandedProps = propFn(propValue);
+        const expandedProps = propFn(propValue);
 
@@ -420,4 +391,4 @@ if (expandedProps == null || typeof expandedProps !== 'object') {
 
-        for (var expandedPropName in expandedProps) {
-          var expandedPropValue = expandedProps[expandedPropName];
+        for (const expandedPropName in expandedProps) {
+          const expandedPropValue = expandedProps[expandedPropName];
 
@@ -429,5 +400,5 @@ if (expandedPropValue == null || expandedPropValue === false) {
           parsedStyleProps[expandedPropName + keySuffix] = {
-            pseudoelement: pseudoelement,
-            pseudoclass: pseudoclass,
-            specificity: specificity,
+            pseudoelement,
+            pseudoclass,
+            specificity,
             propName: expandedPropName,
@@ -443,7 +414,7 @@ propValue: expandedPropValue,
         parsedStyleProps[propName + keySuffix] = {
-          pseudoelement: pseudoelement,
-          pseudoclass: pseudoclass,
-          specificity: specificity,
-          propName: propName,
-          propValue: propValue,
+          pseudoelement,
+          pseudoclass,
+          specificity,
+          propName,
+          propValue,
         };
@@ -454,4 +425,4 @@ }
     return {
-      parsedStyleProps: parsedStyleProps,
-      componentProps: componentProps,
+      parsedStyleProps,
+      componentProps,
     };
@@ -466,3 +437,3 @@ };
   ) {
-    var rules = [];
+    const rules = [];
 
@@ -472,9 +443,10 @@ if (props == null || typeof props !== 'object') {
         props: {},
-        rules: rules,
+        rules,
       };
     }
 
-    var _parseStyleProps = parseStyleProps(props, classNamePropKey),
-      parsedStyleProps = _parseStyleProps.parsedStyleProps,
-      componentProps = _parseStyleProps.componentProps;
+    const { parsedStyleProps, componentProps } = parseStyleProps(
+      props,
+      classNamePropKey
+    );
 
@@ -484,18 +456,15 @@ if (!parsedStyleProps) {
         props: componentProps,
-        rules: rules,
+        rules,
       };
     }
 
-    var classNames = props[classNamePropKey] || '';
+    let classNames = props[classNamePropKey] || '';
 
-    propLoop: for (var key in parsedStyleProps) {
-      var mergedProp = parsedStyleProps[key];
-      var pseudoelement = mergedProp.pseudoelement,
-        pseudoclass = mergedProp.pseudoclass,
-        propName = mergedProp.propName,
-        propValue = mergedProp.propValue;
-      var specificity = mergedProp.specificity;
-      var styleValue = void 0;
-      var className = void 0;
-      var hyphenatedPropName = void 0;
+    propLoop: for (const key in parsedStyleProps) {
+      const mergedProp = parsedStyleProps[key];
+      const { pseudoelement, pseudoclass, propName, propValue } = mergedProp;
+      let specificity = mergedProp.specificity;
+      let styleValue;
+      let className;
+      let hyphenatedPropName;
 
@@ -511,23 +480,24 @@ if (mediaQuery) {
       ) {
-        var animationValue = '';
+        let animationValue = '';
 
-        for (var k in propValue) {
-          var obj = propValue[k];
-          var groupStyles = '';
-          var animationResult = parseStyleProps(obj, 'className');
+        for (const k in propValue) {
+          const obj = propValue[k];
+          let groupStyles = '';
+          const animationResult = parseStyleProps(obj, 'className');
 
-          for (var _key in animationResult.parsedStyleProps) {
-            var _animationResult$pars = animationResult.parsedStyleProps[_key],
-              _propName = _animationResult$pars.propName,
-              _propValue = _animationResult$pars.propValue,
-              _pseudoclass = _animationResult$pars.pseudoclass,
-              _pseudoelement = _animationResult$pars.pseudoelement;
+          for (const key in animationResult.parsedStyleProps) {
+            const {
+              propName,
+              propValue,
+              pseudoclass,
+              pseudoelement,
+            } = animationResult.parsedStyleProps[key];
 
-            if (_pseudoclass || _pseudoelement) {
+            if (pseudoclass || pseudoelement) {
               if (process.env.NODE_ENV !== 'production') {
                 console.error(
                   '[jsxstyle] Encountered a pseudo-prefixed prop in animation value: %s%s%s',
-                  _propName,
-                  _pseudoelement ? '::' + _pseudoelement : '',
-                  _pseudoclass ? ':' + _pseudoclass : ''
+                  propName,
+                  pseudoelement ? '::' + pseudoelement : '',
+                  pseudoclass ? ':' + pseudoclass : ''
                 );
@@ -539,7 +509,7 @@ }
 
-            var value = dangerousStyleValue(_propName, _propValue);
+            const value = dangerousStyleValue(propName, propValue);
             if (value === '') continue;
             groupStyles +=
               (groupStyles === '' ? ' ' : '; ') +
-              hyphenateStyleName(_propName) +
+              hyphenateStyleName(propName) +
               ':' +
@@ -568,3 +538,3 @@ value;
 
-        var animationKey = getClassNameForKey(animationValue);
+        const animationKey = getClassNameForKey(animationValue);
         className = animationKey;
@@ -574,3 +544,3 @@ hyphenatedPropName = 'animation-name';
         specificity++;
-        rules.push('@keyframes ' + animationKey + ' { ' + animationValue + '}');
+        rules.push(`@keyframes ${animationKey} { ${animationValue}}`);
       } else {
@@ -585,3 +555,3 @@ styleValue = dangerousStyleValue(propName, propValue);
 
-      var styleRule =
+      const styleRule =
         (mediaQuery ? '@media ' + mediaQuery + ' { ' : '') +
@@ -612,3 +582,3 @@ '.' +
       props: componentProps,
-      rules: rules,
+      rules,
     };
@@ -619,4 +589,4 @@ }
   function stringHash(str) {
-    var hash = 5381;
-    var i = str.length;
+    let hash = 5381;
+    let i = str.length;
 
@@ -633,11 +603,11 @@ while (i) {
 
-  var throwProdError = function throwProdError() {
+  const throwProdError = () => {
     throw new Error();
   };
 
-  var cannotInject = throwProdError;
-  var alreadyInjected = throwProdError;
+  let cannotInject = throwProdError;
+  let alreadyInjected = throwProdError;
 
   if (process.env.NODE_ENV !== 'production') {
-    cannotInject = function cannotInject() {
+    cannotInject = () => {
       throw new Error(
@@ -648,3 +618,3 @@ 'jsxstyle error: `injectOptions` must be called before any jsxstyle components mount.'
 
-    alreadyInjected = function alreadyInjected() {
+    alreadyInjected = () => {
       throw new Error(
@@ -656,3 +626,3 @@ 'jsxstyle error: `injectOptions` should be called once and only once.'
 
-  var getStringHash = function getStringHash(key) {
+  const getStringHash = (key) => {
     return '_' + stringHash(key).toString(36);
@@ -662,15 +632,16 @@ };
   function getStyleCache() {
-    var cache = {};
-    var getClassNameForKey = getStringHash;
-    var onInsertRule;
+    let cache = {};
+    let getClassNameForKey = getStringHash;
+    let onInsertRule;
 
-    var memoizedGetClassNameForKey = function memoizedGetClassNameForKey(key) {
+    const memoizedGetClassNameForKey = (key) => {
       return (cache[key] = cache[key] || getClassNameForKey(key));
     };
 
-    var styleCache = {
-      reset: function reset() {
+    const styleCache = {
+      reset() {
         cache = {};
       },
-      injectOptions: function injectOptions(options) {
+
+      injectOptions(options) {
         if (options) {
@@ -686,9 +657,6 @@ if (options.getClassName) {
       },
-      getComponentProps: function getComponentProps(props, classNamePropKey) {
-        if (classNamePropKey === void 0) {
-          classNamePropKey = 'className';
-        }
 
+      getComponentProps(props, classNamePropKey = 'className') {
         styleCache.injectOptions = cannotInject;
-        var propsAndRules = processProps(
+        const propsAndRules = processProps(
           props,
@@ -698,3 +666,3 @@ classNamePropKey,
         );
-        propsAndRules.rules.forEach(function (rule) {
+        propsAndRules.rules.forEach((rule) => {
           onInsertRule && onInsertRule(rule);
@@ -701,0 +669,0 @@ addStyleToHead(rule);

package.json

 {
   "name": "jsxstyle-utils",
-  "version": "0.0.0-canary-202173223623",
+  "version": "0.0.0-canary-20217545826",
   "description": "Utilities used by jsxstyle and tooling built for jsxstyle",
@@ -5,0 +5,0 @@ "author": "Pete Hunt",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

67958

decreased by-5.64%

Lines of code

1895

decreased by-4.39%

No dependency changes