From 8fa25352ca7da9143d1ace31c0da1b49545f0573 Mon Sep 17 00:00:00 2001
From: Matthew Dean <matthew-dean@users.noreply.github.com>
Date: Wed, 2 Sep 2026 13:48:38 -0700
Subject: [PATCH 1/2] feat: gate compile options by Less version

Render the Options panel from a per-version descriptor list and send only
the options valid for the active version, under that version's name:

- < 3.7.0: strictMath switch; >= 3.7.0: math select (less.js 76c10345, v3.7.0)
- < 5.0.0: strictUnits switch, deprecated compress switch;
  >= 5.0.0: unitMode select, collapseNesting switch (5.0.0-alpha options.js)

The store keeps every key (URL hash unchanged); renderOptions() filters.
---
 src/App.vue    | 39 +++++++++++++++----------------
 src/options.ts | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 19 deletions(-)
 create mode 100644 src/options.ts

diff --git a/src/App.vue b/src/App.vue
index 10e7e38..4c58d52 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,19 +6,18 @@ import Editor from '@components/Editor.vue'
 import Layout from '@components/Layout.vue'
 import Select from '@components/Select.vue'
 import { Switch } from '@headlessui/vue'
-
-const mathOptions = ['always', 'parens-division', 'parens'].map(value => ({ value }))
+import { defaultStore, supportedOptions, renderOptions, type OptionStore } from './options'
 
 let input = $ref(LESS_DATA)
 let output = $ref<string | undefined>('')
 let errorMessage = $ref('')
 let hash = $ref('')
-let store: Less.Options & { activeVersion: string } = reactive({
+let store: OptionStore & { activeVersion: string } = reactive({
   activeVersion: '4.x',
-  math: 'parens-division',
-  strictUnits: false
+  ...defaultStore
 })
 let loadingLessJS = $ref(false)
+const options = $computed(() => supportedOptions(store.activeVersion))
 
 const serialize = () => {
   const newHash = '#' + utoa(JSON.stringify({
@@ -29,8 +28,7 @@ const serialize = () => {
 }
 
 const updateVue = () => {
-  const { math, strictUnits } = store
-  window.less.render(input, { math, strictUnits }, (error, result) => {
+  window.less.render(input, renderOptions(store, store.activeVersion), (error, result) => {
       if (error) {
         errorMessage = error.message
         output = ''
@@ -80,18 +78,21 @@ onMounted(() => {
     </template>
     <template #options>
       <h3>Options</h3>
-      <div class="option">
-        <span>Math mode</span>
-        <Select v-model="store.math" :options="mathOptions" />
-      </div>
-      <Switch
-        v-model="store.strictUnits"
-        class="option switch"
-        :class="{ on: store.strictUnits }"
-      >
-        <span>Strict units</span>
-        <span class="switch-track" aria-hidden="true"><span class="switch-thumb"></span></span>
-      </Switch>
+      <template v-for="o in options" :key="o.key">
+        <div v-if="o.type === 'select'" class="option">
+          <span>{{ o.label }}</span>
+          <Select v-model="store[o.key]" :options="o.values.map(value => ({ value }))" />
+        </div>
+        <Switch
+          v-else
+          v-model="store[o.key]"
+          class="option switch"
+          :class="{ on: store[o.key] }"
+        >
+          <span>{{ o.label }}</span>
+          <span class="switch-track" aria-hidden="true"><span class="switch-thumb"></span></span>
+        </Switch>
+      </template>
     </template>
     <template #preview>
       <editor v-model:value="output" readOnly />
diff --git a/src/options.ts b/src/options.ts
new file mode 100644
index 0000000..0b1fc65
--- /dev/null
+++ b/src/options.ts
@@ -0,0 +1,62 @@
+// Compile options the playground exposes, gated by the Less version that
+// introduced (`min`, inclusive) or dropped (`max`, exclusive) them.
+// Only options meaningful for a single-string browser render live here.
+
+export interface OptionStore {
+  strictMath: boolean
+  math: string
+  strictUnits: boolean
+  unitMode: string
+  collapseNesting: boolean
+  compress: boolean
+}
+
+type SwitchKey = { [K in keyof OptionStore]: OptionStore[K] extends boolean ? K : never }[keyof OptionStore]
+type SelectKey = Exclude<keyof OptionStore, SwitchKey>
+
+export type OptionDescriptor =
+  | { key: SwitchKey; label: string; type: 'switch'; min?: string; max?: string }
+  | { key: SelectKey; label: string; type: 'select'; values: string[]; min?: string; max?: string }
+
+export const defaultStore: OptionStore = {
+  strictMath: false,
+  math: 'parens-division',
+  strictUnits: false,
+  unitMode: 'loose',
+  collapseNesting: false,
+  compress: false
+}
+
+// Evidence: `math` replaced `strictMath` in less.js 76c10345 (first tag v3.7.0);
+// `unitMode` (strictUnits deprecated alias), `collapseNesting` and the rejection
+// of `compress` land in 5.0.0-alpha (packages/less/lib/options.js on `alpha`).
+const all: OptionDescriptor[] = [
+  { key: 'strictMath', label: 'Strict math', type: 'switch', max: '3.7.0' },
+  { key: 'math', label: 'Math mode', type: 'select', values: ['always', 'parens-division', 'parens'], min: '3.7.0' },
+  { key: 'strictUnits', label: 'Strict units', type: 'switch', max: '5.0.0' },
+  { key: 'unitMode', label: 'Unit mode', type: 'select', values: ['loose', 'strict', 'preserve'], min: '5.0.0' },
+  { key: 'collapseNesting', label: 'Collapse nesting', type: 'switch', min: '5.0.0' },
+  { key: 'compress', label: 'Minify output (deprecated)', type: 'switch', max: '5.0.0' }
+]
+
+// Numeric core only: "5.0.0-alpha.2" compares as 5.0.0; "4.x" as 4.0.0.
+const parse = (v: string) =>
+  v.split('-')[0].split('.').map(p => Number(p) || 0)
+
+const compare = (a: string, b: string) => {
+  const [x, y] = [parse(a), parse(b)]
+  for (let i = 0; i < 3; i++) {
+    if ((x[i] ?? 0) !== (y[i] ?? 0)) return (x[i] ?? 0) - (y[i] ?? 0)
+  }
+  return 0
+}
+
+export const supportedOptions = (version: string) =>
+  all.filter(o =>
+    (!o.min || compare(version, o.min) >= 0) &&
+    (!o.max || compare(version, o.max) < 0)
+  )
+
+// The only object that reaches less.render: valid keys for `version`, nothing else.
+export const renderOptions = (store: OptionStore, version: string) =>
+  Object.fromEntries(supportedOptions(version).map(o => [o.key, store[o.key]]))

From e8f4a842914769b85c6c18b5309b43a213645b6e Mon Sep 17 00:00:00 2001
From: Matthew Dean <matthew-dean@users.noreply.github.com>
Date: Wed, 2 Sep 2026 13:50:56 -0700
Subject: [PATCH 2/2] fix: default 5.x unitMode to preserve (the Less 5
 default)

---
 src/options.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/options.ts b/src/options.ts
index 0b1fc65..6344bf4 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -22,7 +22,7 @@ export const defaultStore: OptionStore = {
   strictMath: false,
   math: 'parens-division',
   strictUnits: false,
-  unitMode: 'loose',
+  unitMode: 'preserve',
   collapseNesting: false,
   compress: false
 }