frutjam 2.0.1 → 2.0.2

package/dist/plugin.js

@@ -1,4 +1,4 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | MIT License | https://frutjam.com */
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | MIT License | https://frutjam.com */
 
 // Tailwind v4 plugin.withOptions implementation
 const plugin = {
@@ -67,12 +67,59 @@ function sortUtils(obj) {
   )
 }
 
-// Recursively remap :root keys to a custom selector
+// Split a comma-separated selector list by top-level commas (ignores commas inside parentheses)
+function splitTopLevelCommas(str) {
+  const parts = []
+  let depth = 0, start = 0
+  for (let i = 0; i < str.length; i++) {
+    if (str[i] === '(') depth++
+    else if (str[i] === ')') depth--
+    else if (str[i] === ',' && depth === 0) {
+      parts.push(str.slice(start, i))
+      start = i + 1
+    }
+  }
+  parts.push(str.slice(start))
+  return parts
+}
+
+// Scope one part of a comma-separated selector list to rootSelector.
+// Returns an array of replacement selectors.
+// [data-theme] selectors become compound with rootSelector so theme variables
+// only apply when data-theme is set directly on the root element — no ancestor
+// inheritance, which would break the isolation guarantee of the root option.
+function scopeThemePart(part, rootSelector) {
+  const t = part.trimStart()
+  const lead = part.slice(0, part.length - t.length)
+  if (t.startsWith(rootSelector)) return [part]
+  if (t.startsWith(':is([data-theme')) {
+    const values = []
+    const re = /\[data-theme=["']([^"']+)["']\]/g
+    let m
+    while ((m = re.exec(t)) !== null) values.push(m[1])
+    return values.map(function(v) { return lead + rootSelector + '[data-theme="' + v + '"]' })
+  }
+  if (/^\[data-theme=/.test(t)) {
+    const m = t.match(/^\[data-theme=["']([^"']+)["']\]/)
+    if (m) return [lead + rootSelector + '[data-theme="' + m[1] + '"]']
+  }
+  if (t.startsWith('[data-theme]')) {
+    return [lead + rootSelector + '[data-theme]']
+  }
+  return [part]
+}
+
+// Recursively remap :root and scope [data-theme] selectors to a custom root selector
 function remapRoot(obj, rootSelector) {
   if (!rootSelector || rootSelector === ":root") return obj
   return Object.fromEntries(
     Object.entries(obj).map(([k, v]) => {
-      const newKey = k.replace(/:root\b/g, rootSelector)
+      let newKey = k.replace(/:root\b/g, rootSelector)
+      if (!newKey.startsWith('@')) {
+        newKey = splitTopLevelCommas(newKey).flatMap(function(part) {
+          return scopeThemePart(part, rootSelector)
+        }).join(',')
+      }
       const newVal = (v && typeof v === "object") ? remapRoot(v, rootSelector) : v
       return [newKey, newVal]
     })
@@ -103,7 +150,7 @@ export default plugin.withOptions(
     if (logs) {
       const d = "\x1b[2m", r = "\x1b[0m"
       const badge = "\x1b[46m\x1b[30m frutjam \x1b[0m"
-      console.log("\n" + badge + "  " + d + "v2.0.1" + r + "\n")
+      console.log("\n" + badge + "  " + d + "v2.0.2" + r + "\n")
     }
 
     // Base
@@ -112,7 +159,7 @@ export default plugin.withOptions(
     // Themes
     const activeThemes = Array.isArray(themes) ? themes : [themes]
     for (const [name, styles] of Object.entries(THEMES)) {
-      if (activeThemes.includes(name)) addBase(styles)
+      if (activeThemes.includes(name)) addBase(remapRoot(styles, root))
     }
 
     // Components — class selectors via addUtilities (enables lg:/hover:/etc. variants),

package/dist/themes/darkberry.css

@@ -1,2 +1,2 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
 @layer theme{:is([data-theme=darkberry],[data-theme=dark]){--scheme-color:dark;--border-radius:0.25rem;--color-base:oklch(10.889% 0.00301 17.398);--color-on-base:oklch(98% 0.01 270);--color-neutral:oklch(85% 0 0);--color-on-neutral:oklch(20% 0 0);--color-primary:oklch(66.385% 0.18368 285.592);--color-on-primary:oklch(10% 0.01 270);--color-secondary:oklch(65% 0.18 220);--color-on-secondary:oklch(10% 0.01 220);--color-accent:oklch(75% 0.18 50);--color-on-accent:oklch(10% 0.01 50);--color-info:oklch(91.67% .077 205.04);--color-on-info:oklch(10% 0.01 250);--color-success:oklch(65% 0.18 140);--color-on-success:oklch(10% 0.01 140);--color-warning:oklch(75% 0.20 85);--color-on-warning:oklch(10% 0.01 85);--color-error:oklch(60% 0.22 30);--color-on-error:oklch(10% 0.01 30)}}

package/dist/themes/snowberry.css

@@ -1,2 +1,2 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
 @layer theme{:is([data-theme=snowberry],[data-theme=light]),:root:not([data-theme]){--scheme-color:light;--border-radius:0.25rem;--color-base:oklch(1 0 0);--color-on-base:oklch(0.22 0 0);--color-neutral:oklch(0.15 0 0);--color-on-neutral:oklch(1 0 0);--color-primary:oklch(51.1% 0.262 276.966);--color-on-primary:oklch(96.2% 0.018 272.314);--color-secondary:oklch(0.591 0.293 322.896);--color-on-secondary:oklch(1 0 0);--color-accent:oklch(0.541 0.281 293.009);--color-on-accent:oklch(1 0 0);--color-info:oklch(0.685 0.169 237.323);--color-on-info:oklch(0.15 0 0);--color-success:oklch(0.792 0.209 151.711);--color-on-success:oklch(0.15 0 0);--color-warning:oklch(0.852 0.199 91.936);--color-on-warning:oklch(0.15 0 0);--color-error:oklch(0.577 0.245 27.325);--color-on-error:oklch(1 0 0)}}

package/dist/utilities/headings.css

@@ -1,2 +1,2 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
-/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */.heading-2xl{--heading-size:1rem;--heading-size:1.5rem}.heading-2xl,.heading-3xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-3xl{--heading-size:1rem;--heading-size:1.875rem}.heading-4xl{--heading-size:1rem;--heading-size:2.25rem}.heading-4xl,.heading-5xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-5xl{--heading-size:1rem;--heading-size:3rem}.heading-6xl{--heading-size:1rem;--heading-size:3.75rem}.heading-6xl,.heading-7xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-7xl{--heading-size:1rem;--heading-size:4.5rem}.heading-8xl{--heading-size:1rem;--heading-size:6rem}.heading-8xl,.heading-9xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-9xl{--heading-size:1rem;--heading-size:8rem}.heading-lg{--heading-size:1rem;--heading-size:1.125rem}.heading-lg,.heading-md{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-md{--heading-size:1rem}.heading-sm{--heading-size:1rem;--heading-size:0.875rem}.heading-sm,.heading-xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-xl{--heading-size:1rem;--heading-size:1.25rem}.heading-xs{--heading-size:1rem;--heading-size:0.75rem}.heading,.heading-xs{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading{--heading-size:1rem}
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.heading-2xl{--heading-size:1rem;--heading-size:1.5rem}.heading-2xl,.heading-3xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-3xl{--heading-size:1rem;--heading-size:1.875rem}.heading-4xl{--heading-size:1rem;--heading-size:2.25rem}.heading-4xl,.heading-5xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-5xl{--heading-size:1rem;--heading-size:3rem}.heading-6xl{--heading-size:1rem;--heading-size:3.75rem}.heading-6xl,.heading-7xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-7xl{--heading-size:1rem;--heading-size:4.5rem}.heading-8xl{--heading-size:1rem;--heading-size:6rem}.heading-8xl,.heading-9xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-9xl{--heading-size:1rem;--heading-size:8rem}.heading-lg{--heading-size:1rem;--heading-size:1.125rem}.heading-lg,.heading-md{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-md{--heading-size:1rem}.heading-sm{--heading-size:1rem;--heading-size:0.875rem}.heading-sm,.heading-xl{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading-xl{--heading-size:1rem;--heading-size:1.25rem}.heading-xs{--heading-size:1rem;--heading-size:0.75rem}.heading,.heading-xs{color:var(--color-on-base);font-weight:700;text-wrap-style:balance;font-size:var(--heading-size);line-height:1.15}.heading{--heading-size:1rem}

package/dist/utilities/para.css

@@ -1,2 +1,2 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
-/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */.para-2xl{font-size:var(--text-base);font-size:var(--text-2xl)}.para-2xl,.para-3xl{text-wrap-style:pretty;line-height:1.6}.para-3xl{font-size:var(--text-base);font-size:var(--text-3xl)}.para-4xl{font-size:var(--text-base);font-size:var(--text-4xl)}.para-4xl,.para-5xl{text-wrap-style:pretty;line-height:1.6}.para-5xl{font-size:var(--text-base);font-size:var(--text-5xl)}.para-6xl{font-size:var(--text-base);font-size:var(--text-6xl)}.para-6xl,.para-7xl{text-wrap-style:pretty;line-height:1.6}.para-7xl{font-size:var(--text-base);font-size:var(--text-7xl)}.para-8xl{font-size:var(--text-base);font-size:var(--text-8xl)}.para-8xl,.para-9xl{text-wrap-style:pretty;line-height:1.6}.para-9xl{font-size:var(--text-base);font-size:var(--text-9xl)}.para-lg{font-size:var(--text-base);font-size:var(--text-lg)}.para-lg,.para-md{text-wrap-style:pretty;line-height:1.6}.para-md{font-size:var(--text-base)}.para-sm{font-size:var(--text-base);font-size:var(--text-sm)}.para-sm,.para-xl{text-wrap-style:pretty;line-height:1.6}.para-xl{font-size:var(--text-base);font-size:var(--text-xl)}.para-xs{font-size:var(--text-base);font-size:var(--text-xs)}.para,.para-xs{text-wrap-style:pretty;line-height:1.6}.para{font-size:var(--text-base)}
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.para-2xl{font-size:var(--text-base);font-size:var(--text-2xl)}.para-2xl,.para-3xl{text-wrap-style:pretty;line-height:1.6}.para-3xl{font-size:var(--text-base);font-size:var(--text-3xl)}.para-4xl{font-size:var(--text-base);font-size:var(--text-4xl)}.para-4xl,.para-5xl{text-wrap-style:pretty;line-height:1.6}.para-5xl{font-size:var(--text-base);font-size:var(--text-5xl)}.para-6xl{font-size:var(--text-base);font-size:var(--text-6xl)}.para-6xl,.para-7xl{text-wrap-style:pretty;line-height:1.6}.para-7xl{font-size:var(--text-base);font-size:var(--text-7xl)}.para-8xl{font-size:var(--text-base);font-size:var(--text-8xl)}.para-8xl,.para-9xl{text-wrap-style:pretty;line-height:1.6}.para-9xl{font-size:var(--text-base);font-size:var(--text-9xl)}.para-lg{font-size:var(--text-base);font-size:var(--text-lg)}.para-lg,.para-md{text-wrap-style:pretty;line-height:1.6}.para-md{font-size:var(--text-base)}.para-sm{font-size:var(--text-base);font-size:var(--text-sm)}.para-sm,.para-xl{text-wrap-style:pretty;line-height:1.6}.para-xl{font-size:var(--text-base);font-size:var(--text-xl)}.para-xs{font-size:var(--text-base);font-size:var(--text-xs)}.para,.para-xs{text-wrap-style:pretty;line-height:1.6}.para{font-size:var(--text-base)}

package/dist/utilities/typography.css

@@ -1,2 +1,2 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
 .prose-frutjam{--tw-prose-body:var(--color-body);--tw-prose-headings:var(--color-on-base);--tw-prose-lead:var(--color-on-neutral);--tw-prose-bold:var(--color-on-base);--tw-prose-links:var(--color-primary);--tw-prose-counters:var(--color-neutral);--tw-prose-bullets:var(--color-neutral);--tw-prose-hr:var(--color-base-soft);--tw-prose-quotes:var(--color-on-base);--tw-prose-quote-borders:var(--color-primary);--tw-prose-code:var(--color-on-base);--tw-prose-pre-code:var(--color-on-base);--tw-prose-pre-bg:var(--color-base-soft);--tw-prose-th-borders:var(--color-base-soft);--tw-prose-td-borders:var(--color-base-soft);--tw-prose-captions:var(--color-on-neutral);--tw-prose-kbd:var(--color-body);--tw-prose-invert-body:var(--color-on-neutral);--tw-prose-invert-headings:var(--color-on-base);--tw-prose-invert-links:var(--color-primary)}

package/dist/utilities/wrapper.css

@@ -1,2 +1,2 @@
-/*! frutjam v2.0.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
-/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */.wrapper-full{width:100%;max-width:100%;box-sizing:border-box;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-2xl{box-sizing:border-box;max-width:1536px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-lg{box-sizing:border-box;max-width:1024px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-md{box-sizing:border-box;max-width:768px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-sm{box-sizing:border-box;max-width:640px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-xl{box-sizing:border-box;max-width:1280px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-xs{box-sizing:border-box;max-width:320px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper{box-sizing:border-box;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}
+/*! frutjam v2.0.2 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */.wrapper-full{width:100%;max-width:100%;box-sizing:border-box;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-2xl{box-sizing:border-box;max-width:1536px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-lg{box-sizing:border-box;max-width:1024px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-md{box-sizing:border-box;max-width:768px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-sm{box-sizing:border-box;max-width:640px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-xl{box-sizing:border-box;max-width:1280px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-xs{box-sizing:border-box;max-width:320px;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper{box-sizing:border-box;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}

package/index.js

@@ -133,6 +133,41 @@ const BASE_CORE = [
 
 // ── Build ────────────────────────────────────────────────────────────────────
 
+// Scope one selector part (already split from a comma list) to rootSelector.
+// Returns an array of replacement selectors.
+// [data-theme] selectors become compound with rootSelector so theme variables
+// only apply when data-theme is set directly on the root element — no ancestor
+// inheritance, which would break the isolation guarantee of the root option.
+function scopeThemeSelector(sel, rootSelector) {
+  const t = sel.trimStart()
+  const lead = sel.slice(0, sel.length - t.length)
+
+  // Already remapped from :root (e.g. rootSelector:not([data-theme])) — keep as-is
+  if (t.startsWith(rootSelector)) return [sel]
+
+  // :is([data-theme="x"], [data-theme="y"]) — flatten into individual compound selectors
+  if (t.startsWith(":is([data-theme")) {
+    const values = []
+    const re = /\[data-theme=["']([^"']+)["']\]/g
+    let m
+    while ((m = re.exec(t)) !== null) values.push(m[1])
+    return values.map(v => `${lead}${rootSelector}[data-theme="${v}"]`)
+  }
+
+  // [data-theme="x"] — compound with rootSelector
+  if (/^\[data-theme=/.test(t)) {
+    const m = t.match(/^\[data-theme=["']([^"']+)["']\]/)
+    if (m) return [`${lead}${rootSelector}[data-theme="${m[1]}"]`]
+  }
+
+  // [data-theme] without value (base tokens) — compound with rootSelector
+  if (t.startsWith("[data-theme]")) {
+    return [`${lead}${rootSelector}[data-theme]`]
+  }
+
+  return [sel]
+}
+
 function buildCSS(prefix, themes, reset, rootSelector, include, exclude) {
   // Resolve which components+utilities to include
   let keys = Object.keys(REGISTRY)
@@ -169,6 +204,14 @@ function buildCSS(prefix, themes, reset, rootSelector, include, exclude) {
   const customThemes = buildCustomThemes(themes)
   if (customThemes) css += "\n\n" + customThemes
 
+  if (rootSelector !== ":root") {
+    const ast = postcss.parse(css)
+    ast.walkRules(rule => {
+      rule.selectors = rule.selectors.flatMap(sel => scopeThemeSelector(sel, rootSelector))
+    })
+    css = ast.toString()
+  }
+
   return { css, utilMap }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A utility-first CSS UI Library for Tailwind CSS",
   "type": "module",
   "exports": {
@@ -90,12 +90,12 @@
     }
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.2.4",
+    "@tailwindcss/postcss": "^4.3.0",
     "autoprefixer": "^10.5.0",
-    "cssnano": "^8.0.0",
+    "cssnano": "^8.0.1",
     "postcss": "^8.5.14",
     "postcss-js": "^5.1.0",
     "rimraf": "^6.1.3",
-    "tailwindcss": "^4.2.4"
+    "tailwindcss": "^4.3.0"
   }
 }