styled-breakpoints - npm Package Compare versions

Comparing version 14.1.3 to 14.1.4

package.json

 {
   "name": "styled-breakpoints",
-  "version": "14.1.3",
+  "version": "14.1.4",
   "license": "MIT",
@@ -63,7 +63,7 @@ "description": "Simple and powerful css breakpoints for styled-components and emotion",
     "@semantic-release/changelog": "^6.0.0",
-    "@semantic-release/commit-analyzer": "^12.0.0",
+    "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.0",
     "@semantic-release/github": "^10.0.2",
     "@semantic-release/npm": "^12.0.0",
-    "@semantic-release/release-notes-generator": "^13.0.0",
+    "@semantic-release/release-notes-generator": "^14.0.0",
     "@size-limit/file": "^11.0.2",
@@ -73,7 +73,7 @@ "@size-limit/webpack": "^11.0.2",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^16.0.0",
     "@vitest/coverage-istanbul": "^1.0.1",
     "@vitest/coverage-v8": "^1.0.1",
     "all-contributors-cli": "^6.17.4",
-    "check-dts": "^0.7.2",
+    "check-dts": "^0.8.0",
     "commitizen": "^4.2.1",
@@ -80,0 +80,0 @@ "coveralls": "^3.1.0",

README.md

@@ -68,4 +68,4 @@ <div align="center">
 const Layout = () => {
-  const { breakpoints } = useTheme();
-  const isMd = useMediaQuery(breakpoints.up('md'));
+  const { up } = useTheme().breakpoints;
+  const isMd = useMediaQuery(up('md'));
 
@@ -158,2 +158,13 @@ return <>{isMd && <Box />}</>;
 
+#### 🚩 File Structure
+
+```js
+ theme/
+ ├── index.ts
+ └── styled.d.ts // or emotion.d.ts
+ app.tsx
+```
+
+<br>
+
 #### 🚩 Available breakpoints
@@ -180,3 +191,3 @@
 
-`theme/config.ts`
+`theme/index.ts`
 
@@ -196,3 +207,3 @@ ```tsx
 
-`theme/config.ts`
+`theme/index.ts`
 
@@ -217,3 +228,3 @@ ```tsx
 
-`theme/config.ts`
+`theme/index.ts`
 
@@ -259,8 +270,8 @@ ```tsx
 import 'styled-components';
-import { theme } from './theme/config';
+import { theme } from './index';
 
-type MyTheme = typeof theme;
+type ThemeConfig = typeof theme;
 
 declare module 'styled-components' {
-  export interface DefaultTheme extends MyTheme {}
+  export interface DefaultTheme extends ThemeConfig {}
 }
@@ -294,8 +305,8 @@ ```
 import '@emotion/react';
-import { theme } from './theme/config';
+import { theme } from './index';
 
-type MyTheme = typeof theme;
+type ThemeConfig = typeof theme;
 
 declare module '@emotion/react' {
-  export interface Theme extends MyTheme {}
+  export interface Theme extends ThemeConfig {}
 }
@@ -307,3 +318,3 @@ ```
 
-### 🚀 Integration to App
+### 🚀 Integration to Your App
 
@@ -316,3 +327,3 @@ <br>
 import styled { ThemeProvider } from 'styled-components'; // or '@emotion/react'
-import { theme } from './theme/config';
+import { theme } from './theme';
 
@@ -329,3 +340,3 @@ const Box = styled.div`
   <ThemeProvider theme={theme}>
-    <Box>🥳</Box>
+    <Box />
   </ThemeProvider>
@@ -335,4 +346,2 @@ );
 
-</details>
-
 <br>
@@ -346,17 +355,4 @@
 
-### Min-width - `up`
+### 👉🏻 Min-width - `up`
 
-<br>
-
-<details><summary><strong>Type declaration</strong></summary>
-
-```ts
-  declare function up(
-    min: T,
-    orientation?: 'portrait' | 'landscape'
-  ) => string
-```
-
-</details>
-
 ```tsx
@@ -373,3 +369,3 @@ const Box = styled.div`
 <br>
-<strong>Will be converted to pure css:  </strong>
+<strong>Will convert to vanilla css:  </strong>
 
@@ -382,7 +378,6 @@ ```css
 
-</details>
 <hr/>
 <br>
 
-### Max-width - `down`
+### 👉🏻 Max-width - `down`
 
@@ -393,13 +388,2 @@ We occasionally use media queries that go in the other direction (the given screen size or smaller):
 
-<details><summary><strong>Type declaration</strong></summary>
-
-```ts
-  declare function down(
-    max: string,
-    orientation?: 'portrait' | 'landscape'
-  ) => string
-```
-
-</details>
-
 ```tsx
@@ -416,3 +400,3 @@ const Box = styled.div`
 <br>
-<strong>Will be converted to pure css: </strong>
+<strong>Will convert to vanilla css: </strong>
 
@@ -425,4 +409,2 @@ ```css
 
-</details>
-
 <br>
@@ -435,3 +417,3 @@
 
-### Single breakpoint - `only`
+### 👉🏻 Single breakpoint - `only`
 
@@ -442,13 +424,2 @@ There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
 
-<details><summary><strong>Type declaration</strong></summary>
-
-```ts
-  declare function only(
-    name: string,
-    orientation?: 'portrait' | 'landscape'
-  ) => string
-```
-
-</details>
-
 ```tsx
@@ -465,3 +436,3 @@ const Box = styled.div`
 <br>
-<strong>Will be converted to pure css: </strong>
+<strong>Will convert to vanilla css: </strong>
 
@@ -474,7 +445,6 @@ ```css
 
-</details>
 <hr/>
 <br>
 
-### Breakpoints range - `between`
+### 👉🏻 Breakpoints range - `between`
 
@@ -485,14 +455,2 @@ Similarly, media queries may span multiple breakpoint widths.
 
-<details><summary><strong>Type declaration</strong></summary>
-
-```ts
- declare function between(
-    min: string,
-    max: string,
-    orientation?: 'portrait' | 'landscape'
-  ) => string
-```
-
-</details>
-
 ```tsx
@@ -509,3 +467,3 @@ const Box = styled.div`
 <br>
-<strong>Will be converted to pure css: </strong>
+<strong>Will convert to vanilla css: </strong>
 
@@ -518,7 +476,6 @@ ```css
 
-</details>
 <hr/>
 <br>
 
-## `useMediaQuery` hook
+## 👉🏻 `useMediaQuery` hook
 
@@ -547,4 +504,4 @@ features:
 const SomeComponent = () => {
-  const { breakpoints } = useTheme();
-  const isMd = useMediaQuery(breakpoints.only('md'));
+  const { only } = useTheme().breakpoints;
+  const isMd = useMediaQuery(only('md'));
 
@@ -562,3 +519,3 @@ return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;
 
-Copyright (c) 2018-2019 [Maxim Alyoshin](https://github.com/mg901).
+Copyright (c) 2018-2024 [Maxim Alyoshin](https://github.com/mg901).
 
@@ -598,2 +555,3 @@ This project is licensed under the MIT License - see the [LICENSE](https://github.com/mg901/styled-breakpoints/blob/master/LICENCE) file for details.
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/daviddelusenet"><img src="https://avatars.githubusercontent.com/u/1398418?v=4?s=100" width="100px;" alt="David de Lusenet"/><br /><sub><b>David de Lusenet</b></sub></a><br /><a href="https://github.com/mg901/styled-breakpoints/issues?q=author%3Adaviddelusenet" title="Bug reports">🐛</a> <a href="#ideas-daviddelusenet" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AdlerJS"><img src="https://avatars.githubusercontent.com/u/82471930?v=4?s=100" width="100px;" alt="Dan Adler"/><br /><sub><b>Dan Adler</b></sub></a><br /><a href="https://github.com/mg901/styled-breakpoints/issues?q=author%3AAdlerJS" title="Bug reports">🐛</a></td>
     </tr>
@@ -600,0 +558,0 @@ </tbody>

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

36047

decreased by-0.92%

Number of lines in readme file

538

decreased by-7.24%

No dependency changes