Add light/dark :where mixins

Author: rtivital

package.json

@@ -38,12 +38,12 @@
   "scripts": {
     "build": "tsc --project tsconfig.build.json && echo 'declare module \"postcss-preset-mantine\";' > dist/index.d.ts",
     "lint": "eslint src --cache",
-    "format": "prettier src",
-    "format:check": "prettier --check src",
+    "prettier:check": "prettier --check src",
     "typecheck": "tsc --noEmit",
     "jest": "jest",
+    "jest:update-snapshots": "jest --updateSnapshot",
     "prepublish": "yarn test && yarn build",
-    "test": "npm run lint && npm run format:check && npm run typecheck && npm run jest",
+    "test": "npm run lint && npm run prettier:check && npm run typecheck && npm run jest",
     "clean": "rm -rf dist",
     "release": "esno scripts/release"
   },

src/preset.ts

@@ -6,15 +6,34 @@ const lightDark = require('./postcss-light-dark');
 const converters = require('./converters');
 const theme = require('./postcss-mantine-theme');
 
-function colorSchemeMixin(colorScheme: 'light' | 'dark') {
+function colorSchemeMixin(colorScheme: 'light' | 'dark', type: 'where' | 'default' = 'default') {
+  if (type === 'where') {
+    return {
+      [`:where([data-mantine-color-scheme='${colorScheme}']) &`]: {
+        '@mixin-content': {},
+      },
+    };
+  }
+
   return {
     [`[data-mantine-color-scheme='${colorScheme}'] &`]: {
       '@mixin-content': {},
     },
   };
 }
 
-function rootColorSchemeMixin(colorScheme: 'light' | 'dark') {
+function rootColorSchemeMixin(
+  colorScheme: 'light' | 'dark',
+  type: 'where' | 'default' = 'default'
+) {
+  if (type === 'where') {
+    return {
+      [`&:where(:root[data-mantine-color-scheme='${colorScheme}'])`]: {
+        '@mixin-content': {},
+      },
+    };
+  }
+
   return {
     [`&[data-mantine-color-scheme='${colorScheme}']`]: {
       '@mixin-content': {},
@@ -86,6 +105,10 @@ module.exports = () => {
           dark: colorSchemeMixin('dark'),
           'light-root': rootColorSchemeMixin('light'),
           'dark-root': rootColorSchemeMixin('dark'),
+          'where-light': colorSchemeMixin('light', 'where'),
+          'where-dark': colorSchemeMixin('dark', 'where'),
+          'where-light-root': rootColorSchemeMixin('light', 'where'),
+          'where-dark-root': rootColorSchemeMixin('dark', 'where'),
           hover: hoverMixin,
           rtl: rtlMixin,
           ltr: ltrMixin,

src/tests/__snapshots__/mixin-light-dark.test.ts.snap

@@ -10,3 +10,36 @@ exports[`mixin-light-dark transforms light and dark mixins correctly 1`] = `
 }
 "
 `;
+
+exports[`mixin-light-dark transforms light-root and dark-root mixins correctly 1`] = `
+"
+:root[data-mantine-color-scheme='light'] {
+    color: red
+}
+  :root[data-mantine-color-scheme='dark'] {
+    color: blue
+}
+"
+`;
+
+exports[`mixin-light-dark transforms where-light and where-dark mixins correctly 1`] = `
+"
+:where([data-mantine-color-scheme='light']) .demo {
+    color: red
+}
+  :where([data-mantine-color-scheme='dark']) .demo {
+    color: blue
+}
+"
+`;
+
+exports[`mixin-light-dark transforms where-light-root and where-dark-root mixins correctly 1`] = `
+"
+:root:where(:root[data-mantine-color-scheme='light']) {
+    color: red
+}
+  :root:where(:root[data-mantine-color-scheme='dark']) {
+    color: blue
+}
+"
+`;

src/tests/mixin-light-dark.test.ts

@@ -12,9 +12,60 @@ const baseInput = `
 }
 `;
 
+const whereInput = `
+.demo {
+  @mixin where-light {
+    color: red;
+  }
+
+  @mixin where-dark {
+    color: blue;
+  }
+}
+`;
+
+const rootInput = `
+:root {
+  @mixin light-root {
+    color: red;
+  }
+
+  @mixin dark-root {
+    color: blue;
+  }
+}
+`;
+
+const rootWhereInput = `
+:root {
+  @mixin where-light-root {
+    color: red;
+  }
+
+  @mixin where-dark-root {
+    color: blue;
+  }
+}
+`;
+
 describe('mixin-light-dark', () => {
   it('transforms light and dark mixins correctly', async () => {
     const res = await testTransform(baseInput);
     expect(res.css).toMatchSnapshot();
   });
+
+  it('transforms where-light and where-dark mixins correctly', async () => {
+    const res = await testTransform(whereInput);
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('transforms light-root and dark-root mixins correctly', async () => {
+    const res = await testTransform(rootInput);
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('transforms where-light-root and where-dark-root mixins correctly', async () => {
+    const res = await testTransform(rootWhereInput);
+    expect(res.css).toMatchSnapshot();
+  });
 });