Add option to disable specific features

Author: rtivital

src/preset.ts

@@ -127,26 +127,56 @@ const largerThanMixin = (_mixin: string, breakpoint: string) => ({
   },
 });
 
-interface Options {
+export interface Options {
   autoRem?: boolean;
   mixins?: Record<string, any>;
+  features?: {
+    lightDarkFunction?: boolean;
+    nested?: boolean;
+    colorMixAlpha?: boolean;
+    remEmFunctions?: boolean;
+    mixins?: boolean;
+  };
 }
 
+const defaultFeatures = {
+  lightDarkFunction: true,
+  nested: true,
+  colorMixAlpha: true,
+  remEmFunctions: true,
+  mixins: true,
+};
+
 module.exports = (options: Options = {}) => {
+  const features = {
+    ...defaultFeatures,
+    ...(options.features || {}),
+  };
+
   const plugins = [];
 
   if (options.autoRem) {
     plugins.push(autorem());
   }
 
-  return {
-    postcssPlugin: 'postcss-preset-mantine',
-    plugins: [
-      lightDark(),
-      nested(),
-      colorMixAlpha(),
-      remEm(),
-      ...plugins,
+  if (features.lightDarkFunction) {
+    plugins.push(lightDark());
+  }
+
+  if (features.nested) {
+    plugins.push(nested());
+  }
+
+  if (features.colorMixAlpha) {
+    plugins.push(colorMixAlpha());
+  }
+
+  if (features.remEmFunctions) {
+    plugins.push(remEm());
+  }
+
+  if (features.mixins) {
+    plugins.push(
       mixins({
         mixins: {
           light: colorSchemeMixin('light'),
@@ -171,8 +201,13 @@ module.exports = (options: Options = {}) => {
           'larger-than': largerThanMixin,
           ...(options.mixins || {}),
         },
-      }),
-    ],
+      })
+    );
+  }
+
+  return {
+    postcssPlugin: 'postcss-preset-mantine',
+    plugins,
   };
 };
 

src/tests/__snapshots__/disabled-features.test.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`disabled-features does not transform light/dark if lightDarkFunction is disabled 1`] = `
+"
+.card {
+  color: light-dark(#000, #fff);
+}
+"
+`;
+
+exports[`disabled-features does not transform rem if rem function is disabled 1`] = `
+"
+.card {
+  padding: rem(32px);
+}
+"
+`;

src/tests/disabled-features.test.ts

@@ -0,0 +1,29 @@
+import { testTransform } from './utils';
+
+const rem = `
+.card {
+  padding: rem(32px);
+}
+`;
+
+const lightDark = `
+.card {
+  color: light-dark(#000, #fff);
+}
+`;
+
+describe('disabled-features', () => {
+  it('does not transform rem if rem function is disabled', async () => {
+    const res = await testTransform(rem, {
+      features: { remEmFunctions: false },
+    });
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('does not transform light/dark if lightDarkFunction is disabled', async () => {
+    const res = await testTransform(lightDark, {
+      features: { lightDarkFunction: false },
+    });
+    expect(res.css).toMatchSnapshot();
+  });
+});

src/tests/utils.ts

@@ -1,6 +1,7 @@
 import postcss from 'postcss';
+import type { Options } from '../preset';
 const preset = require('../preset');
 
-export function testTransform(input: string, options?: Record<string, any>) {
+export function testTransform(input: string, options?: Options) {
   return postcss([preset(options)]).process(input, { from: undefined });
 }