diff --git a/src/preset.ts b/src/preset.ts index 023b534..325cc5c 100644 --- a/src/preset.ts +++ b/src/preset.ts @@ -127,26 +127,56 @@ const largerThanMixin = (_mixin: string, breakpoint: string) => ({ }, }); -interface Options { +export interface Options { autoRem?: boolean; mixins?: Record; + 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, }; }; diff --git a/src/tests/__snapshots__/disabled-features.test.ts.snap b/src/tests/__snapshots__/disabled-features.test.ts.snap new file mode 100644 index 0000000..f6b7f43 --- /dev/null +++ b/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); +} +" +`; diff --git a/src/tests/disabled-features.test.ts b/src/tests/disabled-features.test.ts new file mode 100644 index 0000000..71aca38 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/tests/utils.ts b/src/tests/utils.ts index efda06c..18a3ae4 100644 --- a/src/tests/utils.ts +++ b/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) { +export function testTransform(input: string, options?: Options) { return postcss([preset(options)]).process(input, { from: undefined }); }