Built in safe-area utilities

[jesspinklet]

Been thinking to have something like this that I made for the safe-areas for tailwind 4:

/* Safe Area Utilities */
@utility m-safe {
  margin-top: env(safe-area-inset-top);
  margin-right: env(safe-area-inset-right);
  margin-bottom: env(safe-area-inset-bottom);
  margin-left: env(safe-area-inset-left);
}

@utility mx-safe {
  margin-right: env(safe-area-inset-right);
  margin-left: env(safe-area-inset-left);
}

@utility my-safe {
  margin-top: env(safe-area-inset-top);
  margin-bottom: env(safe-area-inset-bottom);
}

@utility ms-safe {
  margin-inline-start: env(safe-area-inset-left);
}

@utility me-safe {
  margin-inline-end: env(safe-area-inset-right);
}

@utility mt-safe {
  margin-top: env(safe-area-inset-top);
}

@utility mr-safe {
  margin-right: env(safe-area-inset-right);
}

@utility mb-safe {
  margin-bottom: env(safe-area-inset-bottom);
}

@utility ml-safe {
  margin-left: env(safe-area-inset-left);
}

@utility p-safe {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

@utility px-safe {
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

@utility py-safe {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

@utility ps-safe {
  padding-inline-start: env(safe-area-inset-left);
}

@utility pe-safe {
  padding-inline-end: env(safe-area-inset-right);
}

@utility pt-safe {
  padding-top: env(safe-area-inset-top);
}

@utility pr-safe {
  padding-right: env(safe-area-inset-right);
}

@utility pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

@utility pl-safe {
  padding-left: env(safe-area-inset-left);
}

@utility scroll-m-safe {
  scroll-margin-bottom: env(safe-area-inset-bottom);
  scroll-margin-left: env(safe-area-inset-left);
  scroll-margin-right: env(safe-area-inset-right);
  scroll-margin-top: env(safe-area-inset-top);
}

@utility scroll-mx-safe {
  scroll-margin-left: env(safe-area-inset-left);
  scroll-margin-right: env(safe-area-inset-right);
}

@utility scroll-my-safe {
  scroll-margin-bottom: env(safe-area-inset-bottom);
  scroll-margin-top: env(safe-area-inset-top);
}

@utility scroll-ms-safe {
  scroll-margin-inline-start: env(safe-area-inset-left);
}

@utility scroll-me-safe {
  scroll-margin-inline-end: env(safe-area-inset-right);
}

@utility scroll-mt-safe {
  scroll-margin-top: env(safe-area-inset-top);
}

@utility scroll-mr-safe {
  scroll-margin-right: env(safe-area-inset-right);
}

@utility scroll-mb-safe {
  scroll-margin-bottom: env(safe-area-inset-bottom);
}

@utility scroll-ml-safe {
  scroll-margin-left: env(safe-area-inset-left);
}

@utility scroll-p-safe {
  scroll-padding-bottom: env(safe-area-inset-bottom);
  scroll-padding-left: env(safe-area-inset-left);
  scroll-padding-right: env(safe-area-inset-right);
  scroll-padding-top: env(safe-area-inset-top);
}

@utility scroll-px-safe {
  scroll-padding-left: env(safe-area-inset-left);
  scroll-padding-right: env(safe-area-inset-right);
}

@utility scroll-py-safe {
  scroll-padding-bottom: env(safe-area-inset-bottom);
  scroll-padding-top: env(safe-area-inset-top);
}

@utility scroll-ps-safe {
  scroll-padding-inline-start: env(safe-area-inset-left);
}

@utility scroll-pe-safe {
  scroll-padding-inline-end: env(safe-area-inset-right);
}

@utility scroll-pt-safe {
  scroll-padding-top: env(safe-area-inset-top);
}

@utility scroll-pr-safe {
  scroll-padding-right: env(safe-area-inset-right);
}

@utility scroll-pb-safe {
  scroll-padding-bottom: env(safe-area-inset-bottom);
}

@utility scroll-pl-safe {
  scroll-padding-left: env(safe-area-inset-left);
}

@utility inset-safe {
  top: env(safe-area-inset-top);
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  left: env(safe-area-inset-left);
}

@utility inset-x-safe {
  right: env(safe-area-inset-right);
  left: env(safe-area-inset-left);
}

@utility inset-y-safe {
  top: env(safe-area-inset-top);
  bottom: env(safe-area-inset-bottom);
}

@utility start-safe {
  inset-inline-start: env(safe-area-inset-left);
}

@utility end-safe {
  inset-inline-end: env(safe-area-inset-right);
}

@utility top-safe {
  top: env(safe-area-inset-top);
}

@utility right-safe {
  right: env(safe-area-inset-right);
}

@utility bottom-safe {
  bottom: env(safe-area-inset-bottom);
}

@utility left-safe {
  left: env(safe-area-inset-left);
}

@utility min-h-screen-safe {
  min-height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  min-height: -webkit-fill-available;
}

@utility max-h-screen-safe {
  max-height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  max-height: -webkit-fill-available;
}

@utility h-screen-safe {
  height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  height: -webkit-fill-available;
}

/* Safe area utilities with custom values */
@utility m-safe-* {
  margin-top: calc(env(safe-area-inset-top) + --value([*]));
  margin-right: calc(env(safe-area-inset-right) + --value([*]));
  margin-bottom: calc(env(safe-area-inset-bottom) + --value([*]));
  margin-left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility mt-safe-* {
  margin-top: calc(env(safe-area-inset-top) + --value([*]));
}

@utility mr-safe-* {
  margin-right: calc(env(safe-area-inset-right) + --value([*]));
}

@utility mb-safe-* {
  margin-bottom: calc(env(safe-area-inset-bottom) + --value([*]));
}

@utility ml-safe-* {
  margin-left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility mx-safe-* {
  margin-right: calc(env(safe-area-inset-right) + --value([*]));
  margin-left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility my-safe-* {
  margin-top: calc(env(safe-area-inset-top) + --value([*]));
  margin-bottom: calc(env(safe-area-inset-bottom) + --value([*]));
}

@utility ms-safe-* {
  margin-inline-start: calc(env(safe-area-inset-left) + --value([*]));
}

@utility me-safe-* {
  margin-inline-end: calc(env(safe-area-inset-right) + --value([*]));
}

@utility p-safe-* {
  padding-top: calc(env(safe-area-inset-top) + --value([*]));
  padding-right: calc(env(safe-area-inset-right) + --value([*]));
  padding-bottom: calc(env(safe-area-inset-bottom) + --value([*]));
  padding-left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility pt-safe-* {
  padding-top: calc(env(safe-area-inset-top) + --value([*]));
}

@utility pr-safe-* {
  padding-right: calc(env(safe-area-inset-right) + --value([*]));
}

@utility pb-safe-* {
  padding-bottom: calc(env(safe-area-inset-bottom) + --value([*]));
}

@utility pl-safe-* {
  padding-left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility px-safe-* {
  padding-right: calc(env(safe-area-inset-right) + --value([*]));
  padding-left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility py-safe-* {
  padding-top: calc(env(safe-area-inset-top) + --value([*]));
  padding-bottom: calc(env(safe-area-inset-bottom) + --value([*]));
}

@utility ps-safe-* {
  padding-inline-start: calc(env(safe-area-inset-left) + --value([*]));
}

@utility pe-safe-* {
  padding-inline-end: calc(env(safe-area-inset-right) + --value([*]));
}

@utility inset-safe-* {
  top: calc(env(safe-area-inset-top) + --value([*]));
  right: calc(env(safe-area-inset-right) + --value([*]));
  bottom: calc(env(safe-area-inset-bottom) + --value([*]));
  left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility inset-x-safe-* {
  right: calc(env(safe-area-inset-right) + --value([*]));
  left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility inset-y-safe-* {
  top: calc(env(safe-area-inset-top) + --value([*]));
  bottom: calc(env(safe-area-inset-bottom) + --value([*]));
}

@utility top-safe-* {
  top: calc(env(safe-area-inset-top) + --value([*]));
}

@utility right-safe-* {
  right: calc(env(safe-area-inset-right) + --value([*]));
}

@utility bottom-safe-* {
  bottom: calc(env(safe-area-inset-bottom) + --value([*]));
}

@utility left-safe-* {
  left: calc(env(safe-area-inset-left) + --value([*]));
}

@utility start-safe-* {
  inset-inline-start: calc(env(safe-area-inset-left) + --value([*]));
}

@utility end-safe-* {
  inset-inline-end: calc(env(safe-area-inset-right) + --value([*]));
}