styled-breakpoints - npm Package Compare versions

Comparing version 13.1.2 to 13.1.3

package.json

 {
   "name": "styled-breakpoints",
-  "version": "13.1.2",
+  "version": "13.1.3",
+  "license": "MIT",
   "description": "Simple and powerful css breakpoints for styled-components and emotion",
-  "main": "./styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js",
-  "types": "./styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts",
+  "main": "./styled-breakpoints/create-styled-breakpoints-theme/index.js",
+  "types": "./styled-breakpoints/create-styled-breakpoints-theme/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "commit": "cross-env git-cz",
-    "test": "cross-env vitest run",
-    "test:watch": "cross-env vitest",
-    "test:coverage": "cross-env vitest run --coverage",
+    "test:unit": "cross-env vitest run",
+    "test:unit:watch": "cross-env vitest",
+    "test:unit:coverage": "cross-env vitest --coverage run",
+    "test:types": "npx check-dts",
+    "test:bench": "cross-env vitest run bench",
+    "test:size": "cross-env size-limit",
     "lint": "cross-env eslint . --fix.",
-    "pretty": "cross-env prettier './**/**/**.{json,js,ts}' --write",
+    "format": "cross-env prettier './**/**/**.{json,js,ts}' --write",
     "coverage": "cross-env cat ./coverage/lcov.info | coveralls",
-    "size": "cross-env size-limit",
     "semantic-release": "cross-env semantic-release",
@@ -22,3 +25,2 @@ "contributors:add": "cross-env all-contributors add",
   },
-  "license": "MIT",
   "homepage": "https://github.com/mg901/styled-breakpoints#readme",
@@ -75,2 +77,3 @@ "repository": {
     "all-contributors-cli": "^6.17.4",
+    "check-dts": "^0.7.2",
     "commitizen": "^4.2.1",
@@ -98,4 +101,5 @@ "coveralls": "^3.1.0",
     "size-limit": "^11.0.2",
-    "vitest": "^1.0.1"
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.2"
   }
 }

README.md

@@ -71,4 +71,7 @@ <div align="center">
 ```tsx
+import { useTheme } from 'styled-components'; // or '@emotion/react'
+
 const Layout = () => {
-  const isMd = useMediaQuery(useTheme()?.breakpoints.up('md'));
+  // You could use hooks API
+  const isMd = useMediaQuery(useTheme().breakpoints.up('md'));
 
@@ -313,3 +316,3 @@ return <>{isMd && <Box />}</>;
   declare function up(
-    min: string,
+    min: T,
     orientation?: 'portrait' | 'landscape'
@@ -332,3 +335,3 @@ ) => string
 <br>
-<details><summary><strong>Convert to pure css: </strong></summary>
+<details><summary><strong>Will be converted to pure css:  </strong></summary>
 
@@ -373,3 +376,3 @@ ```css
 <br>
-<details><summary><strong>Convert to: </strong></summary>
+<details><summary><strong>Will be converted to pure css: </strong></summary>
 
@@ -419,3 +422,3 @@ ```css
 <br>
-<details><summary><strong>Convert to: </strong></summary>
+<details><summary><strong>Will be converted to pure css: </strong></summary>
 
@@ -461,3 +464,3 @@ ```css
 <br>
-<details><summary><strong>Convert to: </strong></summary>
+<details><summary><strong>Will be converted to pure css: </strong></summary>
 
