@birdycom/omniacss 0.11.0 → 0.11.1

package/scss/utilities/_writing_modes.scss

@@ -1,72 +1,72 @@
-// SCSS Document
-// File: src/scss/utilities/_writing_modes.scss
-// Description: Writing modes, direction, text orientation, unicode-bidi and logical inset/sizing utilities.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .write-*, .dir-*, .text-orient-*, .bidi-*, .start-* / .end-* / .inset-inline-* / .inset-block-*
-//          and .inline-size-* / .block-size-* classes.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
-// Note: logical margin/padding live in _spacing_margin.scss / _spacing_padding.scss (.m-inline-*, .p-block-start-*).
-//       The older .writingmode-* classes in _text.scss remain available.
-// Map: writing-mode -> direction -> text-orientation -> unicode-bidi -> logical inset -> logical sizing
-
-/* Writing mode */
-.write-horizontal { writing-mode: horizontal-tb; }
-.write-vertical-rl { writing-mode: vertical-rl; }
-.write-vertical-lr { writing-mode: vertical-lr; }
-.write-sideways-rl { writing-mode: sideways-rl; }
-.write-sideways-lr { writing-mode: sideways-lr; }
-
-/* Direction */
-.dir-ltr { direction: ltr; }
-.dir-rtl { direction: rtl; }
-
-/* Text orientation (vertical writing modes only) */
-.text-orient-mixed { text-orientation: mixed; }
-.text-orient-upright { text-orientation: upright; }
-.text-orient-sideways { text-orientation: sideways; }
-
-/* Unicode bidi */
-.bidi-normal { unicode-bidi: normal; }
-.bidi-embed { unicode-bidi: embed; }
-.bidi-isolate { unicode-bidi: isolate; }
-.bidi-override { unicode-bidi: bidi-override; }
-.bidi-isolate-override { unicode-bidi: isolate-override; }
-.bidi-plaintext { unicode-bidi: plaintext; }
-
-// ---------------------------------------------------------------------------
-// Logical inset — follows writing-mode and direction (start = left in LTR, right in RTL)
-// ---------------------------------------------------------------------------
-$_logical-inset: (
-  'auto': auto,
-  '0': 0,
-  '1': 0.25rem,
-  '2': 0.5rem,
-  '4': 1rem,
-  '8': 2rem,
-  'full': 100%
-);
-
-/* Logical inset */
-@each $key, $value in $_logical-inset {
-  .start-#{$key} { inset-inline-start: $value; }
-  .end-#{$key} { inset-inline-end: $value; }
-  .inset-inline-#{$key} { inset-inline: $value; }
-  .inset-block-#{$key} { inset-block: $value; }
-}
-
-/* Logical sizing — inline-size (width in horizontal-tb) and block-size (height in horizontal-tb) */
-.inline-size-auto { inline-size: auto; }
-.inline-size-full { inline-size: 100%; }
-.inline-size-fit { inline-size: fit-content; }
-.inline-size-min { inline-size: min-content; }
-.inline-size-max { inline-size: max-content; }
-.block-size-auto { block-size: auto; }
-.block-size-full { block-size: 100%; }
-.block-size-fit { block-size: fit-content; }
-.block-size-min { block-size: min-content; }
-.block-size-max { block-size: max-content; }
-.max-inline-size-prose { max-inline-size: 65ch; }
-.max-inline-size-full { max-inline-size: 100%; }
+// SCSS Document
+// File: src/scss/utilities/_writing_modes.scss
+// Description: Writing modes, direction, text orientation, unicode-bidi and logical inset/sizing utilities.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .write-*, .dir-*, .text-orient-*, .bidi-*, .start-* / .end-* / .inset-inline-* / .inset-block-*
+//          and .inline-size-* / .block-size-* classes.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
+// Note: logical margin/padding live in _spacing_margin.scss / _spacing_padding.scss (.m-inline-*, .p-block-start-*).
+//       The older .writingmode-* classes in _text.scss remain available.
+// Map: writing-mode -> direction -> text-orientation -> unicode-bidi -> logical inset -> logical sizing
+
+/* Writing mode */
+.write-horizontal { writing-mode: horizontal-tb; }
+.write-vertical-rl { writing-mode: vertical-rl; }
+.write-vertical-lr { writing-mode: vertical-lr; }
+.write-sideways-rl { writing-mode: sideways-rl; }
+.write-sideways-lr { writing-mode: sideways-lr; }
+
+/* Direction */
+.dir-ltr { direction: ltr; }
+.dir-rtl { direction: rtl; }
+
+/* Text orientation (vertical writing modes only) */
+.text-orient-mixed { text-orientation: mixed; }
+.text-orient-upright { text-orientation: upright; }
+.text-orient-sideways { text-orientation: sideways; }
+
+/* Unicode bidi */
+.bidi-normal { unicode-bidi: normal; }
+.bidi-embed { unicode-bidi: embed; }
+.bidi-isolate { unicode-bidi: isolate; }
+.bidi-override { unicode-bidi: bidi-override; }
+.bidi-isolate-override { unicode-bidi: isolate-override; }
+.bidi-plaintext { unicode-bidi: plaintext; }
+
+// ---------------------------------------------------------------------------
+// Logical inset — follows writing-mode and direction (start = left in LTR, right in RTL)
+// ---------------------------------------------------------------------------
+$_logical-inset: (
+  'auto': auto,
+  '0': 0,
+  '1': 0.25rem,
+  '2': 0.5rem,
+  '4': 1rem,
+  '8': 2rem,
+  'full': 100%
+);
+
+/* Logical inset */
+@each $key, $value in $_logical-inset {
+  .start-#{$key} { inset-inline-start: $value; }
+  .end-#{$key} { inset-inline-end: $value; }
+  .inset-inline-#{$key} { inset-inline: $value; }
+  .inset-block-#{$key} { inset-block: $value; }
+}
+
+/* Logical sizing — inline-size (width in horizontal-tb) and block-size (height in horizontal-tb) */
+.inline-size-auto { inline-size: auto; }
+.inline-size-full { inline-size: 100%; }
+.inline-size-fit { inline-size: fit-content; }
+.inline-size-min { inline-size: min-content; }
+.inline-size-max { inline-size: max-content; }
+.block-size-auto { block-size: auto; }
+.block-size-full { block-size: 100%; }
+.block-size-fit { block-size: fit-content; }
+.block-size-min { block-size: min-content; }
+.block-size-max { block-size: max-content; }
+.max-inline-size-prose { max-inline-size: 65ch; }
+.max-inline-size-full { max-inline-size: 100%; }

