Generated by SassMeister.com.

input.scss

@function dash-join($args...) {
	$result: null;
	$first-add: true;
	$glue: '-';

	@for $i from 1 through length($args) {
		$e: nth($args, $i);

		@if $e != null and $e != '' {
			$result: if($i == 1 or $first-add == true, #{$e}, #{$result}#{$glue}#{$e});
			$first-add: false;
		}
	}

	@return $result;
}

$queries: (
	default: 'all',
	sm: '>xsmall',
	md: '>small',
	lg: '>medium',
	xl: '>large',
);

@each $breakpointname, $query in $queries {
	@media($query) {
		@each $direction, $property in (w: inline, h: block) {
			@each $boundary in (min, '' , max) {
				$classname: #{if($breakpointname == 'default', '', $breakpointname + '\\\:')}#{dash-join($boundary, $direction, 'custom')};
				$propname: dash-join($boundary, $property, 'size');
				$value: #{if($breakpointname == 'default', '', $breakpointname + '-')}#{dash-join($boundary, $direction, 'custom')};
				
				.#{$classname} {
					#{$propname}: var(--#{$value});
				}
			}
		} 
	}
}

output.css

@media (all) {
  .min-w-custom {
    min-inline-size: var(--min-w-custom);
  }

  .w-custom {
    inline-size: var(--w-custom);
  }

  .max-w-custom {
    max-inline-size: var(--max-w-custom);
  }

  .min-h-custom {
    min-block-size: var(--min-h-custom);
  }

  .h-custom {
    block-size: var(--h-custom);
  }

  .max-h-custom {
    max-block-size: var(--max-h-custom);
  }
}
@media (>xsmall) {
  .sm\:min-w-custom {
    min-inline-size: var(--sm-min-w-custom);
  }

  .sm\:w-custom {
    inline-size: var(--sm-w-custom);
  }

  .sm\:max-w-custom {
    max-inline-size: var(--sm-max-w-custom);
  }

  .sm\:min-h-custom {
    min-block-size: var(--sm-min-h-custom);
  }

  .sm\:h-custom {
    block-size: var(--sm-h-custom);
  }

  .sm\:max-h-custom {
    max-block-size: var(--sm-max-h-custom);
  }
}
@media (>small) {
  .md\:min-w-custom {
    min-inline-size: var(--md-min-w-custom);
  }

  .md\:w-custom {
    inline-size: var(--md-w-custom);
  }

  .md\:max-w-custom {
    max-inline-size: var(--md-max-w-custom);
  }

  .md\:min-h-custom {
    min-block-size: var(--md-min-h-custom);
  }

  .md\:h-custom {
    block-size: var(--md-h-custom);
  }

  .md\:max-h-custom {
    max-block-size: var(--md-max-h-custom);
  }
}
@media (>medium) {
  .lg\:min-w-custom {
    min-inline-size: var(--lg-min-w-custom);
  }

  .lg\:w-custom {
    inline-size: var(--lg-w-custom);
  }

  .lg\:max-w-custom {
    max-inline-size: var(--lg-max-w-custom);
  }

  .lg\:min-h-custom {
    min-block-size: var(--lg-min-h-custom);
  }

  .lg\:h-custom {
    block-size: var(--lg-h-custom);
  }

  .lg\:max-h-custom {
    max-block-size: var(--lg-max-h-custom);
  }
}
@media (>large) {
  .xl\:min-w-custom {
    min-inline-size: var(--xl-min-w-custom);
  }

  .xl\:w-custom {
    inline-size: var(--xl-w-custom);
  }

  .xl\:max-w-custom {
    max-inline-size: var(--xl-max-w-custom);
  }

  .xl\:min-h-custom {
    min-block-size: var(--xl-min-h-custom);
  }

  .xl\:h-custom {
    block-size: var(--xl-h-custom);
  }

  .xl\:max-h-custom {
    max-block-size: var(--xl-max-h-custom);
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}