Adding a default value inside the custom property statements

__tests__/modern.test.ts

@@ -42,6 +42,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: {
@@ -52,6 +91,7 @@ it('Creates a simple css variable based theme with light and dark', () => {
         color: 'black'
       }
     },
+
     mint: {
       color: 'teal'
     },
@@ -77,7 +117,6 @@ it('Creates a simple css variable based theme with light and dark', () => {
         color: var(--color);
         background-image: linear-gradient(to right, var(--color), var(--color))
       }
-
       :root {
         --color: purple
       }
@@ -135,11 +174,7 @@ it('Produces a single theme', () => {
     `,
     `
       .test {
-        color: var(--color);
-      }
-
-      :root {
-        --color: beige;
+        color: var(--color, beige);
       }
 
       .dark {
@@ -176,11 +211,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 {
@@ -204,6 +235,34 @@ it('Produces a single theme with variables by default', () => {
     }
   };
 
+  return run(
+    `
+      .test {
+        color: @theme color;
+      }
+    `,
+    `
+      .test {
+        color: var(--color, teal);
+      }
+    `,
+    {
+      config,
+      forceSingleTheme: 'mint'
+    }
+  );
+});
+
+it('Produces a single theme with variables by default with inlineRootThemeVariables off', () => {
+  const config = {
+    default: {
+      color: 'purple'
+    },
+    mint: {
+      color: 'teal'
+    }
+  };
+
   return run(
     `
       .test {
@@ -221,11 +280,11 @@ it('Produces a single theme with variables by default', () => {
     `,
     {
       config,
-      forceSingleTheme: 'mint'
+      forceSingleTheme: 'mint',
+      inlineRootThemeVariables: false
     }
   );
 });
-
 it('Optimizes single theme by removing variables', () => {
   const config = {
     default: {
@@ -449,3 +508,88 @@ 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);
+        background-image: linear-gradient(to right, var(--background), var(--background))
+      }
+
+      :root {
+        --background: yellow
+      }
+
+      .dark {
+        --background: pink
+      }
+      .mint.light {
+        --background: teal
+      }
+    `,
+    {
+      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
+    }
+  );
+});

__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,

__tests__/test-modern-themes-ts/theme.ts

@@ -0,0 +1,11 @@
+export default () => ({
+  default: {
+    light: {
+      background: 'yellow',
+      color: 'green'
+    },
+    dark: {
+      background: 'pink'
+    }
+  }
+});

package.json

@@ -119,6 +119,7 @@
     "testPathIgnorePatterns": [
       "/node_modules/",
       "test-component-themes",
+      "test-modern-themes",
       "test-utils"
     ],
     "collectCoverageFrom": [

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
       });
     }