styled-breakpoints - npm Package Compare versions

Comparing version 13.1.4 to 14.0.0

package.json

 {
   "name": "styled-breakpoints",
-  "version": "13.1.4",
+  "version": "14.0.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Simple and powerful css breakpoints for styled-components and emotion",

shared/calc-max-width/index.js

 /**
  * Calculates the maximum breakpoint width based on the provided minimum width value.
  *
- * The maximum value is calculated as the minimum of the next one less 0.02px
- * to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+ * The maximum value is reduced by 0.02px to work around the limitations of
+ * `min-` and `max-` prefixes and viewports with fractional widths.
  * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
@@ -7,0 +7,0 @@ * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.

use-media-query/index.js

 const { useState, useLayoutEffect, useEffect } = require('react');
 
+exports.useMediaQuery = useMediaQuery;
+
 /* istanbul ignore next */
-const isBrowser = typeof window !== 'undefined';
+const IS_BROWSER = typeof window !== 'undefined';
 /* istanbul ignore next */
-const useEnhancedEffect = isBrowser ? useLayoutEffect : useEffect;
+const useEnhancedEffect = IS_BROWSER ? useLayoutEffect : useEffect;
 
+exports.useMediaQuery = useMediaQuery;
+
 /**
@@ -13,9 +17,6 @@ * Custom hook for handling media queries.
  */
-exports.useMediaQuery = function useMediaQuery(query) {
-  const [isMatch, setIsMatch] = useState(isBrowser && getMatches(query));
+function useMediaQuery(query) {
+  const [state, setState] = useState(IS_BROWSER && getInitialState(query));
 
   useEnhancedEffect(() => {
-    /* istanbul ignore next */
-    if (!isBrowser) return;
-
     let mounted = true;
@@ -29,31 +30,19 @@ const mediaQueryList = window.matchMedia(query.replace(/^@media\s*/, ''));
       /* istanbul ignore next */
-      setIsMatch(mediaQueryList.matches);
+      setState(mediaQueryList.matches);
     };
 
-    // Safari < 14 can't use addEventListener on a MediaQueryList
-    // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-    const listenerMethod = mediaQueryList.addListener
-      ? 'addListener'
-      : 'addEventListener';
-    mediaQueryList[listenerMethod]('change', handleChange);
+    setState(mediaQueryList.matches);
 
-    setIsMatch(mediaQueryList.matches);
-
-    // eslint-disable-next-line consistent-return
     return () => {
       mounted = false;
 
-      if (mediaQueryList.addListener) {
-        mediaQueryList.removeListener(handleChange);
-      } else {
-        mediaQueryList.removeEventListener('change', handleChange);
-      }
+      mediaQueryList.removeEventListener('change', handleChange);
     };
   }, [query]);
 
-  return isMatch;
-};
+  return state;
+}
 
-function getMatches(query) {
+function getInitialState(query) {
   return window.matchMedia(query).matches;
 }

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

37175

decreased by-1.41%

Lines of code

411

decreased by-2.61%

No dependency changes