@@ -464,0 +467,0 @@ ```css

shared/calc-max-width/index.js

@@ -1,1 +0,13 @@
-exports.calcMaxWidth = require('./calc-max-width').calcMaxWidth;
+/**
+ * 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.
+ * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+ * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+ * See https://bugs.webkit.org/show_bug.cgi?id=178261
+ *
+ * @param {string} value - The minimum breakpoint width value.
+ * @returns {string} - The calculated maximum breakpoint width.
+ */
+exports.calcMaxWidth = (value) => `${parseInt(value, 10) - 0.02}px`;

shared/create-breakpoints-api/index.js

@@ -0,5 +1,7 @@
+/* istanbul ignore file */
+
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./create-breakpoints-api.prod');
+  module.exports = require('./index.prod');
 } else {
-  module.exports = require('./create-breakpoints-api.dev');
+  module.exports = require('./index.dev');
 }

shared/create-invariant/index.js

@@ -1,1 +0,28 @@
-exports.createInvariant = require('./create-invariant').createInvariant;
+const DEFAULT_PREFIX = '[prefix]: ';
+const DEFAULT_MESSAGE = 'Invariant failed';
+
+/**
+ * Creates an invariant function that raises an error when a condition is not met.
+ *
+ * @param {string} errorPrefix - The prefix to add to the error message.
+ * @returns {Function} - An invariant function.
+ */
+const createInvariant =
+  (errorPrefix = DEFAULT_PREFIX) =>
+  /**
+   * Throws an error if the provided condition is false.
+   *
+   * @param {boolean} condition - The condition to check.
+   * @param {string} message - The error message to display if the condition is false.
+   */
+  (condition, message = 'Invariant failed') => {
+    if (!condition) {
+      throw new Error(errorPrefix + message);
+    }
+  };
+
+module.exports = {
+  DEFAULT_PREFIX,
+  DEFAULT_MESSAGE,
+  createInvariant,
+};

shared/memoize/index.js

@@ -1,1 +0,18 @@
-exports.memoize = require('./memoize').memoize;
+/**
+ * Memoizes the given function.
+ * @param {Function} fn - The function to be memoized.
+ * @returns {Function} - The memoized function.
+ */
+exports.memoize = (fn) => {
+  const cache = new Map();
+
+  return (...args) => {
+    const key = JSON.stringify(args);
+
+    if (!cache.has(key)) {
+      cache.set(key, fn(...args));
+    }
+
+    return cache.get(key);
+  };
+};

styled-breakpoints/create-styled-breakpoints-theme/index.js

@@ -1,2 +0,104 @@
-exports.createStyledBreakpointsTheme =
-  require('./create-styled-breakpoints-theme').createStyledBreakpointsTheme;
+const { createBreakpointsApi } = require('../../shared/create-breakpoints-api');
+const { memoize } = require('../../shared/memoize');
+const { withOrientation } = require('../with-orientation');
+
+const DEFAULT_OPTIONS = {
+  errorPrefix: '[styled-breakpoints]: ',
+  breakpoints: {
+    xs: '0px',
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
+    xxl: '1400px',
+  },
+};
+
+/**
+ * Creates a styled breakpoints theme.
+ *
+ * @param {Object} options - The options for creating the theme.
+ * @param {Object} options.breakpoints - An object defining breakpoints.
+ * @param {String} options.errorPrefix - An optional error prefix.
+ * @returns {Object} - A theme object with breakpoint functions.
+ */
+exports.createStyledBreakpointsTheme = ({
+  breakpoints,
+  errorPrefix,
+} = DEFAULT_OPTIONS) => {
+  const api = createBreakpointsApi({
+    breakpoints,
+    errorPrefix,
+  });
+
+  return {
+    breakpoints: {
+      up: memoize(up),
+      down: memoize(down),
+      between: memoize(between),
+      only: memoize(only),
+    },
+  };
+
+  // Creates a media query for a minimum width breakpoint.
+  function up(min, orientation) {
+    return withOrientationOrNot(
+      withMedia(withMinWidth(api.up(min))),
+      orientation
+    );
+  }
+
+  // Creates a media query for a maximum width breakpoint.
+  function down(max, orientation) {
+    return withOrientationOrNot(
+      withMedia(withMaxWidth(api.down(max))),
+      orientation
+    );
+  }
+
+  // Creates a media query for a range between two breakpoints.
+  function between(min, max, orientation) {
+    return withOrientationOrNot(
+      withRangeMedia(api.between(min, max)),
+      orientation
+    );
+  }
+
+  // Creates a media query for a specific breakpoint or range.
+  function only(key, orientation) {
+    const isLastKey = key === api.keys.at(-1);
+
+    const mediaQuery = isLastKey
+      ? withMedia(withMinWidth(api.up(key)))
+      : withRangeMedia(api.between(key, api.getNextKey(key)));
+
+    return withOrientationOrNot(mediaQuery, orientation);
+  }
+
+  // Applies orientation if provided or returns the media query.
+  function withOrientationOrNot(mediaQuery, orientation) {
+    return orientation
+      ? withOrientation({
+          mediaQuery,
+          orientation,
+          invariant: api.invariant && api.invariant,
+        })
+      : mediaQuery;
+  }
+};
+
+function withMinWidth(value) {
+  return `(min-width: ${value})`;
+}
+
+function withMedia(value) {
+  return `@media ${value}`;
+}
+
+function withMaxWidth(value) {
+  return `(max-width: ${value})`;
+}
+
+function withRangeMedia({ min, max }) {
+  return `${withMedia(withMinWidth(min))} and ${withMaxWidth(max)}`;
+}

styled-breakpoints/with-orientation/index.js

@@ -0,5 +1,7 @@
+/* istanbul ignore file */
+
 if (process.env.NODE_ENV === 'production') {
-  exports.withOrientation = require('./with-orientation.prod').withOrientation;
+  module.exports = require('./index.prod');
 } else {
-  exports.withOrientation = require('./with-orientation.dev').withOrientation;
+  module.exports = require('./index.dev');
 }

use-media-query/index.js

@@ -1,1 +0,57 @@
-exports.useMediaQuery = require('./use-media-query').useMediaQuery;
+const { useState, useLayoutEffect, useEffect } = require('react');
+
+/* istanbul ignore next */
+const isBrowser = typeof window !== 'undefined';
+/* istanbul ignore next */
+const useEnhancedEffect = isBrowser ? useLayoutEffect : useEffect;
+
+/**
+ * Custom hook for handling media queries.
+ * @param {string} query - The media query to match.
+ * @returns {boolean} - `true` if the media query matches, otherwise `false`.
+ */
+exports.useMediaQuery = function useMediaQuery(query) {
+  const [isMatch, setIsMatch] = useState(isBrowser && getMatches(query));
+
+  useEnhancedEffect(() => {
+    /* istanbul ignore next */
+    if (!isBrowser) return;
+
+    let mounted = true;
+    const mediaQueryList = window.matchMedia(query.replace(/^@media\s*/, ''));
+
+    const handleChange = () => {
+      /* istanbul ignore next */
+      if (!mounted) return;
+
+      /* istanbul ignore next */
+      setIsMatch(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);
+
+    setIsMatch(mediaQueryList.matches);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      mounted = false;
+
+      if (mediaQueryList.addListener) {
+        mediaQueryList.removeListener(handleChange);
+      } else {
+        mediaQueryList.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+
+  return isMatch;
+};
+
+function getMatches(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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Improved metrics

Number of lines in readme file

607

increased by0.5%

Worsened metrics

Total package byte prevSize

38036

decreased by-2.4%

Dev dependency count

41

increased by5.13%

Number of package files

20

decreased by-23.08%

Lines of code

436

decreased by-5.01%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes