styled-breakpoints - npm Package Compare versions

Comparing version 12.1.2 to 12.1.3

package.json

 {
   "name": "styled-breakpoints",
-  "version": "12.1.2",
+  "version": "12.1.3",
   "description": "Simple and powerful css breakpoints for styled-components and emotion",
@@ -53,9 +53,6 @@ "main": "index.js",
   "peerDependencies": {
-    "react": "^18.x.x"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0",
+    "styled-components": ">= 5.0.0"
   },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
   "devDependencies": {
@@ -62,0 +59,0 @@ "@commitlint/cli": "^17.0.0",

README.md

@@ -185,3 +185,3 @@ <div align="center">
 ```tsx
-import styled { ThemeProvider } from 'styled-components';
+import styled { DefaultTheme, ThemeProvider } from 'styled-components';
 import { createStyledBreakpointsTheme, StyledBreakpointsTheme } from 'styled-breakpoints';
@@ -196,5 +196,4 @@
 `
+const theme: DefaultTheme = createStyledBreakpointsTheme();
 
-const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme;
-
 const App = () => (
@@ -237,10 +236,6 @@ <ThemeProvider theme={theme}>
 ```tsx
-import styled from '@emotion/styled';
-import { ThemeProvider } from '@emotion/react';
+import styled, from '@emotion/styled';
+import { Theme, ThemeProvider } from '@emotion/react';
+import { createStyledBreakpointsTheme } from 'styled-breakpoints';
 
-import {
-  createStyledBreakpointsTheme,
-  StyledBreakpointsTheme,
-} from 'styled-breakpoints';
-
 const Box = styled.div`
@@ -254,3 +249,3 @@ display: none;
 
-const theme = createStyledBreakpointsTheme() as StyledBreakpointsTheme;
+const theme: Theme = createStyledBreakpointsTheme();
 
@@ -520,3 +515,3 @@ const App = () => (
 
-  <details><summary><h3> Strict Typed Breakpoints</h3></summary>
+  <details><summary><h3> ⚙️ Strict Typed Breakpoints</h3></summary>
 
@@ -526,3 +521,3 @@ `app.tsx`
 ```tsx
-import styled from 'styled-components'; // or from '@emotion/react'
+import styled, { DefaultTheme } from 'styled-components'; // or from '@emotion/react'
 import { createStyledBreakpointsTheme, MediaQueries } from 'styled-breakpoints';
@@ -538,14 +533,5 @@
 
-type Min = keyof typeof breakpoints;
-
-// For max values remove the first key.
-type Max = Exclude<keyof typeof breakpoints, 'small'>;
-
-export interface StyledBreakpointsTheme {
-  breakpoints: MediaQueries<Min, Max>;
-}
-
-const theme = createStyledBreakpointsTheme({
+const theme: DefaultTheme = createStyledBreakpointsTheme({
   breakpoints,
-}) as StyledBreakpointsTheme;
+});
 
@@ -565,6 +551,14 @@ const App = () => (
 import 'styled-components';
-import { StyledBreakpointsTheme } from './app';
+import { MediaQueries } from 'styled-breakpoints';
+import { breakpoints } from './app';
 
+type Min = keyof typeof breakpoints;
+
+// For max values remove the first key.
+type Max = Exclude<keyof typeof breakpoints, 'small'>;
+
 declare module 'styled-components' {
-  export interface DefaultTheme extends StyledBreakpointsTheme {}
+  export interface DefaultTheme {
+    breakpoints: MediaQueries<Min, Max>;
+  }
 }
@@ -581,6 +575,14 @@ ```
 import '@emotion/react';
-import { StyledBreakpointsTheme } from './app';
+import { MediaQueries } from 'styled-breakpoints';
+import { breakpoints } from './app';
 
+type Min = keyof typeof breakpoints;
+
+// For max values remove the first key.
+type Max = Exclude<keyof typeof breakpoints, 'small'>;
+
 declare module '@emotion/react' {
-  export interface Theme extends StyledBreakpointsTheme {}
+  export interface Theme extends {
+    breakpoints: MediaQueries<Min, Max>;
+  }
 }
@@ -592,3 +594,3 @@ ```
 
-<details><summary><h3>Merge with another theme</h3></summary>
+<details><summary><h3>🎨 Merge with another theme</h3></summary>
 
@@ -598,4 +600,4 @@ `app.tsx`
 ```tsx
-import { ThemeProvider } from 'styled-components'; // or from '@emotion/react';
-import { createStyledBreakpointsTheme, StyledBreakpointsTheme  } from 'styled-breakpoints';
+import { DefaultTheme, ThemeProvider } from 'styled-components'; // or from '@emotion/react';
+import { createStyledBreakpointsTheme } from 'styled-breakpoints';
 
@@ -611,5 +613,5 @@ export const primaryTheme = {
 
-const const theme = {
+const const theme: DefaultTheme = {
   ...primaryTheme,
-  ...createStyledBreakpointsTheme() as StyledBreakpointsTheme,
+  ...createStyledBreakpointsTheme(),
 }
@@ -616,0 +618,0 @@

styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.d.ts

@@ -8,7 +8,2 @@ export type Orientation = 'portrait' | 'landscape';
 
-type Up = (min: Min, orientation?: Orientation) => string;
-type Down = (max: Max, orientation?: Orientation) => string;
-type Between = (min: Min, max: Max, orientation?: Orientation) => string;
-type Only = (key: BreakpointKeys, orientation?: Orientation) => string;
-
 interface Options {
@@ -15,0 +10,0 @@ breakpoints?: Record<string, `${number}px`>;

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

@@ -65,10 +65,10 @@ const { createBreakpointsApi } = require('../../breakpoints');
 
-  function withOrientationOrNot(orientation, result) {
+  function withOrientationOrNot(orientation, mediaQuery) {
     return orientation
       ? withOrientation({
-          mediaQuery: result,
+          mediaQuery,
           orientation,
           invariant: api.invariant && api.invariant,
         })
-      : result;
+      : mediaQuery;
   }
@@ -75,0 +75,0 @@

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

Improved metrics

Number of lines in readme file

705

increased by0.28%

Worsened metrics

Total package byte prevSize

39237

decreased by-0.4%

Dependency count

3

increased by200%

Lines of code

333

decreased by-1.19%

No dependency changes