astro/dist/assets/utils/imageAttributes.js

Astro is a modern site builder with web best practices, performance, and DX front-of-mind.

import { toStyleString } from "../../runtime/server/render/util.js";
function addCSSVarsToStyle(vars, styles) {
  const cssVars = Object.entries(vars).filter(([_, value]) => value !== void 0 && value !== false).map(([key, value]) => `--${key}: ${value};`).join(" ");
  if (!styles) {
    return cssVars;
  }
  const style = typeof styles === "string" ? styles : toStyleString(styles);
  return `${cssVars} ${style}`;
}
const cssFitValues = ["fill", "contain", "cover", "scale-down"];
function applyResponsiveAttributes({
  layout,
  image,
  props,
  additionalAttributes
}) {
  const attributes = { ...additionalAttributes, ...image.attributes };
  attributes.style = addCSSVarsToStyle(
    {
      w: image.attributes.width ?? props.width ?? image.options.width,
      h: image.attributes.height ?? props.height ?? image.options.height,
      fit: cssFitValues.includes(props.fit ?? "") && props.fit,
      pos: props.position
    },
    attributes.style
  );
  attributes["data-astro-image"] = layout;
  return attributes;
}
export {
  addCSSVarsToStyle,
  applyResponsiveAttributes
};