postcss-preset-mantine - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

package.json

		{
		"name": "postcss-preset-mantine",
		"version": "1.0.8",
		"version": "1.1.0",
		"description": "PostCSS preset for Mantine (7.0+) applications",
		@@ -5,0 +5,0 @@ "main": "preset.js",

postcss-light-dark.js

		@@ -52,33 +52,9 @@ const postcss = require('postcss');
		const { light: lightVal, dark: darkVal } = getLightDarkValue(value);
		const lightMixin = postcss.atRule({ name: 'mixin', params: 'light' });
		const darkMixin = postcss.atRule({ name: 'mixin', params: 'dark' });
		lightMixin.append(postcss.decl({ prop, value: lightVal }));
		darkMixin.append(postcss.decl({ prop, value: darkVal }));
		decl.parent.insertAfter(decl, lightMixin);
		decl.parent.insertAfter(decl, darkMixin);

		const lightRule = postcss.rule({
		selector: `[data-mantine-color-scheme='light'] ${decl.parent.selector}`,
		});
		const lightDecl = postcss.decl({ prop, value: lightVal });
		lightRule.append(lightDecl);
		root.append(lightRule);

		const darkRule = postcss.rule({
		selector: `[data-mantine-color-scheme='dark'] ${decl.parent.selector}`,
		});
		const darkDecl = postcss.decl({ prop, value: darkVal });
		darkRule.append(darkDecl);
		root.append(darkRule);

		const lightMediaQuery = postcss.atRule({
		name: 'media',
		params: '(prefers-color-scheme: light)',
		});
		const lightMediaDecl = postcss.decl({ prop, value: lightVal });
		lightMediaQuery.append(lightMediaDecl);
		decl.parent.insertAfter(decl, lightMediaQuery);

		const darkMediaQuery = postcss.atRule({
		name: 'media',
		params: '(prefers-color-scheme: dark)',
		});
		const darkMediaDecl = postcss.decl({ prop, value: darkVal });
		darkMediaQuery.append(darkMediaDecl);
		decl.parent.insertAfter(decl, darkMediaQuery);

		decl.remove();
		@@ -85,0 +61,0 @@ }

preset.js

		@@ -49,5 +49,5 @@ const nested = require('postcss-nested');
		plugins: [
		lightDark(),
		nested(),
		remEm(),
		lightDark(),
		mixins({
		@@ -54,0 +54,0 @@ mixins: {

test.js

		const postcss = require('postcss');
		const preset = require('./preset');

		const input = `
		.button {
		&[data-disabled] {
		border-color: light-dark(red, blue);
		}
		}
		`;

		async function test() {
		console.log(
		(
		await postcss([preset]).process('a { border: 1rem solid light-dark(red, var(--blue)); }', {
		await postcss([preset]).process(input, {
		from: undefined,
		@@ -9,0 +17,0 @@ })

New alerts