tailwindcss 0.0.0-oxide.2 → 0.0.0-oxide.3

package/dist/cli.mjs

@@ -1,4 +1,5 @@
-import { __require, optimizeCss, compile, package_default } from './chunk-VA4PAOBV.mjs';
+#!/usr/bin/env node
+import { __require, optimizeCss, compile, version } from './chunk-YL27VW7G.mjs';
 import parse from 'mri';
 import watcher from '@parcel/watcher';
 import { scanDir, clearCache, scanFiles, IO, Parsing } from '@tailwindcss/oxide';
@@ -72,7 +73,7 @@ function convertNumber(value) {
   }
   {
     let valueAsNumber = Number(value);
-    if (!isNaN(valueAsNumber)) {
+    if (!Number.isNaN(valueAsNumber)) {
       return valueAsNumber;
     }
   }
@@ -110,7 +111,7 @@ var UI = {
   indent: 2
 };
 function header() {
-  return `${pc.italic(pc.bold(pc.blue("\u2248")))} tailwindcss ${pc.blue("v" + package_default.version)}`;
+  return `${pc.italic(pc.bold(pc.blue("\u2248")))} tailwindcss ${pc.blue(`v${version}`)}`;
 }
 function highlight(file) {
   return `${pc.dim(pc.blue("`"))}${pc.blue(file)}${pc.dim(pc.blue("`"))}`;
@@ -421,18 +422,11 @@ if (command) {
   });
   process.exit(1);
 }
