@niibase/uniwind 1.1.4 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Uniwind
3
+ Copyright (c) 2026 Uniwind
4
4
  Permission is hereby granted, free of charge, to any person obtaining a copy
5
5
  of this software and associated documentation files (the "Software"), to deal
6
6
  in the Software without restriction, including without limitation the rights
@@ -13,19 +13,6 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
13
13
  constructor() {
14
14
  super();
15
15
  }
16
- onThemeChange() {
17
- if (typeof document === "undefined") {
18
- return;
19
- }
20
- document.documentElement.removeAttribute("style");
21
- const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
22
- if (!runtimeCSSVariables) {
23
- return;
24
- }
25
- Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
26
- this.applyCSSVariable(varName, varValue);
27
- });
28
- }
29
16
  updateCSSVariables(theme, variables) {
30
17
  Object.entries(variables).forEach(([varName, varValue]) => {
31
18
  if (!varName.startsWith("--") && __DEV__) {
@@ -41,6 +28,19 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
41
28
  _listener.UniwindListener.notify([_types.StyleDependency.Variables]);
42
29
  }
43
30
  }
31
+ onThemeChange() {
32
+ if (typeof document === "undefined") {
33
+ return;
34
+ }
35
+ document.documentElement.removeAttribute("style");
36
+ const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
37
+ if (!runtimeCSSVariables) {
38
+ return;
39
+ }
40
+ Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
41
+ this.applyCSSVariable(varName, varValue);
42
+ });
43
+ }
44
44
  applyCSSVariable(varName, varValue) {
45
45
  if (typeof document === "undefined") {
46
46
  return;
@@ -14,14 +14,6 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
14
14
  constructor() {
15
15
  super();
16
16
  }
17
- __reinit(generateStyleSheetCallback, themes) {
18
- super.__reinit(generateStyleSheetCallback, themes);
19
- _native.UniwindStore.reinit(generateStyleSheetCallback);
20
- }
21
- onThemeChange() {
22
- _native.UniwindStore.runtime.currentThemeName = this.currentTheme;
23
- _native.UniwindStore.reinit();
24
- }
25
17
  updateCSSVariables(theme, variables) {
26
18
  Object.entries(variables).forEach(([varName, varValue]) => {
27
19
  if (!varName.startsWith("--") && __DEV__) {
@@ -63,5 +55,13 @@ class UniwindConfigBuilder extends _config.UniwindConfigBuilder {
63
55
  _native.UniwindStore.runtime.insets.right = insets.right ?? 0;
64
56
  _listener.UniwindListener.notify([_types.StyleDependency.Insets]);
65
57
  }
58
+ __reinit(generateStyleSheetCallback, themes) {
59
+ super.__reinit(generateStyleSheetCallback, themes);
60
+ _native.UniwindStore.reinit(generateStyleSheetCallback);
61
+ }
62
+ onThemeChange() {
63
+ _native.UniwindStore.runtime.currentThemeName = this.currentTheme;
64
+ _native.UniwindStore.reinit();
65
+ }
66
66
  }
67
67
  const Uniwind = exports.Uniwind = new UniwindConfigBuilder();
@@ -4,61 +4,80 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.generateCSSForInsets = void 0;
7
- const types = ["m", "p"];
8
- const sides = ["", "x", "y", "t", "b", "l", "r"];
7
+ const types = ["margin", "padding", "inset"];
8
+ const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
9
+ const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
9
10
  const spacing = "--spacing(--value(integer))";
10
11
  const length = "--value([length])";
11
12
  const generateCSSForInsets = () => {
12
13
  let css = `@utility h-screen-safe {
13
14
  height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
14
15
  }
16
+
15
17
  `;
16
18
  const getInsetsForSide = side => {
17
19
  switch (side) {
18
- case "t":
20
+ case "top":
19
21
  return ["top"];
20
- case "b":
22
+ case "bottom":
21
23
  return ["bottom"];
22
- case "l":
24
+ case "left":
23
25
  return ["left"];
24
- case "r":
26
+ case "right":
25
27
  return ["right"];
26
28
  case "x":
27
29
  return ["left", "right"];
28
30
  case "y":
29
31
  return ["top", "bottom"];
30
- default:
32
+ case "inset":
31
33
  return ["top", "bottom", "left", "right"];
34
+ default:
35
+ side;
36
+ return [];
37
+ }
38
+ };
39
+ const getUtilityName = (typeName, side, safeAreaType) => {
40
+ if (typeName === "inset") {
41
+ return `${side}-${safeAreaType}`;
42
+ }
43
+ const sideSuffix = side === "inset" ? "" : side.at(0);
44
+ return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
45
+ };
46
+ const getStyleProperty = (typeName, inset) => {
47
+ if (typeName === "inset") {
48
+ return inset;
49
+ }
50
+ return `${typeName}-${inset}`;
51
+ };
52
+ const getStylesForSafeAreaType = (safeAreaType, styles) => {
53
+ switch (safeAreaType) {
54
+ case "safe":
55
+ return styles;
56
+ case "safe-or-*":
57
+ return styles.flatMap(style => {
58
+ const styleWithoutSemicolon = style.replace(";", "");
59
+ return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
60
+ });
61
+ case "safe-offset-*":
62
+ return styles.flatMap(style => {
63
+ const styleWithoutSemicolon = style.replace(";", "");
64
+ return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
65
+ });
66
+ default:
67
+ safeAreaType;
68
+ return [];
32
69
  }
33
70
  };
34
71
  types.forEach(type => {
35
72
  sides.forEach(side => {
36
- const styleName = type === "m" ? "margin" : "padding";
37
73
  const insets = getInsetsForSide(side);
38
- const styles = insets.map(inset => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
39
- const safeStyles = styles.flatMap(style => {
40
- const styleWithoutSemicolon = style.replace(";", "");
41
- return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
42
- });
43
- const safeOffsetStyles = styles.flatMap(style => {
44
- const styleWithoutSemicolon = style.replace(";", "");
45
- return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
74
+ const styles = insets.map(inset => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
75
+ safeAreaTypes.forEach(safeAreaType => {
76
+ const utilityName = getUtilityName(type, side, safeAreaType);
77
+ css += [`@utility ${utilityName} {`, ...getStylesForSafeAreaType(safeAreaType, styles).map(style => ` ${style}`), "}", "", ""].join("\n");
46
78
  });
47
- css += `
48
- @utility ${type}${side}-safe {
49
- ${styles.join("\n ")}
50
- }
51
-
52
- @utility ${type}${side}-safe-or-* {
53
- ${safeStyles.join("\n ")}
54
- }
55
-
56
- @utility ${type}${side}-safe-offset-* {
57
- ${safeOffsetStyles.join("\n ")}
58
- }
59
- `;
60
79
  });
61
80
  });
62
- return css.replaceAll(" ", "").trim() + "\n";
81
+ return css.slice(0, -1);
63
82
  };
64
83
  exports.generateCSSForInsets = generateCSSForInsets;
@@ -4,7 +4,7 @@ const FileStoreBase = require('metro-cache/private/stores/FileStore');
4
4
  const os = require('os');
5
5
  const path = require('path');
6
6
  const node_path = require('node:path');
7
- const common = require('../shared/uniwind.BDoX4wlN.cjs');
7
+ const common = require('../shared/uniwind.thpLtIq6.cjs');
8
8
  const types = require('../shared/uniwind.BZIuaszw.cjs');
9
9
 
10
10
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -79,10 +79,9 @@ const nativeResolver = (extraComponents) => ({
79
79
  }) => {
80
80
  const resolution = resolver(context, moduleName, platform);
81
81
  const isInternal = isFromThisModule(context.originModulePath);
82
- const isReactNativeIndex = context.originModulePath.endsWith(
83
- `react-native${node_path.sep}index.js`
84
- );
85
- if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
82
+ const isFromReactNative = context.originModulePath.includes(`${node_path.sep}react-native${node_path.sep}`) || context.originModulePath.includes(`${node_path.sep}@react-native${node_path.sep}`);
83
+ const isReactNativeAnimated = context.originModulePath.includes(`${node_path.sep}Animated${node_path.sep}components${node_path.sep}`);
84
+ if (isInternal || resolution.type !== "sourceFile" || isFromReactNative && !isReactNativeAnimated) {
86
85
  return resolution;
87
86
  }
88
87
  if (moduleName === "react-native") {
@@ -2,7 +2,7 @@ import FileStoreBase from 'metro-cache/private/stores/FileStore';
2
2
  import os from 'os';
3
3
  import path from 'path';
4
4
  import { sep, basename, resolve } from 'node:path';
5
- import { n as name, u as uniq } from '../shared/uniwind.DhluOugg.mjs';
5
+ import { n as name, u as uniq } from '../shared/uniwind.BxeutNHQ.mjs';
6
6
  import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
7
7
 
8
8
  class FileStore extends FileStoreBase {
@@ -71,10 +71,9 @@ const nativeResolver = (extraComponents) => ({
71
71
  }) => {
72
72
  const resolution = resolver(context, moduleName, platform);
73
73
  const isInternal = isFromThisModule(context.originModulePath);
74
- const isReactNativeIndex = context.originModulePath.endsWith(
75
- `react-native${sep}index.js`
76
- );
77
- if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
74
+ const isFromReactNative = context.originModulePath.includes(`${sep}react-native${sep}`) || context.originModulePath.includes(`${sep}@react-native${sep}`);
75
+ const isReactNativeAnimated = context.originModulePath.includes(`${sep}Animated${sep}components${sep}`);
76
+ if (isInternal || resolution.type !== "sourceFile" || isFromReactNative && !isReactNativeAnimated) {
78
77
  return resolution;
79
78
  }
80
79
  if (moduleName === "react-native") {
@@ -2,11 +2,11 @@
2
2
 
3
3
  const fs = require('fs');
4
4
  const path = require('path');
5
- const common = require('../shared/uniwind.BDoX4wlN.cjs');
5
+ const common = require('../shared/uniwind.thpLtIq6.cjs');
6
6
  const node = require('@tailwindcss/node');
7
7
  const oxide = require('@tailwindcss/oxide');
8
8
  const types = require('../shared/uniwind.BZIuaszw.cjs');
9
- const stringifyThemes = require('../shared/uniwind.DeQhDtT7.cjs');
9
+ const stringifyThemes = require('../shared/uniwind.sUkMZ7RS.cjs');
10
10
  const lightningcss = require('lightningcss');
11
11
  const culori = require('culori');
12
12
 
@@ -448,6 +448,9 @@ class CSS {
448
448
  case "srgb":
449
449
  return this.Processor.Color.processColor(declarationValue);
450
450
  case "delim":
451
+ if (declarationValue.value === ".") {
452
+ return ".";
453
+ }
451
454
  return ` ${declarationValue.value} `;
452
455
  case "ident":
453
456
  if (this.Processor.Color.isColor(declarationValue.value)) {
@@ -1095,6 +1098,7 @@ const cssToRNMap = {
1095
1098
  fontVariant: value
1096
1099
  })
1097
1100
  };
1101
+ const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
1098
1102
  class RN {
1099
1103
  constructor(Processor) {
1100
1104
  this.Processor = Processor;
@@ -1113,7 +1117,8 @@ class RN {
1113
1117
  transformedProperty,
1114
1118
  typeof value === "string" ? common.addMissingSpaces(value) : value
1115
1119
  );
1116
- return Object.entries(rn).filter(([, value2]) => common.isDefined(value2));
1120
+ const joinedStyles = this.joinStyles(rn);
1121
+ return Object.entries(joinedStyles).filter(([, value2]) => common.isDefined(value2));
1117
1122
  }
1118
1123
  transformProperty(property, value) {
1119
1124
  if (property in cssToRNMap) {
@@ -1183,6 +1188,20 @@ class RN {
1183
1188
  };
1184
1189
  }
1185
1190
  }
1191
+ // Used when they're multiple styles with the same value that could be joined
1192
+ joinStyles(styles) {
1193
+ const keys = Object.keys(styles);
1194
+ if (BORDER_WIDTH_KEYS.every((key) => keys.includes(key))) {
1195
+ const borderWidth = styles.borderTopWidth;
1196
+ if (BORDER_WIDTH_KEYS.every((key) => styles[key] === borderWidth)) {
1197
+ return {
1198
+ ...common.removeKeys(styles, BORDER_WIDTH_KEYS),
1199
+ borderWidth
1200
+ };
1201
+ }
1202
+ }
1203
+ return styles;
1204
+ }
1186
1205
  }
1187
1206
 
1188
1207
  class Units {
@@ -1,10 +1,10 @@
1
1
  import fs from 'fs';
2
2
  import path from 'path';
3
- import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, n as name } from '../shared/uniwind.DhluOugg.mjs';
3
+ import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, f as removeKeys, n as name } from '../shared/uniwind.BxeutNHQ.mjs';
4
4
  import { compile } from '@tailwindcss/node';
5
5
  import { Scanner } from '@tailwindcss/oxide';
6
6
  import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
7
- import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.D8_HBWsJ.mjs';
7
+ import { L as Logger, p as processFunctions, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.sIHlVZql.mjs';
8
8
  import { transform as transform$1 } from 'lightningcss';
9
9
  import { converter, parse, formatHex, formatHex8 } from 'culori';
10
10
 
@@ -441,6 +441,9 @@ class CSS {
441
441
  case "srgb":
442
442
  return this.Processor.Color.processColor(declarationValue);
443
443
  case "delim":
444
+ if (declarationValue.value === ".") {
445
+ return ".";
446
+ }
444
447
  return ` ${declarationValue.value} `;
445
448
  case "ident":
446
449
  if (this.Processor.Color.isColor(declarationValue.value)) {
@@ -1088,6 +1091,7 @@ const cssToRNMap = {
1088
1091
  fontVariant: value
1089
1092
  })
1090
1093
  };
1094
+ const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
1091
1095
  class RN {
1092
1096
  constructor(Processor) {
1093
1097
  this.Processor = Processor;
@@ -1106,7 +1110,8 @@ class RN {
1106
1110
  transformedProperty,
1107
1111
  typeof value === "string" ? addMissingSpaces(value) : value
1108
1112
  );
1109
- return Object.entries(rn).filter(([, value2]) => isDefined(value2));
1113
+ const joinedStyles = this.joinStyles(rn);
1114
+ return Object.entries(joinedStyles).filter(([, value2]) => isDefined(value2));
1110
1115
  }
1111
1116
  transformProperty(property, value) {
1112
1117
  if (property in cssToRNMap) {
@@ -1176,6 +1181,20 @@ class RN {
1176
1181
  };
1177
1182
  }
1178
1183
  }
1184
+ // Used when they're multiple styles with the same value that could be joined
1185
+ joinStyles(styles) {
1186
+ const keys = Object.keys(styles);
1187
+ if (BORDER_WIDTH_KEYS.every((key) => keys.includes(key))) {
1188
+ const borderWidth = styles.borderTopWidth;
1189
+ if (BORDER_WIDTH_KEYS.every((key) => styles[key] === borderWidth)) {
1190
+ return {
1191
+ ...removeKeys(styles, BORDER_WIDTH_KEYS),
1192
+ borderWidth
1193
+ };
1194
+ }
1195
+ }
1196
+ return styles;
1197
+ }
1179
1198
  }
1180
1199
 
1181
1200
  class Units {
@@ -3,8 +3,8 @@ import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.commo
3
3
  declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
4
4
  private runtimeCSSVariables;
5
5
  constructor();
6
- onThemeChange(): void;
7
6
  updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
7
+ protected onThemeChange(): void;
8
8
  private applyCSSVariable;
9
9
  }
10
10
  export declare const Uniwind: UniwindConfigBuilder;
@@ -7,19 +7,6 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
7
7
  constructor() {
8
8
  super();
9
9
  }
10
- onThemeChange() {
11
- if (typeof document === "undefined") {
12
- return;
13
- }
14
- document.documentElement.removeAttribute("style");
15
- const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
16
- if (!runtimeCSSVariables) {
17
- return;
18
- }
19
- Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
20
- this.applyCSSVariable(varName, varValue);
21
- });
22
- }
23
10
  updateCSSVariables(theme, variables) {
24
11
  Object.entries(variables).forEach(([varName, varValue]) => {
25
12
  if (!varName.startsWith("--") && __DEV__) {
@@ -35,6 +22,19 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
35
22
  UniwindListener.notify([StyleDependency.Variables]);
36
23
  }
37
24
  }
25
+ onThemeChange() {
26
+ if (typeof document === "undefined") {
27
+ return;
28
+ }
29
+ document.documentElement.removeAttribute("style");
30
+ const runtimeCSSVariables = this.runtimeCSSVariables.get(this.currentTheme);
31
+ if (!runtimeCSSVariables) {
32
+ return;
33
+ }
34
+ Object.entries(runtimeCSSVariables).forEach(([varName, varValue]) => {
35
+ this.applyCSSVariable(varName, varValue);
36
+ });
37
+ }
38
38
  applyCSSVariable(varName, varValue) {
39
39
  if (typeof document === "undefined") {
40
40
  return;
@@ -3,10 +3,10 @@ import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types';
3
3
  import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common';
4
4
  declare class UniwindConfigBuilder extends UniwindConfigBuilderBase {
5
5
  constructor();
6
- __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>): void;
7
- onThemeChange(): void;
8
6
  updateCSSVariables(theme: ThemeName, variables: CSSVariables): void;
9
7
  updateInsets(insets: Insets): void;
8
+ protected __reinit(generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>): void;
9
+ protected onThemeChange(): void;
10
10
  }
11
11
  export declare const Uniwind: UniwindConfigBuilder;
12
12
  export {};
@@ -8,14 +8,6 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
8
8
  constructor() {
9
9
  super();
10
10
  }
11
- __reinit(generateStyleSheetCallback, themes) {
12
- super.__reinit(generateStyleSheetCallback, themes);
13
- UniwindStore.reinit(generateStyleSheetCallback);
14
- }
15
- onThemeChange() {
16
- UniwindStore.runtime.currentThemeName = this.currentTheme;
17
- UniwindStore.reinit();
18
- }
19
11
  updateCSSVariables(theme, variables) {
20
12
  Object.entries(variables).forEach(([varName, varValue]) => {
21
13
  if (!varName.startsWith("--") && __DEV__) {
@@ -57,5 +49,13 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
57
49
  UniwindStore.runtime.insets.right = insets.right ?? 0;
58
50
  UniwindListener.notify([StyleDependency.Insets]);
59
51
  }
52
+ __reinit(generateStyleSheetCallback, themes) {
53
+ super.__reinit(generateStyleSheetCallback, themes);
54
+ UniwindStore.reinit(generateStyleSheetCallback);
55
+ }
56
+ onThemeChange() {
57
+ UniwindStore.runtime.currentThemeName = this.currentTheme;
58
+ UniwindStore.reinit();
59
+ }
60
60
  }
61
61
  export const Uniwind = new UniwindConfigBuilder();
@@ -1,63 +1,88 @@
1
- const types = ["m", "p"];
2
- const sides = ["", "x", "y", "t", "b", "l", "r"];
1
+ const types = ["margin", "padding", "inset"];
2
+ const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
3
+ const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
3
4
  const spacing = "--spacing(--value(integer))";
4
5
  const length = "--value([length])";
5
6
  export const generateCSSForInsets = () => {
6
7
  let css = `@utility h-screen-safe {
7
8
  height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
8
9
  }
10
+
9
11
  `;
10
12
  const getInsetsForSide = (side) => {
11
13
  switch (side) {
12
- case "t":
14
+ case "top":
13
15
  return ["top"];
14
- case "b":
16
+ case "bottom":
15
17
  return ["bottom"];
16
- case "l":
18
+ case "left":
17
19
  return ["left"];
18
- case "r":
20
+ case "right":
19
21
  return ["right"];
20
22
  case "x":
21
23
  return ["left", "right"];
22
24
  case "y":
23
25
  return ["top", "bottom"];
24
- default:
26
+ case "inset":
25
27
  return ["top", "bottom", "left", "right"];
28
+ default:
29
+ side;
30
+ return [];
31
+ }
32
+ };
33
+ const getUtilityName = (typeName, side, safeAreaType) => {
34
+ if (typeName === "inset") {
35
+ return `${side}-${safeAreaType}`;
36
+ }
37
+ const sideSuffix = side === "inset" ? "" : side.at(0);
38
+ return `${typeName.at(0)}${sideSuffix}-${safeAreaType}`;
39
+ };
40
+ const getStyleProperty = (typeName, inset) => {
41
+ if (typeName === "inset") {
42
+ return inset;
43
+ }
44
+ return `${typeName}-${inset}`;
45
+ };
46
+ const getStylesForSafeAreaType = (safeAreaType, styles) => {
47
+ switch (safeAreaType) {
48
+ case "safe":
49
+ return styles;
50
+ case "safe-or-*":
51
+ return styles.flatMap((style) => {
52
+ const styleWithoutSemicolon = style.replace(";", "");
53
+ return [
54
+ styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
55
+ styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
56
+ ];
57
+ });
58
+ case "safe-offset-*":
59
+ return styles.flatMap((style) => {
60
+ const styleWithoutSemicolon = style.replace(";", "");
61
+ return [
62
+ styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
63
+ styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
64
+ ];
65
+ });
66
+ default:
67
+ safeAreaType;
68
+ return [];
26
69
  }
27
70
  };
28
71
  types.forEach((type) => {
29
72
  sides.forEach((side) => {
30
- const styleName = type === "m" ? "margin" : "padding";
31
73
  const insets = getInsetsForSide(side);
32
- const styles = insets.map((inset) => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
33
- const safeStyles = styles.flatMap((style) => {
34
- const styleWithoutSemicolon = style.replace(";", "");
35
- return [
36
- styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
37
- styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)
38
- ];
39
- });
40
- const safeOffsetStyles = styles.flatMap((style) => {
41
- const styleWithoutSemicolon = style.replace(";", "");
42
- return [
43
- styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
44
- styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)
45
- ];
74
+ const styles = insets.map((inset) => `${getStyleProperty(type, inset)}: env(safe-area-inset-${inset});`);
75
+ safeAreaTypes.forEach((safeAreaType) => {
76
+ const utilityName = getUtilityName(type, side, safeAreaType);
77
+ css += [
78
+ `@utility ${utilityName} {`,
79
+ ...getStylesForSafeAreaType(safeAreaType, styles).map((style) => ` ${style}`),
80
+ "}",
81
+ "",
82
+ ""
83
+ ].join("\n");
46
84
  });
47
- css += `
48
- @utility ${type}${side}-safe {
49
- ${styles.join("\n ")}
50
- }
51
-
52
- @utility ${type}${side}-safe-or-* {
53
- ${safeStyles.join("\n ")}
54
- }
55
-
56
- @utility ${type}${side}-safe-offset-* {
57
- ${safeOffsetStyles.join("\n ")}
58
- }
59
- `;
60
85
  });
61
86
  });
62
- return css.replaceAll(" ", "").trim() + "\n";
87
+ return css.slice(0, -1);
63
88
  };
@@ -66,5 +66,8 @@ const deepEqual = (a, b) => {
66
66
  }
67
67
  return keysA.every((key) => deepEqual(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
68
68
  };
69
+ const removeKeys = (obj, keysToRemove) => Object.fromEntries(
70
+ Object.entries(obj).filter(([key]) => !keysToRemove.includes(key))
71
+ );
69
72
 
70
- export { isValidJSValue as a, addMissingSpaces as b, isDefined as c, deepEqual as d, shouldBeSerialized as e, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };
73
+ export { isValidJSValue as a, addMissingSpaces as b, isDefined as c, deepEqual as d, shouldBeSerialized as e, removeKeys as f, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };