styled-breakpoints - npm Package Compare versions

Comparing version 12.1.1 to 12.1.2

package.json

 {
   "name": "styled-breakpoints",
-  "version": "12.1.1",
+  "version": "12.1.2",
   "description": "Simple and powerful css breakpoints for styled-components and emotion",
@@ -102,4 +102,4 @@ "main": "index.js",
     "size-limit": "^8.0.0",
-    "styled-components": "^5.2.1"
+    "styled-components": "^6.0.1"
   }
 }

README.md

@@ -112,6 +112,6 @@ <div align="center">
 
+- core concepts
+- available breakpoints
 - [quick start](#quick-start)
-- [migration from v11](#migration-from-v11)
-- [core concepts](#core-concepts)
-- [available breakpoints](#available-breakpoints)
+- migration from v11
 - [media queries](#media-queries)
@@ -124,7 +124,36 @@ - [min-width](#min-width)
 - [customization](#customization)
-  - [strict typed breakpoints](#strict-typed-breakpoints)
-  - [merge with another theme](#merge-with-another-theme)
+  - strict typed breakpoints
+  - merge with another theme
 
 <br>
 
+<details><summary><h2>Core concepts</h2></summary>
+
+- **Breakpoints act as the fundamental elements of responsive design**. They enable you to control when your layout can adapt to a specific viewport or device size.
+
+- **Utilize media queries to structure your CSS based on breakpoints**. Media queries are CSS features that allow you to selectively apply styles depending on a defined set of browser and operating system parameters. The most commonly used media query property is <code>min-width</code>.
+
+- **The objective is mobile-first, responsive design**. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience.
+
+</details>
+
+<details><summary><h2>Available breakpoints</h2></summary>
+
+Styled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be [customized](#customization).
+
+Each breakpoint has been carefully selected to accommodate containers with widths that are multiples of 12. The breakpoints also represent a subset of common device sizes and viewport dimensions, although they do not specifically target every use case or device. Instead, they provide a robust and consistent foundation for building designs that cater to nearly any device.
+
+```tsx
+const breakpoints = {
+  xs: '0px',
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  xl: '1200px',
+  xxl: '1400px',
+};
+```
+
+</details>
+
 ## Quick start
@@ -237,3 +266,3 @@
 
-## Migration from v11
+<details><summary><h2>🏎️&nbsp; Migration from <a href="https://github.com/mg901/styled-breakpoints/tree/v11.2.3" target="_blank">v11.2.3</a></h2></summary>
 
@@ -302,33 +331,4 @@ ### Theme
 
-<br>
+</details>
 
-## Core concepts
-
-- **Breakpoints act as the fundamental elements of responsive design**. They enable you to control when your layout can adapt to a specific viewport or device size.
-
-- **Utilize media queries to structure your CSS based on breakpoints**. Media queries are CSS features that allow you to selectively apply styles depending on a defined set of browser and operating system parameters. The most commonly used media query property is <code>min-width</code>.
-
-- **The objective is mobile-first, responsive design**. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience.
-
-<br>
-
-## Available breakpoints
-
-Styled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be [customized](#customization).
-
-Each breakpoint has been carefully selected to accommodate containers with widths that are multiples of 12. The breakpoints also represent a subset of common device sizes and viewport dimensions, although they do not specifically target every use case or device. Instead, they provide a robust and consistent foundation for building designs that cater to nearly any device.
-
-```tsx
-const breakpoints = {
-  xs: '0px',
-  sm: '576px',
-  md: '768px',
-  lg: '992px',
-  xl: '1200px',
-  xxl: '1400px',
-};
-```
-
-<br>
-
 ## Media queries
@@ -520,3 +520,3 @@
 
-### Strict Typed Breakpoints
+  <details><summary><h3> Strict Typed Breakpoints</h3></summary>
 
@@ -557,3 +557,3 @@ `app.tsx`
 
-<details open><summary><h4>💅 Styled Components</h4></summary>
+  <details open><summary><h4>💅 Styled Components</h4></summary>
 
@@ -571,5 +571,5 @@ `styled.d.ts`
 
-</details>
+  </details>
 
-<details><summary><h4><g-emoji class="g-emoji" alias="woman_singer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f469-1f3a4.png">👩&zwj;🎤</g-emoji> Emotion</h4></summary>
+  <details><summary><h4><g-emoji class="g-emoji" alias="woman_singer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f469-1f3a4.png">👩&zwj;🎤</g-emoji> Emotion</h4></summary>
 
@@ -587,5 +587,6 @@ `emotion.d.ts`
 
+  </details>
 </details>
 
-### Merge with another theme
+<details><summary><h3>Merge with another theme</h3></summary>
 
@@ -619,5 +620,5 @@ `app.tsx`
 
-<details open><summary><h4>💅 Styled Components</h4></summary>
+  <details open><summary><h4>💅 Styled Components</h4></summary>
 
-Create file `styled.d.ts`
+`styled.d.ts`
 
@@ -636,5 +637,5 @@ ```ts
 
-</details>
+  </details>
 
-<details><summary><h4><g-emoji class="g-emoji" alias="woman_singer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f469-1f3a4.png">👩&zwj;🎤</g-emoji> Emotion</h4></summary>
+  <details><summary><h4><g-emoji class="g-emoji" alias="woman_singer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f469-1f3a4.png">👩&zwj;🎤</g-emoji> Emotion</h4></summary>
 
@@ -655,2 +656,4 @@ `emotion.d.ts`
 
+  </details>
+
 </details>
@@ -657,0 +660,0 @@

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

@@ -1,30 +0,29 @@
-declare module 'styled-breakpoints' {
-  type Orientation = 'portrait' | 'landscape';
+export type Orientation = 'portrait' | 'landscape';
 
-  type BreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-  type Min = BreakpointKeys;
-  type Max = Exclude<BreakpointKeys, 'xs'>;
+type BreakpointKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type Min = BreakpointKeys;
 
-  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;
+type Max = Exclude<BreakpointKeys, 'xs'>;
 
-  interface Options {
-    breakpoints?: Record<string, `${number}px`>;
-    errorPrefix?: string;
-  }
+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;
 
-  export interface MediaQueries<T = Min, U = Max> {
-    up: (min: T, orientation?: Orientation) => string;
-    down: (max: U, orientation?: Orientation) => string;
-    between: (min: T, max: U, orientation?: Orientation) => string;
-    only: (key: T, orientation?: Orientation) => string;
-  }
+interface Options {
+  breakpoints?: Record<string, `${number}px`>;
+  errorPrefix?: string;
+}
 
-  export interface StyledBreakpointsTheme<T = MediaQueries> {
-    breakpoints: T;
-  }
+export interface MediaQueries<T = Min, U = Max> {
+  up: (min: T, orientation?: Orientation) => string;
+  down: (max: U, orientation?: Orientation) => string;
+  between: (min: T, max: U, orientation?: Orientation) => string;
+  only: (key: T, orientation?: Orientation) => string;
+}
 
-  export function createStyledBreakpointsTheme(options?: Options): any;
+export interface StyledBreakpointsTheme<T = MediaQueries> {
+  breakpoints: T;
 }
+
+export function createStyledBreakpointsTheme(options?: Options): any;

styled-breakpoints/index.d.ts

@@ -1,1 +0,5 @@
-export * from './create-styled-breakpoints-theme/create-styled-breakpoints-theme';
+export {
+  createStyledBreakpointsTheme,
+  StyledBreakpointsTheme,
+  MediaQueries,
+} from './create-styled-breakpoints-theme/create-styled-breakpoints-theme';

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

Lines of code

337

increased by0.6%

Number of lines in readme file

703

increased by0.43%

Worsened metrics

Total package byte prevSize

39393

decreased by-29.78%

Number of package files

29

decreased by-3.33%

No dependency changes