-if (process.stdout.isTTY && !process.argv.slice(2).includes("-o")) {
+if (process.stdout.isTTY && !process.argv.slice(2).includes("-o") || shared["--help"]) {
   help({
     usage: ["tailwindcss [--input input.css] [--output output.css] [--watch] [options\u2026]"],
     options: { ...options(), ...sharedOptions }
   });
   process.exit(0);
 }
-if (shared["--help"]) {
-  help({
-    usage: [`tailwindcss ${command} [options]`],
-    options: { ...options(), ...sharedOptions }
-  });
-  process.exit(0);
-}
 handle(args(options()));

package/dist/lib.d.mts

@@ -1,7 +1,24 @@
+interface ClassMetadata {
+    modifiers: string[];
+}
+type ClassEntry = [string, ClassMetadata];
+interface SelectorOptions {
+    modifier?: string;
+    value?: string;
+}
+interface VariantEntry {
+    name: string;
+    isArbitrary: boolean;
+    values: string[];
+    hasDash: boolean;
+    selectors: (options: SelectorOptions) => string[];
+}
+
 declare class Theme {
     private values;
     constructor(values?: Map<string, string>);
     add(key: string, value: string): void;
+    keysInNamespaces(themeKeys: ThemeKey[]): string[];
     get(themeKeys: ThemeKey[]): string | null;
     entries(): IterableIterator<[string, string]>;
     clearNamespace(namespace: string): void;
@@ -10,7 +27,7 @@ declare class Theme {
     resolveWith(candidateValue: string, themeKeys: ThemeKey[], nestedKeys?: `--${string}`[]): [string, Record<string, string>] | null;
     namespace(namespace: string): Map<string | null, string>;
 }
-type ThemeKey = '--accent-color' | '--animate' | '--aspect-ratio' | '--backdrop-blur' | '--backdrop-brightness' | '--backdrop-contrast' | '--backdrop-grayscale' | '--backdrop-hue-rotate' | '--backdrop-invert' | '--backdrop-opacity' | '--backdrop-saturate' | '--backdrop-sepia' | '--background-color' | '--background-image' | '--blur' | '--border-color' | '--border-spacing' | '--border-width' | '--box-shadow-color' | '--breakpoint' | '--brightness' | '--caret-color' | '--color' | '--columns' | '--contrast' | '--cursor' | '--default-border-width' | '--divide-width' | '--divide-color' | '--drop-shadow' | '--fill' | '--flex-basis' | '--font-family' | '--font-size' | '--font-weight' | '--gap' | '--gradient-color-stop-positions' | '--grayscale' | '--grid-auto-columns' | '--grid-auto-rows' | '--grid-column' | '--grid-column-end' | '--grid-column-start' | '--grid-row' | '--grid-row-end' | '--grid-row-start' | '--grid-template-columns' | '--grid-template-rows' | '--height' | '--hue-rotate' | '--inset' | '--inset-shadow' | '--invert' | '--letter-spacing' | '--line-height' | '--line-clamp' | '--list-style-image' | '--list-style-type' | '--margin' | '--max-height' | '--max-width' | '--min-height' | '--min-width' | '--object-position' | '--opacity' | '--order' | '--outline-color' | '--outline-width' | '--outline-offset' | '--padding' | '--placeholder-color' | '--radius' | '--ring-color' | '--ring-offset-color' | '--ring-offset-width' | '--ring-width' | '--rotate' | '--saturate' | '--scale' | '--scroll-margin' | '--scroll-padding' | '--sepia' | '--shadow' | '--size' | '--skew' | '--space' | '--spacing' | '--stroke' | '--stroke-width' | '--text-color' | '--text-decoration-color' | '--text-decoration-thickness' | '--text-indent' | '--text-underline-offset' | '--transform-origin' | '--transition-delay' | '--transition-duration' | '--transition-property' | '--transition-timing-function' | '--translate' | '--width' | '--z-index';
+type ThemeKey = '--accent-color' | '--animate' | '--aspect-ratio' | '--backdrop-blur' | '--backdrop-brightness' | '--backdrop-contrast' | '--backdrop-grayscale' | '--backdrop-hue-rotate' | '--backdrop-invert' | '--backdrop-opacity' | '--backdrop-saturate' | '--backdrop-sepia' | '--background-color' | '--background-image' | '--blur' | '--border-color' | '--border-spacing' | '--border-width' | '--box-shadow-color' | '--breakpoint' | '--brightness' | '--caret-color' | '--color' | '--columns' | '--contrast' | '--cursor' | '--default-border-width' | '--default-ring-color' | '--default-ring-width' | '--divide-width' | '--divide-color' | '--drop-shadow' | '--fill' | '--flex-basis' | '--font-family' | '--font-size' | '--font-weight' | '--gap' | '--gradient-color-stop-positions' | '--grayscale' | '--grid-auto-columns' | '--grid-auto-rows' | '--grid-column' | '--grid-column-end' | '--grid-column-start' | '--grid-row' | '--grid-row-end' | '--grid-row-start' | '--grid-template-columns' | '--grid-template-rows' | '--height' | '--hue-rotate' | '--inset' | '--inset-shadow' | '--invert' | '--letter-spacing' | '--line-height' | '--line-clamp' | '--list-style-image' | '--list-style-type' | '--margin' | '--max-height' | '--max-width' | '--min-height' | '--min-width' | '--object-position' | '--opacity' | '--order' | '--outline-color' | '--outline-width' | '--outline-offset' | '--padding' | '--placeholder-color' | '--radius' | '--ring-color' | '--ring-offset-color' | '--ring-offset-width' | '--ring-width' | '--rotate' | '--saturate' | '--scale' | '--scroll-margin' | '--scroll-padding' | '--sepia' | '--shadow' | '--size' | '--skew' | '--space' | '--spacing' | '--stroke' | '--stroke-width' | '--text-color' | '--text-decoration-color' | '--text-decoration-thickness' | '--text-indent' | '--text-underline-offset' | '--transform-origin' | '--transition-delay' | '--transition-duration' | '--transition-property' | '--transition-timing-function' | '--translate' | '--width' | '--z-index';
 
 type Rule = {
     kind: 'rule';
@@ -54,6 +71,7 @@ type NamedUtilityValue = {
     /**
      * bg-red-500
      *    ^^^^^^^
+     *
      * w-1/2
      *   ^
      */
@@ -98,9 +116,7 @@ type Variant =
  * Arbitrary variants are variants that take a selector and generate a variant
  * on the fly.
  *
- * E.g.:
- *
- * - `[&_p]`
+ * E.g.: `[&_p]`
  */
 {
     kind: 'arbitrary';
@@ -110,9 +126,7 @@ type Variant =
 /**
  * Static variants are variants that don't take any arguments.
  *
- * E.g.:
- *
- * - `hover`
+ * E.g.: `hover`
  */
  | {
     kind: 'static';
@@ -120,18 +134,22 @@ type Variant =
     compounds: boolean;
 }
 /**
- * Functional variants are variants that take an argument. The argument is
+ * Functional variants are variants that can take an argument. The argument is
  * either a named variant value or an arbitrary variant value.
  *
  * E.g.:
  *
  * - `aria-disabled`
  * - `aria-[disabled]`
+ * - `@container-size`          -> @container, with named value `size`
+ * - `@container-[inline-size]` -> @container, with arbitrary variant value `inline-size`
+ * - `@container`               -> @container, with no value
  */
  | {
     kind: 'functional';
     root: string;
-    value: ArbitraryVariantValue | NamedVariantValue;
+    value: ArbitraryVariantValue | NamedVariantValue | null;
+    modifier: ArbitraryModifier | NamedModifier | null;
     compounds: boolean;
 }
 /**
@@ -150,19 +168,50 @@ type Variant =
     variant: Variant;
     compounds: boolean;
 };
-type Candidate = {
+type Candidate = 
+/**
+ * Arbitrary candidates are candidates that register utilities on the fly with
+ * a property and a value.
+ *
+ * E.g.:
+ *
+ * - `[color:red]`
+ * - `[color:red]/50`
+ * - `[color:red]/50!`
+ */
+{
     kind: 'arbitrary';
     property: string;
     value: string;
+    modifier: ArbitraryModifier | NamedModifier | null;
     variants: Variant[];
     important: boolean;
-} | {
+}
+/**
+ * Static candidates are candidates that don't take any arguments.
+ *
+ * E.g.:
+ *
+ * - `underline`
+ * - `flex`
+ */
+ | {
     kind: 'static';
     root: string;
     variants: Variant[];
     negative: boolean;
     important: boolean;
-} | {
+}
+/**
+ * Functional candidates are candidates that can take an argument.
+ *
+ * E.g.:
+ *
+ * - `bg-red-500`
+ * - `bg-[#0088cc]`
+ * - `w-1/2`
+ */
+ | {
     kind: 'functional';
     root: string;
     value: ArbitraryUtilityValue | NamedUtilityValue | null;
@@ -175,17 +224,31 @@ type Candidate = {
 type CompileFn<T extends Candidate['kind']> = (value: Extract<Candidate, {
     kind: T;
 }>) => AstNode[] | undefined;
+interface SuggestionGroup {
+    supportsNegative?: boolean;
+    values: (string | null)[];
+    modifiers: string[];
+}
 declare class Utilities {
     private utilities;
+    private completions;
     static(name: string, compileFn: CompileFn<'static'>): void;
     functional(name: string, compileFn: CompileFn<'functional'>): void;
+    arbitrary(compileFn: CompileFn<'arbitrary'>): void;
     has(name: string): boolean;
-    get(name: string): {
+    get(name: string | symbol): {
         kind: "arbitrary" | "static" | "functional";
         compileFn: CompileFn<any>;
     } | undefined;
     kind(name: string): "arbitrary" | "static" | "functional";
-    keys(): IterableIterator<string>;
+    getCompletions(name: string): SuggestionGroup[];
+    suggest(name: string, groups: () => SuggestionGroup[]): void;
+    keys(): IterableIterator<string | symbol>;
+    entries(): IterableIterator<[string | symbol, {
+        kind: "arbitrary" | "static" | "functional";
+        compileFn: CompileFn<any>;
+    }]>;
+    getArbitrary(): CompileFn<any>;
     private set;
 }
 
@@ -196,6 +259,7 @@ type CompareFn = (a: Variant, z: Variant) => number;
 declare class Variants {
     private compareFns;
     private variants;
+    private completions;
     /**
      * Registering a group of variants should result in the same sort number for
      * all the variants. This is to ensure that the variants are applied in the
@@ -218,11 +282,24 @@ declare class Variants {
     }): void;
     group(fn: () => void, compareFn?: CompareFn): void;
     has(name: string): boolean;
-    get(name: string): VariantFn<any> | undefined;
+    get(name: string): {
+        kind: "arbitrary" | "static" | "functional" | "compound";
+        order: number;
+        applyFn: VariantFn<any>;
+        compounds: boolean;
+    } | undefined;
     kind(name: string): "arbitrary" | "static" | "functional" | "compound";
     compounds(name: string): boolean;
+    suggest(name: string, suggestions: () => string[]): void;
+    getCompletions(name: string): string[];
     compare(a: Variant | null, z: Variant | null): number;
     keys(): IterableIterator<string>;
+    entries(): IterableIterator<[string, {
+        kind: "arbitrary" | "static" | "functional" | "compound";
+        order: number;
+        applyFn: VariantFn<any>;
+        compounds: boolean;
+    }]>;
     private set;
     private nextOrder;
 }
@@ -231,14 +308,17 @@ type DesignSystem = {
     theme: Theme;
     utilities: Utilities;
     variants: Variants;
+    candidatesToCss(classes: string[]): (string | null)[];
     getClassOrder(classes: string[]): [string, bigint | null][];
+    getClassList(): ClassEntry[];
+    getVariants(): VariantEntry[];
 };
 
+declare function compile(css: string, rawCandidates: string[]): string;
 declare function optimizeCss(input: string, { file, minify }?: {
     file?: string;
     minify?: boolean;
 }): string;
-declare function compile(css: string, rawCandidates: string[]): string;
-declare function loadDesignSystem(css: string): DesignSystem;
+declare function __unstable__loadDesignSystem(css: string): DesignSystem;
 
-export { compile, loadDesignSystem, optimizeCss };
+export { __unstable__loadDesignSystem, compile, optimizeCss };

package/dist/lib.d.ts

@@ -1,7 +1,24 @@
+interface ClassMetadata {
+    modifiers: string[];
+}
+type ClassEntry = [string, ClassMetadata];
+interface SelectorOptions {
+    modifier?: string;
+    value?: string;
+}
+interface VariantEntry {
+    name: string;
+    isArbitrary: boolean;
+    values: string[];
+    hasDash: boolean;
+    selectors: (options: SelectorOptions) => string[];
+}
+
 declare class Theme {
     private values;
     constructor(values?: Map<string, string>);
     add(key: string, value: string): void;
+    keysInNamespaces(themeKeys: ThemeKey[]): string[];
     get(themeKeys: ThemeKey[]): string | null;
     entries(): IterableIterator<[string, string]>;
     clearNamespace(namespace: string): void;
@@ -10,7 +27,7 @@ declare class Theme {
     resolveWith(candidateValue: string, themeKeys: ThemeKey[], nestedKeys?: `--${string}`[]): [string, Record<string, string>] | null;
     namespace(namespace: string): Map<string | null, string>;
 }
-type ThemeKey = '--accent-color' | '--animate' | '--aspect-ratio' | '--backdrop-blur' | '--backdrop-brightness' | '--backdrop-contrast' | '--backdrop-grayscale' | '--backdrop-hue-rotate' | '--backdrop-invert' | '--backdrop-opacity' | '--backdrop-saturate' | '--backdrop-sepia' | '--background-color' | '--background-image' | '--blur' | '--border-color' | '--border-spacing' | '--border-width' | '--box-shadow-color' | '--breakpoint' | '--brightness' | '--caret-color' | '--color' | '--columns' | '--contrast' | '--cursor' | '--default-border-width' | '--divide-width' | '--divide-color' | '--drop-shadow' | '--fill' | '--flex-basis' | '--font-family' | '--font-size' | '--font-weight' | '--gap' | '--gradient-color-stop-positions' | '--grayscale' | '--grid-auto-columns' | '--grid-auto-rows' | '--grid-column' | '--grid-column-end' | '--grid-column-start' | '--grid-row' | '--grid-row-end' | '--grid-row-start' | '--grid-template-columns' | '--grid-template-rows' | '--height' | '--hue-rotate' | '--inset' | '--inset-shadow' | '--invert' | '--letter-spacing' | '--line-height' | '--line-clamp' | '--list-style-image' | '--list-style-type' | '--margin' | '--max-height' | '--max-width' | '--min-height' | '--min-width' | '--object-position' | '--opacity' | '--order' | '--outline-color' | '--outline-width' | '--outline-offset' | '--padding' | '--placeholder-color' | '--radius' | '--ring-color' | '--ring-offset-color' | '--ring-offset-width' | '--ring-width' | '--rotate' | '--saturate' | '--scale' | '--scroll-margin' | '--scroll-padding' | '--sepia' | '--shadow' | '--size' | '--skew' | '--space' | '--spacing' | '--stroke' | '--stroke-width' | '--text-color' | '--text-decoration-color' | '--text-decoration-thickness' | '--text-indent' | '--text-underline-offset' | '--transform-origin' | '--transition-delay' | '--transition-duration' | '--transition-property' | '--transition-timing-function' | '--translate' | '--width' | '--z-index';
+type ThemeKey = '--accent-color' | '--animate' | '--aspect-ratio' | '--backdrop-blur' | '--backdrop-brightness' | '--backdrop-contrast' | '--backdrop-grayscale' | '--backdrop-hue-rotate' | '--backdrop-invert' | '--backdrop-opacity' | '--backdrop-saturate' | '--backdrop-sepia' | '--background-color' | '--background-image' | '--blur' | '--border-color' | '--border-spacing' | '--border-width' | '--box-shadow-color' | '--breakpoint' | '--brightness' | '--caret-color' | '--color' | '--columns' | '--contrast' | '--cursor' | '--default-border-width' | '--default-ring-color' | '--default-ring-width' | '--divide-width' | '--divide-color' | '--drop-shadow' | '--fill' | '--flex-basis' | '--font-family' | '--font-size' | '--font-weight' | '--gap' | '--gradient-color-stop-positions' | '--grayscale' | '--grid-auto-columns' | '--grid-auto-rows' | '--grid-column' | '--grid-column-end' | '--grid-column-start' | '--grid-row' | '--grid-row-end' | '--grid-row-start' | '--grid-template-columns' | '--grid-template-rows' | '--height' | '--hue-rotate' | '--inset' | '--inset-shadow' | '--invert' | '--letter-spacing' | '--line-height' | '--line-clamp' | '--list-style-image' | '--list-style-type' | '--margin' | '--max-height' | '--max-width' | '--min-height' | '--min-width' | '--object-position' | '--opacity' | '--order' | '--outline-color' | '--outline-width' | '--outline-offset' | '--padding' | '--placeholder-color' | '--radius' | '--ring-color' | '--ring-offset-color' | '--ring-offset-width' | '--ring-width' | '--rotate' | '--saturate' | '--scale' | '--scroll-margin' | '--scroll-padding' | '--sepia' | '--shadow' | '--size' | '--skew' | '--space' | '--spacing' | '--stroke' | '--stroke-width' | '--text-color' | '--text-decoration-color' | '--text-decoration-thickness' | '--text-indent' | '--text-underline-offset' | '--transform-origin' | '--transition-delay' | '--transition-duration' | '--transition-property' | '--transition-timing-function' | '--translate' | '--width' | '--z-index';
 
 type Rule = {
     kind: 'rule';
@@ -54,6 +71,7 @@ type NamedUtilityValue = {
     /**
      * bg-red-500
      *    ^^^^^^^
+     *
      * w-1/2
      *   ^
      */
@@ -98,9 +116,7 @@ type Variant =
  * Arbitrary variants are variants that take a selector and generate a variant
  * on the fly.
  *
- * E.g.:
- *
- * - `[&_p]`
+ * E.g.: `[&_p]`
  */
 {
     kind: 'arbitrary';
@@ -110,9 +126,7 @@ type Variant =
 /**
  * Static variants are variants that don't take any arguments.
  *
- * E.g.:
- *
- * - `hover`
+ * E.g.: `hover`
  */
  | {
     kind: 'static';
@@ -120,18 +134,22 @@ type Variant =
     compounds: boolean;
 }
 /**
- * Functional variants are variants that take an argument. The argument is
+ * Functional variants are variants that can take an argument. The argument is
  * either a named variant value or an arbitrary variant value.
  *
  * E.g.:
  *
  * - `aria-disabled`
  * - `aria-[disabled]`
+ * - `@container-size`          -> @container, with named value `size`
+ * - `@container-[inline-size]` -> @container, with arbitrary variant value `inline-size`
+ * - `@container`               -> @container, with no value
  */
  | {
     kind: 'functional';
     root: string;
-    value: ArbitraryVariantValue | NamedVariantValue;
+    value: ArbitraryVariantValue | NamedVariantValue | null;
+    modifier: ArbitraryModifier | NamedModifier | null;
     compounds: boolean;
 }
 /**
@@ -150,19 +168,50 @@ type Variant =
     variant: Variant;
     compounds: boolean;
 };
-type Candidate = {
+type Candidate = 
+/**
+ * Arbitrary candidates are candidates that register utilities on the fly with
+ * a property and a value.
+ *
+ * E.g.:
+ *
+ * - `[color:red]`
+ * - `[color:red]/50`
+ * - `[color:red]/50!`
+ */
+{
     kind: 'arbitrary';
     property: string;
     value: string;
+    modifier: ArbitraryModifier | NamedModifier | null;
     variants: Variant[];
     important: boolean;
-} | {
+}
+/**
+ * Static candidates are candidates that don't take any arguments.
+ *
+ * E.g.:
+ *
+ * - `underline`
+ * - `flex`
+ */
+ | {
     kind: 'static';
     root: string;
     variants: Variant[];
     negative: boolean;
     important: boolean;
-} | {
+}
+/**
+ * Functional candidates are candidates that can take an argument.
+ *
+ * E.g.:
+ *
+ * - `bg-red-500`
+ * - `bg-[#0088cc]`
+ * - `w-1/2`
+ */
+ | {
     kind: 'functional';
     root: string;
     value: ArbitraryUtilityValue | NamedUtilityValue | null;
@@ -175,17 +224,31 @@ type Candidate = {
 type CompileFn<T extends Candidate['kind']> = (value: Extract<Candidate, {
     kind: T;
 }>) => AstNode[] | undefined;
+interface SuggestionGroup {
+    supportsNegative?: boolean;
+    values: (string | null)[];
+    modifiers: string[];
+}
 declare class Utilities {
     private utilities;
+    private completions;
     static(name: string, compileFn: CompileFn<'static'>): void;
     functional(name: string, compileFn: CompileFn<'functional'>): void;
+    arbitrary(compileFn: CompileFn<'arbitrary'>): void;
     has(name: string): boolean;
-    get(name: string): {
+    get(name: string | symbol): {
         kind: "arbitrary" | "static" | "functional";
         compileFn: CompileFn<any>;
     } | undefined;
     kind(name: string): "arbitrary" | "static" | "functional";
-    keys(): IterableIterator<string>;
+    getCompletions(name: string): SuggestionGroup[];
+    suggest(name: string, groups: () => SuggestionGroup[]): void;
+    keys(): IterableIterator<string | symbol>;
+    entries(): IterableIterator<[string | symbol, {
+        kind: "arbitrary" | "static" | "functional";
+        compileFn: CompileFn<any>;
+    }]>;
+    getArbitrary(): CompileFn<any>;
     private set;
 }
 
@@ -196,6 +259,7 @@ type CompareFn = (a: Variant, z: Variant) => number;
 declare class Variants {
     private compareFns;
     private variants;
+    private completions;
     /**
      * Registering a group of variants should result in the same sort number for
      * all the variants. This is to ensure that the variants are applied in the
@@ -218,11 +282,24 @@ declare class Variants {
     }): void;
     group(fn: () => void, compareFn?: CompareFn): void;
     has(name: string): boolean;
-    get(name: string): VariantFn<any> | undefined;
+    get(name: string): {
+        kind: "arbitrary" | "static" | "functional" | "compound";
+        order: number;
+        applyFn: VariantFn<any>;
+        compounds: boolean;
+    } | undefined;
     kind(name: string): "arbitrary" | "static" | "functional" | "compound";
     compounds(name: string): boolean;
+    suggest(name: string, suggestions: () => string[]): void;
+    getCompletions(name: string): string[];
     compare(a: Variant | null, z: Variant | null): number;
     keys(): IterableIterator<string>;
+    entries(): IterableIterator<[string, {
+        kind: "arbitrary" | "static" | "functional" | "compound";
+        order: number;
+        applyFn: VariantFn<any>;
+        compounds: boolean;
+    }]>;
     private set;
     private nextOrder;
 }
@@ -231,14 +308,17 @@ type DesignSystem = {
     theme: Theme;
     utilities: Utilities;
     variants: Variants;
+    candidatesToCss(classes: string[]): (string | null)[];
     getClassOrder(classes: string[]): [string, bigint | null][];
+    getClassList(): ClassEntry[];
+    getVariants(): VariantEntry[];
 };
 
+declare function compile(css: string, rawCandidates: string[]): string;
 declare function optimizeCss(input: string, { file, minify }?: {
     file?: string;
     minify?: boolean;
 }): string;
-declare function compile(css: string, rawCandidates: string[]): string;
-declare function loadDesignSystem(css: string): DesignSystem;
+declare function __unstable__loadDesignSystem(css: string): DesignSystem;
 
-export { compile, loadDesignSystem, optimizeCss };
+export { __unstable__loadDesignSystem, compile, optimizeCss };