postcss-preset-mantine

19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

postcss-preset-mantine package overview

postcss-preset-mantine is a PostCSS preset that provides CSS functions and mixins for writing styles with Mantine. It is not required but highly recommended. The preset is included in all Mantine style demonstrations. Install it as a dev dependency with: npm install --save-dev postcss-preset-mantine

postcss-preset-mantine included plugins

postcss-preset-mantine includes three main components: postcss-nested plugin, postcss-mixins plugin with Mantine-specific mixins, and a custom plugin providing em/rem functions for unit conversion.

postcss-preset-mantine setup in postcss.config.cjs

Add postcss-preset-mantine to postcss.config.cjs file in the root of your project by adding 'postcss-preset-mantine': {} to the plugins object.

rem and em functions usage

rem() and em() functions convert pixel values to rem and em units respectively. 16px equals 1rem and 16px equals 1em. The em function should be used in media queries, rem everywhere else. Example: rem(16px) becomes calc(1rem * var(--mantine-scale)), and em(320px) in media query becomes 20em.

autoRem option for automatic px to rem conversion

Setting autoRem: true in postcss-preset-mantine config automatically converts all pixel values to rem units in .css files. The conversion works similarly to the rem() function. Note that autoRem only converts CSS properties, not values in @media queries. You must still use em() function for media query values.

autoRem conversion exceptions

autoRem does not convert pixel values in the following cases: values inside calc(), var(), clamp(), and url() functions; values in the content property; and values containing rgb(), rgba(), hsl(), or hsla() color functions. Use rem() function manually to convert these.

dark and light mixins for color scheme styles

Use @mixin light and @mixin dark to create styles applied only in specific color schemes. Example: .demo { color: red; @mixin dark { color: blue; } } transforms to [data-mantine-color-scheme='light'] .demo { color: red; } and [data-mantine-color-scheme='dark'] .demo { color: blue; }. Best practice: define light scheme styles first, then override with dark mixin.

light-root and dark-root mixins for :root element

Use @mixin light-root and @mixin dark-root instead of light and dark mixins when defining styles on the :root or html element. Example: :root { @mixin light-root { --color: red; } @mixin dark-root { --color: blue; } }

smaller-than and larger-than mixins for responsive styles

Use @mixin smaller-than and @mixin larger-than to create styles for specific breakpoints. Both can take pixel values or Mantine breakpoint variables like $mantine-breakpoint-sm. Breakpoint values are converted to em units. In smaller-than mixin, 0.1px is subtracted from the breakpoint value to avoid intersection with larger-than mixin.

light-dark function for color scheme values

light-dark(lightValue, darkValue) function is an alternative to light and dark mixins. It accepts two arguments: the first is applied in light color scheme, the second in dark color scheme. Example: color: light-dark(red, blue) transforms to color: red; and [data-mantine-color-scheme='dark'] .demo { color: blue; }. Does not work on :root/html elements - use light-root and dark-root mixins instead.

alpha function for color transparency

alpha(color, alphaValue) function adds an alpha channel to a color using CSS color-mix. Example: alpha(var(--mantine-color-red-4), 0.5) transforms to color-mix(in srgb, var(--mantine-color-red-4), transparent 50%). Note: color-mix is not supported in older browsers.

lighten and darken functions

lighten(color, amount) and darken(color, amount) functions add white or black to a color respectively using CSS color-mix. Example: lighten(var(--mantine-color-red-4), 0.5) transforms to color-mix(in srgb, var(--mantine-color-red-4), white 50%), and darken(#ffc, 0.2) transforms to color-mix(in srgb, #ffc, black 20%).

hover mixin for interactive styles

@mixin hover creates styles applied on hover. It transforms to media queries that handle both hover-capable devices (applying :hover) and touch devices (applying :active). Example: @mixin hover { color: orange; } transforms to @media (hover: hover) { .demo:hover { color: orange; } } and @media (hover: none) { .demo:active { color: orange; } }

rtl mixin for right-to-left text direction

Use @mixin rtl to create styles applied when dir="rtl" is set on a parent element (typically html). Example: .demo { margin-left: 1rem; @mixin rtl { margin-left: 0; margin-right: 1rem; } } transforms to [dir='rtl'] .demo selector with the overriding styles.

ltr mixin for left-to-right text direction

Use @mixin ltr to create styles applied when dir="ltr" is set on a parent element. Works identically to rtl mixin but for left-to-right direction, transforming to [dir='ltr'] .demo selector.

not-rtl and not-ltr mixins for directional negation

Use @mixin not-rtl or @mixin not-ltr to create styles when direction is opposite or not set. Example: @mixin not-rtl applies when dir="ltr" or dir is not set. Transforms to :root:not([dir='rtl']) .demo selector.

where-* mixins for lower CSS specificity

where-light, where-dark, where-rtl, and where-hover are alternatives to light, dark, rtl, and hover mixins. They produce CSS with lower specificity using :where() selector. Useful for building libraries or extensions where styles need to be easily overridable. Example: @mixin where-light { color: red; } transforms to :where([data-mantine-color-scheme='light']) .demo { color: red; }

Custom mixins configuration

Define custom mixins in the postcss-preset-mantine config using the mixins option. Mixins can be static objects or functions. Example: mixins: { clearfix: { '&::after': { content: '""', display: 'table', clear: 'both' } }, circle: (_mixin, size) => ({ borderRadius: '50%', width: size, height: size }) }. Refer to postcss-mixins documentation for detailed syntax.

Disable specific postcss-preset-mantine features

Set specific features to false in the features option to disable them: lightDarkFunction, nested, colorMixAlpha, remEmFunctions, and mixins. Example: features: { lightDarkFunction: false, nested: false, colorMixAlpha: false, remEmFunctions: false, mixins: false }

Give your agent this brain