package/scss/variables/_hulp.scss

@@ -1,108 +1,108 @@
-// SCSS Document 
-// File: src/utilities/_hulp.scss
-// Description: CSS hulp class (demo helpers only — no global element/id rules: they would leak into every page)
-// Copyright: 2021-2023 Birdycom
-// Autor: Serge Cools
-// Version: 0.2.0
-// Framework: OmniaCSS
-// Properties: 
-// Values: 
-
-
-.wrapbox-1 {
-  width: 10em;
-  margin: 0.5em;
-  white-space: normal;
-  vertical-align: top;
-  display: inline-block;
-}
-.wrapbox-2 {
-  width: 40em;
-  margin: 0.5em;
-  white-space: normal;
-  vertical-align: top;
-  display: inline-block;
-}
-.narrow {
-  padding: 10px;
-  border: 1px solid;
-  width: 500px;
-  margin: 0 auto;
-  font-size: 20px;
-  line-height: 1.5;
-  letter-spacing: 1px;
-}
-
-/* hulp for writing mode  */
-
-
-/* Scoped (was a global th/td rule that leaked into every table): add .hulp-table to opt in. */
-.hulp-table th {
-  background-color: var(--oc-muted, var(--color-frostblue-60));
-}
-
-.hulp-table td, .hulp-table th {
-  border: 1px solid var(--oc-border-strong, var(--color-mistblue-80));
-  padding: 3px;
-}
-/* End hulp for writing mode  */
-
-/* hulp for aspect ratio */
-
-.output {
-  height: 300px;
-  overflow: hidden;
-  position: relative;
-  background-color: var(--background-primary);
-  overflow: hidden;
-  padding: 1em;
-}
-.output section {
-  height: 100%;
-  text-align: center;
-}
-/* End hulp for aspect ratio */
-
-/* hulp for alignment */
-.box {
-  padding: 0.5rem;
-  background: linear-gradient(-45deg, var(--color-vividblue-60), var(--color-mistblue-30));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.bg-stripes-sky{
-  background-color: oklch(from var(--color-skycyan-70) l c h / 0.1);
-  background-image: linear-gradient(135deg,oklch(from var(--color-skycyan-80) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-skycyan-80) l c h / 0.5) 0,oklch(from var(--color-skycyan-80) l c h / 0.5) 60%,transparent 0,transparent);
-  background-size: 7.07px 7.07px;
-}
-
-.bg-stripes-fuchsia {
-  background-color: oklch(from var(--color-violet-60) l c h / 0.1);
-  background-image: linear-gradient(135deg,oklch(from var(--color-violet-70) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-violet-70) l c h / 0.5) 0,oklch(from var(--color-violet-70) l c h / 0.5) 60%,transparent 0,transparent);
-  background-size: 7.07px 7.07px;
-}
-
-.bg-stripes-pink {
-  background-color: oklch(from var(--color-purple-2) l c h / 0.1);
-  background-image: linear-gradient(135deg,oklch(from var(--color-purple-10) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-purple-10) l c h / 0.5) 0,oklch(from var(--color-purple-10) l c h / 0.5) 60%,transparent 0,transparent);
-  background-size: 7.07px 7.07px;
-}
-
-.bg-stripes-purple {
-    background-color: oklch(from var(--color-indigo-2) l c h / 0.1);
-    background-image: linear-gradient(135deg,oklch(from var(--color-indigo-10) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-indigo-10) l c h / 0.5) 0,oklch(from var(--color-indigo-10) l c h / 0.5) 60%,transparent 0,transparent);
-    background-size: 7.07px 7.07px;
-}
-
-.leading-6 {
-  line-height: 1.5rem;
-}
-
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
-/* .shadow-md / .shadow-lg live in utilities/_effects_advanced.scss (light-dark aware) */
-
+// SCSS Document 
+// File: src/utilities/_hulp.scss
+// Description: CSS hulp class (demo helpers only — no global element/id rules: they would leak into every page)
+// Copyright: 2021-2023 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: 
+// Values: 
+
+
+.wrapbox-1 {
+  width: 10em;
+  margin: 0.5em;
+  white-space: normal;
+  vertical-align: top;
+  display: inline-block;
+}
+.wrapbox-2 {
+  width: 40em;
+  margin: 0.5em;
+  white-space: normal;
+  vertical-align: top;
+  display: inline-block;
+}
+.narrow {
+  padding: 10px;
+  border: 1px solid;
+  width: 500px;
+  margin: 0 auto;
+  font-size: 20px;
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+
+/* hulp for writing mode  */
+
+
+/* Scoped (was a global th/td rule that leaked into every table): add .hulp-table to opt in. */
+.hulp-table th {
+  background-color: var(--oc-muted, var(--color-frostblue-60));
+}
+
+.hulp-table td, .hulp-table th {
+  border: 1px solid var(--oc-border-strong, var(--color-mistblue-80));
+  padding: 3px;
+}
+/* End hulp for writing mode  */
+
+/* hulp for aspect ratio */
+
+.output {
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--background-primary);
+  overflow: hidden;
+  padding: 1em;
+}
+.output section {
+  height: 100%;
+  text-align: center;
+}
+/* End hulp for aspect ratio */
+
+/* hulp for alignment */
+.box {
+  padding: 0.5rem;
+  background: linear-gradient(-45deg, var(--color-vividblue-60), var(--color-mistblue-30));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bg-stripes-sky{
+  background-color: oklch(from var(--color-skycyan-70) l c h / 0.1);
+  background-image: linear-gradient(135deg,oklch(from var(--color-skycyan-80) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-skycyan-80) l c h / 0.5) 0,oklch(from var(--color-skycyan-80) l c h / 0.5) 60%,transparent 0,transparent);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-fuchsia {
+  background-color: oklch(from var(--color-violet-60) l c h / 0.1);
+  background-image: linear-gradient(135deg,oklch(from var(--color-violet-70) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-violet-70) l c h / 0.5) 0,oklch(from var(--color-violet-70) l c h / 0.5) 60%,transparent 0,transparent);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-pink {
+  background-color: oklch(from var(--color-purple-2) l c h / 0.1);
+  background-image: linear-gradient(135deg,oklch(from var(--color-purple-10) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-purple-10) l c h / 0.5) 0,oklch(from var(--color-purple-10) l c h / 0.5) 60%,transparent 0,transparent);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-purple {
+    background-color: oklch(from var(--color-indigo-2) l c h / 0.1);
+    background-image: linear-gradient(135deg,oklch(from var(--color-indigo-10) l c h / 0.5) 10%,transparent 0,transparent 50%,oklch(from var(--color-indigo-10) l c h / 0.5) 0,oklch(from var(--color-indigo-10) l c h / 0.5) 60%,transparent 0,transparent);
+    background-size: 7.07px 7.07px;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+/* .shadow-md / .shadow-lg live in utilities/_effects_advanced.scss (light-dark aware) */
+
 /* End hulp for alignment */

package/scss/variables/_variables_effects.scss

@@ -1,109 +1,109 @@
-// SCSS Document 
-// File: src/scss/variables/_variables_effects.scss
-// Description: Default string items for using in the CSS properties 
-// Copyright: 2021-2023 Birdycom
-// Autor: Serge Cools
-// Version: 0.2.0
-// Framework: OmniaCSS
-// Variables and strings: 
-
-///
-/// Below you will find the list of all strings and arrays that we will use within our framework - file variables_effects.
-/// @group variableseffects
-///
-
-// Default Pseudo-classes
-///
-/// The different variableseffects: none, underline, overline & line-through
-/// @group variableseffects
-///
-/// @name opacity
-///
-/// @since 1.0.0
-/// @author Serge Cools
-///
-///
-$opacity: (
-  "opacity-0": (0), // 0
-  "opacity-5": (0.05), // 5%
-  "opacity-10": (0.1), // 10%
-  "opacity-20": (0.2), // 20%
-  "opacity-25": (0.25), // 25%
-  "opacity-30": (0.3), // 30%
-  "opacity-40": (0.4), // 40%
-  "opacity-50": (0.5), // 50%
-  "opacity-60": (0.6), // 60%
-  "opacity-70": (0.7), // 70%
-  "opacity-75": (0.75), // 75%
-  "opacity-80": (0.8), // 80%
-  "opacity-90": (0.9), // 90%  
-  "opacity-100": (1),// 100%
-);
-// end default opacity
-
-// Default OpacityColor
-///
-/// The different variableseffects: color opacity
-/// @group variableseffects
-///
-/// @name opacitycolor
-///
-/// @since 1.0.0
-/// @author Serge Cools
-///
-///
-$opacitycolor: (
-  "-2": (2), // 2%
-  "-10": (10), // 10%
-  "-20": (20), // 20%
-  "-30": (30), // 30%
-  "-40": (40), // 40%
-  "-50": (50), // 50%
-  "-60": (60), // 60%
-  "-70": (70), // 70%
-  "-80": (80), // 80%
-  "-90": (90), // 90%  
-  "-95": (95), // 95%
-  "-100": (100),
-);
-// end default opacitycolor
-
-/// Color-mix steps (percent of color, rest transparent). Used by _colors_mix.scss.
-/// @name color-mix-steps
-$color-mix-steps: (0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
-
-// Default percent
-///
-/// The different variableseffects: 
-/// @group variableseffects
-///
-/// @name percent
-///
-/// @since 1.0.0
-/// @author Serge Cools
-///
-///
-$percent: (
-  //  "-5": (005), // 5%
-  "-10": (10%), // 10%
-  "-20": (20%), // 20%
-  "-30": (30%), // 30%
-  "-40": (40%), // 40%
-  "-50": (50%), // 50%
-  "-60": (60%), // 60%
-  "-70": (70%), // 70%
-  "-80": (80%), // 80%
-  "-90": (90%), // 90%  
-  "-100": (100%), // 100%
-  "-n10": (-10%), // 10%
-  "-n20": (-20%), // 20%
-  "-n30": (-30%), // 30%
-  "-n40": (-40%), // 40%
-  "-n50": (-50%), // 50%
-  "-n60": (-60%), // 60%
-  "-n70": (-70%), // 70%
-  "-n80": (-80%), // 80%
-  "-n90": (-90%), // 90%  
-  "-n100": (-100%), // 100%  
-);
+// SCSS Document 
+// File: src/scss/variables/_variables_effects.scss
+// Description: Default string items for using in the CSS properties 
+// Copyright: 2021-2023 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Variables and strings: 
+
+///
+/// Below you will find the list of all strings and arrays that we will use within our framework - file variables_effects.
+/// @group variableseffects
+///
+
+// Default Pseudo-classes
+///
+/// The different variableseffects: none, underline, overline & line-through
+/// @group variableseffects
+///
+/// @name opacity
+///
+/// @since 1.0.0
+/// @author Serge Cools
+///
+///
+$opacity: (
+  "opacity-0": (0), // 0
+  "opacity-5": (0.05), // 5%
+  "opacity-10": (0.1), // 10%
+  "opacity-20": (0.2), // 20%
+  "opacity-25": (0.25), // 25%
+  "opacity-30": (0.3), // 30%
+  "opacity-40": (0.4), // 40%
+  "opacity-50": (0.5), // 50%
+  "opacity-60": (0.6), // 60%
+  "opacity-70": (0.7), // 70%
+  "opacity-75": (0.75), // 75%
+  "opacity-80": (0.8), // 80%
+  "opacity-90": (0.9), // 90%  
+  "opacity-100": (1),// 100%
+);
+// end default opacity
+
+// Default OpacityColor
+///
+/// The different variableseffects: color opacity
+/// @group variableseffects
+///
+/// @name opacitycolor
+///
+/// @since 1.0.0
+/// @author Serge Cools
+///
+///
+$opacitycolor: (
+  "-2": (2), // 2%
+  "-10": (10), // 10%
+  "-20": (20), // 20%
+  "-30": (30), // 30%
+  "-40": (40), // 40%
+  "-50": (50), // 50%
+  "-60": (60), // 60%
+  "-70": (70), // 70%
+  "-80": (80), // 80%
+  "-90": (90), // 90%  
+  "-95": (95), // 95%
+  "-100": (100),
+);
+// end default opacitycolor
+
+/// Color-mix steps (percent of color, rest transparent). Used by _colors_mix.scss.
+/// @name color-mix-steps
+$color-mix-steps: (0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
+
+// Default percent
+///
+/// The different variableseffects: 
+/// @group variableseffects
+///
+/// @name percent
+///
+/// @since 1.0.0
+/// @author Serge Cools
+///
+///
+$percent: (
+  //  "-5": (005), // 5%
+  "-10": (10%), // 10%
+  "-20": (20%), // 20%
+  "-30": (30%), // 30%
+  "-40": (40%), // 40%
+  "-50": (50%), // 50%
+  "-60": (60%), // 60%
+  "-70": (70%), // 70%
+  "-80": (80%), // 80%
+  "-90": (90%), // 90%  
+  "-100": (100%), // 100%
+  "-n10": (-10%), // 10%
+  "-n20": (-20%), // 20%
+  "-n30": (-30%), // 30%
+  "-n40": (-40%), // 40%
+  "-n50": (-50%), // 50%
+  "-n60": (-60%), // 60%
+  "-n70": (-70%), // 70%
+  "-n80": (-80%), // 80%
+  "-n90": (-90%), // 90%  
+  "-n100": (-100%), // 100%  
+);
 // end default percent

package/src/postcss.mjs

@@ -1,43 +1,43 @@
-// File: packages/core/src/postcss.mjs
-// PostCSS plugin: replaces `@omnia;` (or `@omnia utilities;`) in your CSS with the OmniaCSS classes your
-// project uses. Works in every PostCSS pipeline (Vite, Laravel Vite, Next.js, Astro, webpack …).
-//
-//   // postcss.config.js
-//   import omniacss from "@birdycom/omniacss/postcss";
-//   export default { plugins: [omniacss({ content: ["resources/**/*.blade.php", "resources/js/**/*.{vue,tsx}"] })] };
-//
-//   /* app.css */
-//   @omnia;
-//
-// Author: Serge Cools | Framework: OmniaCSS
-
-import path from "node:path";
-import postcss from "postcss";
-import { buildCss } from "./engine.mjs";
-
-/**
- * @param {{ content: string[], layer?: string|false, keep?: string[], cwd?: string }} options
- */
-export default function omniacss(options = {}) {
-  return {
-    postcssPlugin: "omniacss",
-    async Once(root, { result }) {
-      const directives = [];
-      root.walkAtRules("omnia", (at) => directives.push(at));
-      if (!directives.length) return;
-
-      const cwd = options.cwd || process.cwd();
-      const { css, files } = await buildCss({ content: options.content, cwd, layer: options.layer ?? "omnia", keep: options.keep });
-      const generated = postcss.parse(css, { from: undefined });
-
-      directives[0].replaceWith(generated.nodes);
-      directives.slice(1).forEach((at) => at.remove());
-
-      // Let Vite & co. rebuild when a content file changes.
-      for (const file of files) {
-        result.messages.push({ type: "dependency", plugin: "omniacss", file: path.resolve(file), parent: result.opts.from });
-      }
-    },
-  };
-}
-omniacss.postcss = true;
+// File: packages/core/src/postcss.mjs
+// PostCSS plugin: replaces `@omnia;` (or `@omnia utilities;`) in your CSS with the OmniaCSS classes your
+// project uses. Works in every PostCSS pipeline (Vite, Laravel Vite, Next.js, Astro, webpack …).
+//
+//   // postcss.config.js
+//   import omniacss from "@birdycom/omniacss/postcss";
+//   export default { plugins: [omniacss({ content: ["resources/**/*.blade.php", "resources/js/**/*.{vue,tsx}"] })] };
+//
+//   /* app.css */
+//   @omnia;
+//
+// Author: Serge Cools | Framework: OmniaCSS
+
+import path from "node:path";
+import postcss from "postcss";
+import { buildCss } from "./engine.mjs";
+
+/**
+ * @param {{ content: string[], layer?: string|false, keep?: string[], cwd?: string }} options
+ */
+export default function omniacss(options = {}) {
+  return {
+    postcssPlugin: "omniacss",
+    async Once(root, { result }) {
+      const directives = [];
+      root.walkAtRules("omnia", (at) => directives.push(at));
+      if (!directives.length) return;
+
+      const cwd = options.cwd || process.cwd();
+      const { css, files } = await buildCss({ content: options.content, cwd, layer: options.layer ?? "omnia", keep: options.keep });
+      const generated = postcss.parse(css, { from: undefined });
+
+      directives[0].replaceWith(generated.nodes);
+      directives.slice(1).forEach((at) => at.remove());
+
+      // Let Vite & co. rebuild when a content file changes.
+      for (const file of files) {
+        result.messages.push({ type: "dependency", plugin: "omniacss", file: path.resolve(file), parent: result.opts.from });
+      }
+    },
+  };
+}
+omniacss.postcss = true;