From 79f535e5f8e8eff369e760541b9306887306b191 Mon Sep 17 00:00:00 2001
From: "Kendall_Gassner@intuit.com" <Kendall_Gassner@intuit.com>
Date: Fri, 13 Nov 2020 09:05:14 -0800
Subject: [PATCH 1/6] adding a default value inside the var statements

---
 __tests__/modern.test.ts                 | 109 ++++++++++++-----------
 __tests__/test-modern-themes-ts/theme.ts |  11 +++
 src/index.ts                             |  15 ++--
 src/modern/index.ts                      | 105 ++++++++++------------
 4 files changed, 128 insertions(+), 112 deletions(-)
 create mode 100644 __tests__/test-modern-themes-ts/theme.ts

diff --git a/__tests__/modern.test.ts b/__tests__/modern.test.ts
index f0a1cea..7f67f3b 100644
--- a/__tests__/modern.test.ts
+++ b/__tests__/modern.test.ts
@@ -24,12 +24,8 @@ it('Creates a simple css variable based theme', () => {
     `,
     `
       .test {
-        color: var(--color);
-        background-image: linear-gradient(to right, var(--color), var(--color))
-      }
-
-      :root {
-        --color: purple
+        color: var(--color, purple);
+        background-image: linear-gradient(to right, var(--color, purple), var(--color, purple))
       }
 
       .mint {
@@ -74,12 +70,8 @@ it('Creates a simple css variable based theme with light and dark', () => {
     `,
     `
       .test {
-        color: var(--color);
-        background-image: linear-gradient(to right, var(--color), var(--color))
-      }
-
-      :root {
-        --color: purple
+        color: var(--color, purple);
+        background-image: linear-gradient(to right, var(--color, purple), var(--color, purple))
       }
 
       .dark {
@@ -135,11 +127,7 @@ it('Produces a single theme', () => {
     `,
     `
       .test {
-        color: var(--color);
-      }
-
-      :root {
-        --color: beige;
+        color: var(--color, beige);
       }
 
       .dark {
@@ -176,11 +164,7 @@ it('Produces a single theme with dark mode if default has it', () => {
     `,
     `
       .test {
-        color: var(--color);
-      }
-
-      :root {
-        --color: teal;
+        color: var(--color, teal);
       }
 
       .dark {
@@ -212,11 +196,7 @@ it('Produces a single theme with variables by default', () => {
     `,
     `
       .test {
-        color: var(--color);
-      }
-
-      :root {
-        --color: teal;
+        color: var(--color, teal);
       }
     `,
     {
@@ -279,15 +259,11 @@ it('works with nested', () => {
     `,
     `
       .foo.test {
-        color: var(--color);
+        color: var(--color, purple);
       }
 
       .foo .another {
-        color: var(--color);
-      }
-
-      :root {
-        --color: purple;
+        color: var(--color, purple);
       }
 
       .light {
@@ -319,12 +295,8 @@ it('scoped variable names', () => {
     `,
     `
       .test {
-        color: var(--app-foo-color);
-        background-image: linear-gradient(to right, var(--app-foo-color), var(--app-foo-color))
-      }
-
-      :root {
-        --app-foo-color: purple
+        color: var(--app-foo-color, purple);
+        background-image: linear-gradient(to right, var(--app-foo-color, purple), var(--app-foo-color, purple))
       }
 
       .light {
@@ -358,12 +330,8 @@ it('scoped variable names with custom function', () => {
     `,
     `
       .test {
-        color: var(--test-color-da3);
-        background-image: linear-gradient(to right, var(--test-color-da3), var(--test-color-da3))
-      }
-
-      :root {
-        --test-color-da3: purple
+        color: var(--test-color-da3, purple);
+        background-image: linear-gradient(to right, var(--test-color-da3, purple), var(--test-color-da3, purple))
       }
 
       .light {
@@ -403,12 +371,8 @@ it('scoped variable names with default function', () => {
     `,
     `
       .test {
-        color: var(--default-color-d41d8c);
-        background-image: linear-gradient(to right, var(--default-color-d41d8c), var(--default-color-d41d8c))
-      }
-
-      :root {
-        --default-color-d41d8c: purple
+        color: var(--default-color-d41d8c, purple);
+        background-image: linear-gradient(to right, var(--default-color-d41d8c, purple), var(--default-color-d41d8c, purple))
       }
 
       .light {
@@ -449,3 +413,46 @@ it('Wrong key mentioned in theme configuration', () => {
     }
   );
 });
+
+it('With component Config', () => {
+  const config = {
+    default: {
+      light: {
+        background: 'purple',
+        extras: 'black'
+      },
+      dark: {
+        background: 'black'
+      }
+    },
+    mint: {
+      background: 'teal'
+    }
+  };
+
+  return run(
+    `
+      .test {
+        color: @theme background;
+        background-image: linear-gradient(to right, @theme background, @theme background)
+      }
+    `,
+    `
+      .test {
+        color: var(--background, yellow);
+        background-image: linear-gradient(to right, var(--background, yellow), var(--background, yellow))
+      }
+
+      .dark {
+        --background: pink
+      }
+      .mint.light {
+        --background: teal
+      }
+    `,
+    {
+      config
+    },
+    './__tests__/test-modern-themes-ts/test.css'
+  );
+});
diff --git a/__tests__/test-modern-themes-ts/theme.ts b/__tests__/test-modern-themes-ts/theme.ts
new file mode 100644
index 0000000..cd19415
--- /dev/null
+++ b/__tests__/test-modern-themes-ts/theme.ts
@@ -0,0 +1,11 @@
+export default () => ({
+  default: {
+    light: {
+      background: 'yellow',
+      color: 'green'
+    },
+    dark: {
+      background: 'pink'
+    }
+  }
+});
diff --git a/src/index.ts b/src/index.ts
index 8b688ed..6ea3a3c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,7 +9,12 @@ import * as tsNode from 'ts-node';
 import { getThemeFilename, normalizeTheme } from './common';
 import { modernTheme } from './modern';
 import { legacyTheme } from './legacy';
-import { ComponentTheme, PostcssThemeConfig, PostcssThemeOptions, ThemeResolver } from './types';
+import {
+  ComponentTheme,
+  PostcssThemeConfig,
+  PostcssThemeOptions,
+  ThemeResolver
+} from './types';
 
 const log = debug('postcss-themed');
 
@@ -47,7 +52,7 @@ const configForComponent = (
     log(error);
     return {};
   }
-}
+};
 
 /** Generate a theme */
 const themeFile = (options: PostcssThemeOptions = {}) => (
@@ -77,7 +82,7 @@ const themeFile = (options: PostcssThemeOptions = {}) => (
   const mergedConfig = merge(globalConfig, componentConfig);
 
   if (caniuse.isSupported('css-variables', browserslist())) {
-    modernTheme(root, mergedConfig, globalConfig, options);
+    modernTheme(root, mergedConfig, options);
   } else {
     legacyTheme(root, mergedConfig, options);
   }
@@ -86,12 +91,12 @@ const themeFile = (options: PostcssThemeOptions = {}) => (
   root.source.processed = true;
 
   if (!resolveTheme && root.source.input.file) {
-    const themeFilename = getThemeFilename(root.source.input.file)
+    const themeFilename = getThemeFilename(root.source.input.file);
 
     if (fs.existsSync(themeFilename)) {
       result.messages.push({
         plugin: 'postcss-themed',
-        type: "dependency",
+        type: 'dependency',
         file: themeFilename
       });
     }
diff --git a/src/modern/index.ts b/src/modern/index.ts
index f6f37f4..b7623bd 100644
--- a/src/modern/index.ts
+++ b/src/modern/index.ts
@@ -1,10 +1,22 @@
-import postcss from "postcss";
+import postcss from 'postcss';
 import crypto from 'crypto';
 import fs from 'fs';
 
-import localizeIdentifier from "../localize-identifier";
-import { ColorScheme, LightDarkTheme, PostcssStrictThemeConfig, PostcssThemeOptions, ScopedNameFunction, SimpleTheme } from "../types";
-import { hasDarkMode, parseThemeKey, replaceTheme, replaceThemeRoot } from "../common";
+import localizeIdentifier from '../localize-identifier';
+import {
+  ColorScheme,
+  LightDarkTheme,
+  PostcssStrictThemeConfig,
+  PostcssThemeOptions,
+  ScopedNameFunction,
+  SimpleTheme
+} from '../types';
+import {
+  hasDarkMode,
+  parseThemeKey,
+  replaceTheme,
+  replaceThemeRoot
+} from '../common';
 
 /** Create a CSS variable override block for a given selector */
 const createModernTheme = (
@@ -53,7 +65,7 @@ const defaultLocalizeFunction = (
     .digest('hex')
     .slice(0, 6);
   return `${filePath || 'default'}-${name}-${hash}`;
-}
+};
 
 const getLocalizeFunction = (
   modules: string | ScopedNameFunction | undefined,
@@ -65,7 +77,8 @@ const getLocalizeFunction = (
       fileContents = fs.readFileSync(resourcePath, 'utf8');
     }
 
-    const localize = typeof modules === 'function' ? modules : defaultLocalizeFunction;
+    const localize =
+      typeof modules === 'function' ? modules : defaultLocalizeFunction;
     return (name: string) => {
       return localize(name, resourcePath || '', fileContents);
     };
@@ -79,7 +92,6 @@ const getLocalizeFunction = (
 export const modernTheme = (
   root: postcss.Root,
   componentConfig: PostcssStrictThemeConfig,
-  globalConfig: PostcssStrictThemeConfig,
   options: PostcssThemeOptions
 ) => {
   const usage = new Set<string>();
@@ -139,24 +151,23 @@ export const modernTheme = (
             break;
           }
         } else {
-          decl.value = replaceTheme(decl.value, `var(--${localize(key)})`);
+          decl.value = replaceTheme(
+            decl.value,
+            `var(--${localize(key)}, ${mergedSingleThemeConfig['light'][key]})` // assign default value
+          );
         }
 
         usage.add(key);
       }
     });
   });
-
   // 2. Create variable declaration blocks
   const filterUsed = (
     colorScheme: ColorScheme,
-    theme: string,
     themeConfig: LightDarkTheme
   ): SimpleTheme =>
     Object.entries(themeConfig[colorScheme])
-      .filter(
-        ([name]) => usage.has(name) || !globalConfig[theme][colorScheme][name]
-      )
+      .filter(([name]) => usage.has(name))
       .reduce((acc, [name, value]) => ({ ...acc, [name]: value }), {});
 
   // 2a. If generating a single theme, simply generate the default
@@ -165,22 +176,9 @@ export const modernTheme = (
 
     if (hasMergedDarkMode) {
       rules.push(
-        createModernTheme(
-          ':root',
-          filterUsed('light', singleTheme, mergedSingleThemeConfig),
-          localize
-        ),
         createModernTheme(
           '.dark',
-          filterUsed('dark', singleTheme, mergedSingleThemeConfig),
-          localize
-        )
-      );
-    } else if (!optimizeSingleTheme) {
-      rules.push(
-        createModernTheme(
-          ':root',
-          filterUsed('light', singleTheme, mergedSingleThemeConfig),
+          filterUsed('dark', mergedSingleThemeConfig),
           localize
         )
       );
@@ -193,41 +191,36 @@ export const modernTheme = (
   // 2b. Under normal operation, generate CSS variable blocks for each theme
   Object.entries(componentConfig).forEach(([theme, themeConfig]) => {
     const rules: (postcss.Rule | undefined)[] = [];
-    const isDefault = theme === defaultTheme;
-    const rootClass = isDefault ? ':root' : `.${theme}`;
 
-    if (hasDarkMode(themeConfig)) {
-      rules.push(
-        createModernTheme(
-          isDefault ? rootClass : `${rootClass}.light`,
-          filterUsed('light', theme, themeConfig),
-          localize
-        ),
-        createModernTheme(
-          isDefault ? '.dark' : `${rootClass}.dark`,
-          filterUsed('dark', theme, themeConfig),
-          localize
-        )
-      );
-    } else if (hasRootDarkMode) {
-      rules.push(
-        createModernTheme(
-          isDefault ? rootClass : `${rootClass}.light`,
-          filterUsed('light', theme, themeConfig),
-          localize
-        )
-      );
+    if (theme !== defaultTheme) {
+      if (hasDarkMode(themeConfig)) {
+        rules.push(
+          createModernTheme(
+            `.${theme}.light`,
+            filterUsed('light', themeConfig),
+            localize
+          ),
+          createModernTheme(
+            `.${theme}.dark`,
+            filterUsed('dark', themeConfig),
+            localize
+          )
+        );
+      } else {
+        rules.push(
+          createModernTheme(
+            hasRootDarkMode ? `.${theme}.light` : `.${theme}`,
+            filterUsed('light', themeConfig),
+            localize
+          )
+        );
+      }
     } else {
       rules.push(
-        createModernTheme(
-          rootClass,
-          filterUsed('light', theme, themeConfig),
-          localize
-        )
+        createModernTheme('.dark', filterUsed('dark', themeConfig), localize)
       );
     }
 
     root.append(...rules.filter((x): x is postcss.Rule => Boolean(x)));
   });
 };
-

From e52b7e06d5c667bfa8f34eec9eb79cf1c08ec1f8 Mon Sep 17 00:00:00 2001
From: "Kendall_Gassner@intuit.com" <Kendall_Gassner@intuit.com>
Date: Fri, 13 Nov 2020 09:34:44 -0800
Subject: [PATCH 2/6] fixing tests

---
 __tests__/precedence.test.ts | 27 ++++++---------------------
 package.json                 |  1 +
 2 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/__tests__/precedence.test.ts b/__tests__/precedence.test.ts
index 3ee6f9b..9400c82 100644
--- a/__tests__/precedence.test.ts
+++ b/__tests__/precedence.test.ts
@@ -25,12 +25,9 @@ it('Overrides all themes from default', () => {
     `,
     `
       .test {
-        color: var(--color);
+        color: var(--color, red);
       }
 
-      :root {
-        --color: red;
-      }
       
       .dark {
         --color: blue;
@@ -74,12 +71,9 @@ it('Overrides dark themes from default', () => {
     `,
     `
       .test {
-        color: var(--color);
+        color: var(--color, red);
       }
 
-      :root {
-        --color: red;
-      }
       
       .dark {
         --color: blue;
@@ -125,13 +119,8 @@ it('Merges missing variables from single theme', () => {
     `,
     `
       .test {
-        color: var(--color);
-        background-color: var(--bgColor);
-      }
-
-      :root {
-        --color: teal;
-        --bgColor: orange;
+        color: var(--color, teal);
+        background-color: var(--bgColor, orange);
       }
       
       .dark {
@@ -166,14 +155,10 @@ it('Merges single theme but leaves variables by default', () => {
     `,
     `
       .test {
-        color: var(--color);
-        background-color: var(--bgColor);
+        color: var(--color, teal);
+        background-color: var(--bgColor, orange);
       }
 
-      :root {
-        --color: teal;
-        --bgColor: orange;
-      }
     `,
     {
       config,
diff --git a/package.json b/package.json
index 82f66e5..8f55790 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "testPathIgnorePatterns": [
       "/node_modules/",
       "test-component-themes",
+      "test-modern-themes",
       "test-utils"
     ],
     "collectCoverageFrom": [

From a5124e23f2d494ebfd2c6f334153cca95fc23df4 Mon Sep 17 00:00:00 2001
From: "Kendall_Gassner@intuit.com" <Kendall_Gassner@intuit.com>
Date: Fri, 13 Nov 2020 11:12:52 -0800
Subject: [PATCH 3/6] adding in option to turn inline off

---
 __tests__/modern.test.ts | 71 ++++++++++++++++++++++++++++++++++++++++
 src/modern/index.ts      | 42 ++++++++++++++++++++----
 src/types/index.ts       |  4 ++-
 3 files changed, 110 insertions(+), 7 deletions(-)

diff --git a/__tests__/modern.test.ts b/__tests__/modern.test.ts
index 7f67f3b..8efc064 100644
--- a/__tests__/modern.test.ts
+++ b/__tests__/modern.test.ts
@@ -38,6 +38,45 @@ it('Creates a simple css variable based theme', () => {
   );
 });
 
+it('inlineRootThemeVariables false', () => {
+  const config = {
+    default: {
+      color: 'purple',
+      extras: 'black'
+    },
+    mint: {
+      color: 'teal'
+    }
+  };
+
+  return run(
+    `
+      .test {
+        color: @theme color;
+        background-image: linear-gradient(to right, @theme color, @theme color)
+      }
+    `,
+    `
+      .test {
+        color: var(--color);
+        background-image: linear-gradient(to right, var(--color), var(--color))
+      }
+
+      :root {
+        --color: purple
+      }
+
+      .mint {
+        --color: teal
+      }
+    `,
+    {
+      config,
+      inlineRootThemeVariables: false
+    }
+  );
+});
+
 it('Creates a simple css variable based theme with light and dark', () => {
   const config = {
     default: {
@@ -206,6 +245,38 @@ it('Produces a single theme with variables by default', () => {
   );
 });
 
+it('Produces a single theme with variables by default with inlineRootThemeVariables off', () => {
+  const config = {
+    default: {
+      color: 'purple'
+    },
+    mint: {
+      color: 'teal'
+    }
+  };
+
+  return run(
+    `
+      .test {
+        color: @theme color;
+      }
+    `,
+    `
+      .test {
+        color: var(--color);
+      }
+
+      :root {
+        --color: teal;
+      }
+    `,
+    {
+      config,
+      forceSingleTheme: 'mint',
+      inlineRootThemeVariables: false
+    }
+  );
+});
 it('Optimizes single theme by removing variables', () => {
   const config = {
     default: {
diff --git a/src/modern/index.ts b/src/modern/index.ts
index b7623bd..233af92 100644
--- a/src/modern/index.ts
+++ b/src/modern/index.ts
@@ -94,10 +94,14 @@ export const modernTheme = (
   componentConfig: PostcssStrictThemeConfig,
   options: PostcssThemeOptions
 ) => {
-  const usage = new Set<string>();
+  const usage = new Map<string, number>();
   const defaultTheme = options.defaultTheme || 'default';
   const singleTheme = options.forceSingleTheme || undefined;
   const optimizeSingleTheme = options.optimizeSingleTheme;
+  const inlineRootThemeVariables =
+    typeof options.inlineRootThemeVariables === 'undefined'
+      ? true
+      : options.inlineRootThemeVariables;
   const resourcePath = root.source ? root.source.input.file : '';
   const localize = getLocalizeFunction(options.modules, resourcePath);
 
@@ -151,13 +155,20 @@ export const modernTheme = (
             break;
           }
         } else {
-          decl.value = replaceTheme(
-            decl.value,
-            `var(--${localize(key)}, ${mergedSingleThemeConfig['light'][key]})` // assign default value
-          );
+          decl.value = inlineRootThemeVariables
+            ? replaceTheme(
+                decl.value,
+                `var(--${localize(key)}, ${
+                  mergedSingleThemeConfig['light'][key]
+                })`
+              )
+            : replaceTheme(
+                decl.value,
+                `var(--${localize(key)})` // assign default value
+              );
         }
 
-        usage.add(key);
+        usage.set(key, usage.get(key) || 1);
       }
     });
   });
@@ -170,9 +181,20 @@ export const modernTheme = (
       .filter(([name]) => usage.has(name))
       .reduce((acc, [name, value]) => ({ ...acc, [name]: value }), {});
 
+  const addRootTheme = (themConfig: LightDarkTheme) => {
+    if (!inlineRootThemeVariables) {
+      return createModernTheme(
+        ':root',
+        filterUsed('light', themConfig),
+        localize
+      );
+    }
+  };
+
   // 2a. If generating a single theme, simply generate the default
   if (singleTheme) {
     const rules: (postcss.Rule | undefined)[] = [];
+    const rootRules = addRootTheme(mergedSingleThemeConfig);
 
     if (hasMergedDarkMode) {
       rules.push(
@@ -182,6 +204,10 @@ export const modernTheme = (
           localize
         )
       );
+      rules.push(rootRules);
+    }
+    if (!optimizeSingleTheme) {
+      rules.push(rootRules);
     }
 
     root.append(...rules.filter((x): x is postcss.Rule => Boolean(x)));
@@ -216,6 +242,10 @@ export const modernTheme = (
         );
       }
     } else {
+      if (!inlineRootThemeVariables) {
+        // config is on OR is if there are multiple uses
+        rules.push(addRootTheme(themeConfig));
+      }
       rules.push(
         createModernTheme('.dark', filterUsed('dark', themeConfig), localize)
       );
diff --git a/src/types/index.ts b/src/types/index.ts
index 82059a2..3af1a2d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -32,6 +32,8 @@ export interface PostcssThemeOptions {
   forceSingleTheme?: string;
   /** Remove CSS Variables when possible */
   optimizeSingleTheme?: boolean;
+  /** Whether to include custom variable default values. Defaults to true. */
+  inlineRootThemeVariables?: boolean;
   /** Transform CSS variable names similar to CSS-Modules */
   modules?: string | ScopedNameFunction;
-}
\ No newline at end of file
+}

From 04bc527935bf8b785e1c8a2eade44aefbe1ab845 Mon Sep 17 00:00:00 2001
From: "Kendall_Gassner@intuit.com" <Kendall_Gassner@intuit.com>
Date: Fri, 13 Nov 2020 16:15:04 -0800
Subject: [PATCH 4/6] optimize themes

---
 __tests__/modern.test.ts | 94 ++++++++++++++++++++++++++++++++++------
 src/modern/index.ts      | 72 ++++++++++++++++++------------
 2 files changed, 125 insertions(+), 41 deletions(-)

diff --git a/__tests__/modern.test.ts b/__tests__/modern.test.ts
index 8efc064..735156c 100644
--- a/__tests__/modern.test.ts
+++ b/__tests__/modern.test.ts
@@ -24,8 +24,12 @@ it('Creates a simple css variable based theme', () => {
     `,
     `
       .test {
-        color: var(--color, purple);
-        background-image: linear-gradient(to right, var(--color, purple), var(--color, purple))
+        color: var(--color);
+        background-image: linear-gradient(to right, var(--color), var(--color))
+      }
+
+      :root {
+        --color: purple
       }
 
       .mint {
@@ -87,6 +91,7 @@ it('Creates a simple css variable based theme with light and dark', () => {
         color: 'black'
       }
     },
+
     mint: {
       color: 'teal'
     },
@@ -109,8 +114,11 @@ it('Creates a simple css variable based theme with light and dark', () => {
     `,
     `
       .test {
-        color: var(--color, purple);
-        background-image: linear-gradient(to right, var(--color, purple), var(--color, purple))
+        color: var(--color);
+        background-image: linear-gradient(to right, var(--color), var(--color))
+      }
+      :root {
+        --color: purple
       }
 
       .dark {
@@ -330,11 +338,15 @@ it('works with nested', () => {
     `,
     `
       .foo.test {
-        color: var(--color, purple);
+        color: var(--color);
       }
 
       .foo .another {
-        color: var(--color, purple);
+        color: var(--color);
+      }
+
+      :root {
+        --color: purple;
       }
 
       .light {
@@ -366,8 +378,12 @@ it('scoped variable names', () => {
     `,
     `
       .test {
-        color: var(--app-foo-color, purple);
-        background-image: linear-gradient(to right, var(--app-foo-color, purple), var(--app-foo-color, purple))
+        color: var(--app-foo-color);
+        background-image: linear-gradient(to right, var(--app-foo-color), var(--app-foo-color))
+      }
+
+      :root {
+        --app-foo-color: purple
       }
 
       .light {
@@ -401,8 +417,12 @@ it('scoped variable names with custom function', () => {
     `,
     `
       .test {
-        color: var(--test-color-da3, purple);
-        background-image: linear-gradient(to right, var(--test-color-da3, purple), var(--test-color-da3, purple))
+        color: var(--test-color-da3);
+        background-image: linear-gradient(to right, var(--test-color-da3), var(--test-color-da3))
+      }
+
+      :root {
+        --test-color-da3: purple
       }
 
       .light {
@@ -442,8 +462,12 @@ it('scoped variable names with default function', () => {
     `,
     `
       .test {
-        color: var(--default-color-d41d8c, purple);
-        background-image: linear-gradient(to right, var(--default-color-d41d8c, purple), var(--default-color-d41d8c, purple))
+        color: var(--default-color-d41d8c);
+        background-image: linear-gradient(to right, var(--default-color-d41d8c), var(--default-color-d41d8c))
+      }
+
+      :root {
+        --default-color-d41d8c: purple
       }
 
       .light {
@@ -510,8 +534,12 @@ it('With component Config', () => {
     `,
     `
       .test {
-        color: var(--background, yellow);
-        background-image: linear-gradient(to right, var(--background, yellow), var(--background, yellow))
+        color: var(--background);
+        background-image: linear-gradient(to right, var(--background), var(--background))
+      }
+
+      :root {
+        --background: yellow
       }
 
       .dark {
@@ -527,3 +555,41 @@ it('With component Config', () => {
     './__tests__/test-modern-themes-ts/test.css'
   );
 });
+
+it('Some variables show inline and some show in root', () => {
+  const config = {
+    default: {
+      color: 'purple',
+      extras: 'black'
+    },
+    mint: {
+      color: 'teal'
+    }
+  };
+
+  return run(
+    `
+      .test {
+        color: @theme color;
+        background-image: linear-gradient(to right, @theme extras, @theme extras)
+      }
+    `,
+    `
+      .test {
+        color: var(--color, purple);
+        background-image: linear-gradient(to right, var(--extras), var(--extras))
+      }
+
+      :root {
+        --extras: black
+      }
+
+      .mint {
+        --color: teal
+      }
+    `,
+    {
+      config
+    }
+  );
+});
diff --git a/src/modern/index.ts b/src/modern/index.ts
index 233af92..11e2e57 100644
--- a/src/modern/index.ts
+++ b/src/modern/index.ts
@@ -131,7 +131,22 @@ export const modernTheme = (
   const hasMergedDarkMode =
     mergedSingleThemeConfig && hasDarkMode(mergedSingleThemeConfig);
 
-  // 1. Walk each declaration and replace theme vars with CSS vars
+  // 1a. walk again to optimize inline default values
+  root.walkRules(rule => {
+    rule.selector = replaceThemeRoot(rule.selector);
+
+    rule.walkDecls(decl => {
+      decl.value.split(/(?=@theme)/g).forEach(chunk => {
+        const key = parseThemeKey(chunk);
+        if (key) {
+          const count = usage.has(key) ? usage.get(key)! + 1 : 1;
+          usage.set(key, count);
+        }
+      });
+    });
+  });
+
+  // 1b. Walk each declaration and replace theme vars with CSS vars
   root.walkRules(rule => {
     rule.selector = replaceThemeRoot(rule.selector);
 
@@ -155,40 +170,46 @@ export const modernTheme = (
             break;
           }
         } else {
-          decl.value = inlineRootThemeVariables
-            ? replaceTheme(
-                decl.value,
-                `var(--${localize(key)}, ${
-                  mergedSingleThemeConfig['light'][key]
-                })`
-              )
-            : replaceTheme(
-                decl.value,
-                `var(--${localize(key)})` // assign default value
-              );
+          if (
+            inlineRootThemeVariables &&
+            usage.has(key) &&
+            usage.get(key) === 1
+          ) {
+            decl.value = replaceTheme(
+              decl.value,
+              `var(--${localize(key)}, ${
+                mergedSingleThemeConfig['light'][key]
+              })`
+            );
+          } else {
+            decl.value = replaceTheme(decl.value, `var(--${localize(key)})`);
+          }
         }
-
-        usage.set(key, usage.get(key) || 1);
       }
     });
   });
+
   // 2. Create variable declaration blocks
   const filterUsed = (
     colorScheme: ColorScheme,
-    themeConfig: LightDarkTheme
+    themeConfig: LightDarkTheme,
+    filterFunction = ([name]: string[]) => usage.has(name)
   ): SimpleTheme =>
     Object.entries(themeConfig[colorScheme])
-      .filter(([name]) => usage.has(name))
+      .filter(filterFunction)
       .reduce((acc, [name, value]) => ({ ...acc, [name]: value }), {});
 
   const addRootTheme = (themConfig: LightDarkTheme) => {
-    if (!inlineRootThemeVariables) {
-      return createModernTheme(
-        ':root',
-        filterUsed('light', themConfig),
-        localize
-      );
-    }
+    // if inlineRootThemeVariables then only add vars to root that are used more than once
+    const func = inlineRootThemeVariables
+      ? ([name]: string[]) => usage.has(name) && usage.get(name)! > 1
+      : undefined;
+
+    return createModernTheme(
+      ':root',
+      filterUsed('light', themConfig, func),
+      localize
+    );
   };
 
   // 2a. If generating a single theme, simply generate the default
@@ -242,10 +263,7 @@ export const modernTheme = (
         );
       }
     } else {
-      if (!inlineRootThemeVariables) {
-        // config is on OR is if there are multiple uses
-        rules.push(addRootTheme(themeConfig));
-      }
+      rules.push(addRootTheme(themeConfig));
       rules.push(
         createModernTheme('.dark', filterUsed('dark', themeConfig), localize)
       );

From 0c171fd0d3cc98acc7f8424e41e21979c4a73935 Mon Sep 17 00:00:00 2001
From: "Kendall_Gassner@intuit.com" <Kendall_Gassner@intuit.com>
Date: Mon, 16 Nov 2020 09:48:29 -0800
Subject: [PATCH 5/6] add babel nullish coalescing plugin

---
 .babelrc            |  2 +-
 package.json        |  1 +
 src/modern/index.ts |  5 +----
 yarn.lock           | 20 ++++++++++++++++++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/.babelrc b/.babelrc
index 816276a..3860347 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-typescript", "@babel/preset-env"]
+  "presets": ["@babel/preset-typescript", "@babel/preset-env", "@babel/plugin-proposal-nullish-coalescing-operator"]
 }
diff --git a/package.json b/package.json
index 8f55790..a60c05f 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@babel/core": "^7.6.2",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-typescript": "^7.7.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
     "@logux/eslint-config": "^34.0.0",
     "@types/browserslist": "^4.4.0",
     "@types/caniuse-api": "^3.0.0",
diff --git a/src/modern/index.ts b/src/modern/index.ts
index 11e2e57..9ce4840 100644
--- a/src/modern/index.ts
+++ b/src/modern/index.ts
@@ -98,10 +98,7 @@ export const modernTheme = (
   const defaultTheme = options.defaultTheme || 'default';
   const singleTheme = options.forceSingleTheme || undefined;
   const optimizeSingleTheme = options.optimizeSingleTheme;
-  const inlineRootThemeVariables =
-    typeof options.inlineRootThemeVariables === 'undefined'
-      ? true
-      : options.inlineRootThemeVariables;
+  const inlineRootThemeVariables = options.inlineRootThemeVariables ?? true;
   const resourcePath = root.source ? root.source.input.file : '';
   const localize = getLocalizeFunction(options.modules, resourcePath);
 
diff --git a/yarn.lock b/yarn.lock
index 20cf540..404f4b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -303,6 +303,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-plugin-utils@^7.8.0":
   version "7.8.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.0.tgz#59ec882d43c21c544ccb51decaecb306b34a8231"
@@ -440,6 +445,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.2.0"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
+  integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
 "@babel/plugin-proposal-object-rest-spread@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz#8ffccc8f3a6545e9f78988b6bf4fe881b88e8096"
@@ -485,6 +498,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"

From 3775ef709b90fd8a56c4a84307e069d5187dafb1 Mon Sep 17 00:00:00 2001
From: "Kendall_Gassner@intuit.com" <Kendall_Gassner@intuit.com>
Date: Mon, 16 Nov 2020 09:55:00 -0800
Subject: [PATCH 6/6] add babel nullish coalescing plugin

---
 .babelrc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.babelrc b/.babelrc
index 3860347..23e2548 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,5 @@
 {
-  "presets": ["@babel/preset-typescript", "@babel/preset-env", "@babel/plugin-proposal-nullish-coalescing-operator"]
+  "presets": ["@babel/preset-typescript", "@babel/preset-env"],
+  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
 }
+