body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: lab(29.2345% 39.3825 20.0664);
  color: white;
  font: 900 110%/1.4 system-ui;
  padding: 2rem;
  box-sizing: border-box;
  &::before {
    content: "Hey! @parcel/css in the browser on CodePen!";
  }
}

import init, { transform } from "https://unpkg.com/@parcel/css-wasm";

console.clear();
await init();

fetch("https://codepen.io/chriscoyier/pen/VwQLWYm.css")
  .then((response) => response.text())
  .then((data) => {
    let { code, map } = transform({
      filename: "not-used-but-required",
      code: new TextEncoder().encode(data),
      drafts: {
        nesting: true,
        customMedia: true
      },
      targets: {
        chrome: 110,
        safari: 14
      }
    });
    const processedCode = new TextDecoder().decode(code);
    document.querySelector("head style").innerHTML = processedCode;
    console.log(processedCode, "Successful CSS processing.");
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.