tailwindcss-safe-area - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

index.js

@@ -1,6 +0,5 @@
-// eslint-disable-next-line unicorn/prefer-module
 const plugin = require('tailwindcss/plugin')
 
-const safeArea = plugin(({addUtilities}) => {
-	const utilities = {
+const safeArea = plugin(({addUtilities, matchUtilities, theme}) => {
+	const baseUtilities = {
 		'.m-safe': {
@@ -71,7 +70,47 @@ marginTop: 'env(safe-area-inset-top)',
 	}
+	addUtilities(baseUtilities)
 
-	addUtilities(utilities)
+	const offsetUtilities = Object.entries(baseUtilities).reduce(
+		(accu, [selector, propertyValue]) => {
+			const className = selector.slice(1)
+			accu[`${className}-offset`] = (x) =>
+				Object.entries(propertyValue).reduce((accu, [property, value]) => {
+					if (Array.isArray(value)) {
+						accu[property] = value.map((v, i) => (i ? i : `calc(${v} + ${x})`))
+					} else {
+						accu[property] = `calc(${value} + ${x})`
+					}
+					return accu
+				}, {})
+			return accu
+		},
+		{}
+	)
+	matchUtilities(offsetUtilities, {
+		values: theme('spacing'),
+		supportsNegativeValues: true,
+	})
+
+	const orUtilities = Object.entries(baseUtilities).reduce(
+		(accu, [selector, propertyValue]) => {
+			const className = selector.slice(1)
+			accu[`${className}-or`] = (x) =>
+				Object.entries(propertyValue).reduce((accu, [property, value]) => {
+					if (Array.isArray(value)) {
+						accu[property] = value.map((v, i) => (i ? i : `max(${v}, ${x})`))
+					} else {
+						accu[property] = `max(${value}, ${x})`
+					}
+					return accu
+				}, {})
+			return accu
+		},
+		{}
+	)
+	matchUtilities(orUtilities, {
+		values: theme('spacing'),
+		supportsNegativeValues: true,
+	})
 })
 
-// eslint-disable-next-line unicorn/prefer-module
 module.exports = safeArea

package.json

 {
 	"name": "tailwindcss-safe-area",
-	"version": "0.2.2",
+	"version": "0.3.0",
 	"description": "Tailwind CSS safe area helpers",
@@ -14,5 +14,7 @@ "license": "MIT",
 	"scripts": {
-		"test": "xo",
-		"release": "np"
+		"release": "npx np@latest"
 	},
+	"engines": {
+		"node": ">=16"
+	},
 	"keywords": [
@@ -27,8 +29,4 @@ "tailwindcss",
 	"devDependencies": {
-		"autoprefixer": "^10.4.1",
-		"np": "^7.6.0",
-		"postcss": "^8.4.5",
 		"prettier": "^2.5.1",
-		"tailwindcss": "^3.0.8",
-		"xo": "^0.47.0"
+		"tailwindcss": "^3.0.8"
 	},
@@ -41,9 +39,3 @@ "prettier": {
 		"useTabs": true
-	},
-	"xo": {
-		"prettier": true,
-		"ignores": [
-			"demo"
-		]
 	}
 }

readme.md

 # tailwindcss-safe-area
 
-Safe area inset utilities extending margin, padding, and height
+Safe area inset utilities extending margin, padding, and height. The plugin provides base, offset, and or utilities for better adaptability across various scenarios.
 
@@ -23,6 +23,14 @@ ## Getting started
 
-This plugin extends the padding and margin utilities.
+This plugin extends the padding and margin utilities with three types:
 
-Use the `*-safe` utilities:
+1. **Base Utilities**: The base safe area inset utilities. These include the initial padding and margin utilities with the safe area in consideration. They can be used where you want the element to respect the safe area insets.
 
+2. **Offset Utilities**: These utilities allow you to extend the base safe area inset by a given offset. This can be particularly useful when you want a bit more spacing than the safe area provides, for example in situations where you have a translucent UI over a background image or video and want to ensure important visual content isn't covered.
+
+3. **Or Utilities**: These utilities let you specify a minimum value to use if it's greater than the safe area inset. This can be used when you have certain layout elements that should respect the safe area but should never be smaller than a certain size.
+
+Here are some examples:
+
+### Base utilities
+
 ```html
@@ -38,2 +46,18 @@ <header class="pt-safe">...</header>
 
+### Offset utilities
+
+The offset utilities can be used by appending `-offset-{value}` to the base utility. This applies an additional margin or padding equal to the specified value. For example, if you want to apply a right padding that is equal to the safe area inset plus 4 units of your spacing scale, you can use:
+
+```html
+<div class="pr-safe-offset-4">...</div>
+```
+
+### Or utilities
+
+The or utilities can be used by appending `-or-{value}` to the base utility. This applies a margin or padding that is the larger of the safe area inset and the specified value. For example, if you want to apply a bottom padding that is the larger of the safe area inset and 8 units of your spacing scale, you can use:
+
+```html
+<div class="pb-safe-or-8">...</div>
+```
+
 ## Provided utilities
@@ -50,6 +74,7 @@
 | `ml-safe, pl-safe`                 | `env(safe-area-inset-left)`                                              |
-| `min-h-screen-safe, h-screen-safe` | `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))` |
-|                                    | `-webkit-fill-available`                                                 |
+| `min-h-screen-safe, h-screen-safe` | `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))`<br>`-webkit-fill-available`                                                 |
+| `*-safe-offset-{value}`            | `calc(env(safe-area-inset-*) + {value})`                                 |
+| `*-safe-or-{value}`                | `max(env(safe-area-inset-*), {value})`                                   |
 
-_Tip: To extend html content behind the safe area, set `viewport-fit=cover`_
+> Tip: To extend html content behind the safe area, set `viewport-fit=cover`
 
@@ -62,1 +87,72 @@ ```html
 ```
+
+<details><summary><h4> Examples with generated output</h4></summary>
+
+#### Base Utility Example
+
+```html
+<header class="pt-safe">...</header>
+```
+
+This applies a top padding to the header that is equal to the safe area inset at the top. The generated CSS would be:
+
+```css
+.pt-safe {
+  padding-top: env(safe-area-inset-top);
+}
+```
+
+#### Offset Utility Example
+
+```html
+<div class="pr-safe-offset-4">...</div>
+```
+
+This applies a right padding to the div that is equal to the safe area inset on the right plus 4 units of your spacing scale. Assuming your spacing scale unit is 8px (default in Tailwind CSS), the generated CSS would be:
+
+```css
+.pr-safe-offset-4 {
+  padding-right: calc(env(safe-area-inset-right) + 1rem);
+}
+```
+
+#### Or Utility Example
+
+```html
+<div class="pb-safe-or-8">...</div>
+```
+
+This applies a bottom padding to the div that is the larger of the safe area inset at the bottom and 8 units of your spacing scale. Assuming your spacing scale unit is 8px (default in Tailwind CSS), the generated CSS would be:
+
+```css
+.pb-safe-or-8 {
+  padding-bottom: max(env(safe-area-inset-bottom), 2rem);
+}
+```
+
+</details>
+
+## Troubleshooting
+
+The `h-screen-safe` and `min-h-screen-safe` utilities may not work as expected on Google Chrome. Add `height: -webkit-fill-available` on parent nodes:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    height: -webkit-fill-available;
+  }
+
+  body {
+    height: -webkit-fill-available;
+  }
+
+  /* If using React, set height on the root div as well */
+  #root {
+    height: -webkit-fill-available;
+  }
+}
+```

Fixed alerts

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

Improved metrics

Total package byte prevSize

10372

increased by76.12%

Dev dependency count

2

decreased by-66.67%

Lines of code

111

increased by52.05%

Number of lines in readme file

155

increased by162.71%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes