Add "extract" option to Rollup plugin

.changeset/twelve-suns-hope.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/rollup-plugin': minor
+---
+
+Add "extract" option which bundles CSS into one bundle. Removes .css imports.

fixtures/react-library-example/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@fixtures/react-library-example",
+  "description": "React design system library",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "dependencies": {
+    "@vanilla-extract/css": "workspace:*",
+    "clsx": "^2.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19"
+  }
+}

fixtures/react-library-example/src/button/button.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../styles/vars.css.js';
+
+export const btn = style({
+  background: vars.color.background.brand,
+  borderRadius: vars.size.radius[200],
+  color: vars.color.text.brand,
+  ...vars.typography.body.medium,
+  paddingBlock: vars.size.space[200],
+  paddingInline: vars.size.space[300],
+});

fixtures/react-library-example/src/button/button.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import * as styles from './button.css.js';
+
+export default function Button({
+  className,
+  children,
+  type = 'button',
+  ...props
+}: React.ComponentProps<'button'>) {
+  return (
+    <button {...props} type={type} className={clsx(styles.btn, className)}>
+      {children}
+    </button>
+  );
+}

fixtures/react-library-example/src/checkbox/checkbox.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../styles/vars.css.js';
+
+export const label = style({
+  display: 'block',
+  ...vars.typography.body.medium,
+
+  '::before': {
+    background: vars.color.background.brand,
+    borderColor: vars.color.border.default,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    content: '',
+    borderRadius: vars.size.radius['200'],
+    marginRight: vars.size.space['300'],
+  },
+});
+
+export const input = style({
+  width: '1.5rem',
+  height: '1.5rem',
+});

fixtures/react-library-example/src/checkbox/checkbox.tsx

@@ -0,0 +1,25 @@
+import { useId } from 'react';
+import clsx from 'clsx';
+import * as styles from './checkbox.css.js';
+
+export default function Radio({
+  children,
+  className,
+  id,
+  ...props
+}: React.ComponentProps<'input'> & { children: React.ReactNode }) {
+  const randomID = useId();
+  return (
+    <>
+      <input
+        {...props}
+        className={styles.input}
+        id={id ?? randomID}
+        type="checkbox"
+      />
+      <label className={clsx(styles.label, className)} htmlFor={id ?? randomID}>
+        {children}
+      </label>
+    </>
+  );
+}

fixtures/react-library-example/src/index.ts

@@ -0,0 +1,10 @@
+// 1. Style reset
+import './styles/reset.css.js';
+
+// 2. Design library
+export { default as Button } from './button/button.js';
+export { default as Checkbox } from './checkbox/checkbox.js';
+export { default as Radio } from './radio/radio.js';
+
+// 3. Utility CSS should be last
+import './styles/utility.css.js';

fixtures/react-library-example/src/radio/radio.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../styles/vars.css.js';
+
+export const label = style({
+  display: 'block',
+  ...vars.typography.body.medium,
+
+  '::before': {
+    background: vars.color.background.brand,
+    borderColor: vars.color.border.default,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    content: '',
+    borderRadius: vars.size.radius.full,
+    marginRight: vars.size.space['300'],
+  },
+});
+
+export const input = style({
+  width: '1.5rem',
+  height: '1.5rem',
+});

fixtures/react-library-example/src/radio/radio.tsx

@@ -0,0 +1,25 @@
+import { useId } from 'react';
+import clsx from 'clsx';
+import * as styles from './radio.css.js';
+
+export default function Radio({
+  children,
+  className,
+  id,
+  ...props
+}: React.ComponentProps<'input'> & { children: React.ReactNode }) {
+  const randomID = useId();
+  return (
+    <>
+      <input
+        {...props}
+        className={styles.input}
+        id={id ?? randomID}
+        type="radio"
+      />
+      <label className={clsx(styles.label, className)} htmlFor={id ?? randomID}>
+        {children}
+      </label>
+    </>
+  );
+}

fixtures/react-library-example/src/styles/reset.css.ts

@@ -0,0 +1,8 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('html, body', {
+  fontSize: '100%',
+  height: '100%',
+  lineHeight: 1,
+  margin: 0,
+});

fixtures/react-library-example/src/styles/utility.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from './vars.css.js';
+
+// Note: these aren’t meant to be intended as best practice over Sprinkles,
+// these are only testing style() declarations loaded differently
+
+export const mt100 = style({ marginTop: vars.size.space[100] });
+export const mt200 = style({ marginTop: vars.size.space[200] });
+export const mt300 = style({ marginTop: vars.size.space[300] });
+export const mt400 = style({ marginTop: vars.size.space[400] });