postcss-pxv/output.css

A PostCSS plugin that converts pxv units into fluid, viewport-scaled values using clamp().

:root {
  font-family: system-ui, sans-serif;
  --siteMin: 0; /* testing to see if manually adding fixes vercel deploy */
  --siteBasis: 375; /* testing to see if manually adding fixes vercel deploy */
  --siteMax: 600; /* testing to see if manually adding fixes vercel deploy */
  --font-min-clamp: 10px; /* global floor */
  --font-max-clamp: 9999px; /* global "no ceiling" */
  --font-size: calc(16 * var(--pxv-unit)); /* overwritten per element */ --site-min: 0; --site-basis: 375; --site-max: 767; --pxv-unit: clamp(
            calc(1px * var(--site-min) / var(--site-basis)),
            calc((100 / var(--site-basis)) * 1vw),
            calc(1px * var(--site-max) / var(--site-basis))
          );
}

@media (min-width: 900px) {
  :root {
    --siteMin: 1024;
    --siteBasis: 1440;
    --siteMax: 2000;
  }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: clamp(
    var(--font-min-clamp),
    var(--font-size),
    var(--font-max-clamp)
  );
}

h1 {
  --font-size: calc(32 * var(--pxv-unit));
  @media (min-width: 900px) {
    --font-size: calc(54 * var(--pxv-unit));
  }
}

/* Typography */
.typography {
  --ff: 14px;
  --cf: 9999px;
  font-size: clamp(var(--ff), calc(16 * var(--pxv-unit)), var(--cf));
  line-height: calc(24 * var(--pxv-unit));
  background: #f0f0f0;
  padding: 10px;
}

/* Box Model */
.border {
  width: calc(150 * var(--pxv-unit));
  padding: calc(12 * var(--pxv-unit)) calc(100 * var(--pxv-unit)) calc(13 * var(--pxv-unit)) calc(15 * var(--pxv-unit));
  border: calc(5 * var(--pxv-unit)) solid blue;
  margin-bottom: 20px;
}

.shorthand {
  background: tomato;
  color: white;
  padding: calc(40 * var(--pxv-unit)) calc(20 * var(--pxv-unit)) calc(100 * var(--pxv-unit)) calc(50 * var(--pxv-unit));
  margin: calc(40 * var(--pxv-unit)) calc(20 * var(--pxv-unit)) calc(99 * var(--pxv-unit)) calc(20 * var(--pxv-unit));
}

.decimal {
  width: calc(845.34534 * var(--pxv-unit));
  height: calc(35.3344 * var(--pxv-unit));
  background: lightpink;
  margin-bottom: 20px;
}

.zero-test {
  margin: calc(20 * var(--pxv-unit)) 0 calc(50 * var(--pxv-unit));
  background: lightgreen;
}

/* Positioning */
.absolute {
  position: absolute;
  top: calc(50 * var(--pxv-unit));
  right: calc(50 * var(--pxv-unit));
  width: calc(290 * var(--pxv-unit));
  height: 44.5px;
  border: calc(10 * var(--pxv-unit)) solid green;
  background: palegoldenrod;
}

.negativeval {
  border: calc(4 * var(--pxv-unit)) solid brown;
  background: paleturquoise;
  width: calc(300 * var(--pxv-unit));
  height: calc(200 * var(--pxv-unit));
  margin-left: calc(-30 * var(--pxv-unit));
  margin-top: 250px;
}

/* Expressions */
.weird-stuff {
  margin: calc(20 * var(--pxv-unit)) calc(calc(20 * var(--pxv-unit)) + calc(calc(10 * var(--pxv-unit)) + 5%)) calc(50 * var(--pxv-unit));
  background: #eee;
  padding: 10px;
}

/* Grid & Flex */
.grid {
  display: grid;
  grid-template-columns: calc(100 * var(--pxv-unit)) 1fr calc(200 * var(--pxv-unit));
  gap: calc(20 * var(--pxv-unit));
  margin-bottom: 20px;
}
.grid div {
  background: lightblue;
  padding: 10px;
}
.flex {
  display: flex;
  gap: calc(15 * var(--pxv-unit));
}
.flex div {
  background: peachpuff;
  padding: 10px;
}

/* Pseudo-elements */
.pseudo::before {
  content: "before";
  display: inline-block;
  margin-right: calc(10 * var(--pxv-unit));
  padding: calc(4 * var(--pxv-unit));
  background: gold;
}

/* Form Elements */
.test-input {
  padding: calc(8 * var(--pxv-unit));
  border: calc(2 * var(--pxv-unit)) solid teal;
  border-radius: calc(6 * var(--pxv-unit));
  margin: calc(10 * var(--pxv-unit)) 0;
}

/* Media Queries */
.mq-test {
  padding: calc(20 * var(--pxv-unit));
  background: lavender;
}
@media (min-width: 1600px) {
  .mq-test {
    padding: calc(40 * var(--pxv-unit));
    background: lightsteelblue;
  }
}

/* Other CSS properties */
.extras {
  width: calc(120 * var(--pxv-unit));
  height: calc(80 * var(--pxv-unit));
  background: pink;
  border-radius: calc(12 * var(--pxv-unit));
  box-shadow: calc(5 * var(--pxv-unit)) calc(5 * var(--pxv-unit)) calc(10 * var(--pxv-unit)) rgba(0, 0, 0, 0.25);
  transform: translate(calc(20 * var(--pxv-unit)), calc(10 * var(--pxv-unit)));
}

/* Selector variety */
ul li {
  margin-bottom: calc(12 * var(--pxv-unit));
}
#unique {
  padding: calc(16 * var(--pxv-unit));
  background: lightcyan;
}
article > h2 {
  margin-top: calc(24 * var(--pxv-unit));
}