Anvil2 2.0 to 3.0

.anvil2 {
  .my-button {
    background-color: blue;
  }

  .my-card {
    border-color: red;
  }
}

.anvil2 .my-component {
  background-color: blue;
}

/* 2.x */
@layer application {
  .my-button {
    background-color: blue;
  }
  ... other Anvil2 style overrides ...
}

/* 3.0 */
.anvil2 {
  .my-button {
    background-color: blue;
  }
  ... other Anvil2 style overrides ...
}

// postcss.config.js

const anvil2Wrapper = () => {
  return {
    postcssPlugin: "postcss-anvil2-wrapper",
    Once(root, { postcss, result }) {
      const inputFile = result.root.source?.input?.from;

      // Scope this plugin to only the files you want wrapped.
      // Update this condition to match your override file paths.
      if (!inputFile || !inputFile.includes("anvil2-overrides")) {
        return;
      }

      const nodes = [];
      const keyframeNodes = [];
      const globalNodes = [];

      root.each((node) => {
        // Keep @keyframes outside the wrapper
        if (node.type === "atrule" && node.name === "keyframes") {
          keyframeNodes.push(node.clone());
          node.remove();
        }
        // Keep :global selectors outside the wrapper
        else if (node.type === "rule" && node.selector.includes(":global")) {
          globalNodes.push(node.clone());
          node.remove();
        } else {
          nodes.push(node.clone());
          node.remove();
        }
      });

      if (nodes.length > 0) {
        const wrapper = new postcss.Rule({ selector: ".anvil2" });
        nodes.forEach((node) => wrapper.append(node));
        root.append(wrapper);
      }

      keyframeNodes.forEach((node) => root.append(node));
      globalNodes.forEach((node) => root.append(node));
    },
  };
};
anvil2Wrapper.postcss = true;

module.exports = {
  plugins: [anvil2Wrapper()],
};

// anvil2-overrides.scss
.my-button {
  background-color: blue;
}

.anvil2 .my-button {
  background-color: blue;
}

import { ThemeProvider } from "@servicetitan/anvil2";

function MyA1Dialog() {
  return (
    <LegacyDialog>
      <ThemeProvider>
        {/* Anvil2 components will now have the .anvil2 scope */}
        <Button>Save</Button>
        <TextField label="Name" />
      </ThemeProvider>
    </LegacyDialog>
  );
}