https://github.com/mantinedev/postcss-preset-mantine
Mantine PostCSS preset
https://github.com/mantinedev/postcss-preset-mantine
Last synced: 2 months ago
JSON representation
Mantine PostCSS preset
- Host: GitHub
- URL: https://github.com/mantinedev/postcss-preset-mantine
- Owner: mantinedev
- License: mit
- Created: 2023-03-25T16:22:42.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-21T11:43:55.000Z (11 months ago)
- Last Synced: 2024-10-11T11:29:49.619Z (8 months ago)
- Language: TypeScript
- Size: 3.08 MB
- Stars: 17
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-preset-mantine
[Documentation](http://mantine.dev/styles/postcss-preset)
## Installation
```sh
yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
```
## Usage
Add `postcss-preset-mantine` to your `postcss.config.js` config:
```js
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
```
## rem/em functions
`rem` and `em` functions can be used to convert pixels to rem/em units.
`16px = 1rem` and `16px = 1em`, `em` values are supposed to be used in media queries,
`rem` everywhere else. You can learn more about units conversions in [this guide](/styles/rem).
```scss
.demo {
font-size: rem(16px);
@media (min-width: em(320px)) {
font-size: rem(32px);
}
}
```
Will be transformed to:
```scss
.demo {
font-size: calc(1rem * var(--mantine-scale));
@media (min-width: 20em) {
font-size: calc(2rem * var(--mantine-scale));
}
}
```
## dark and light mixins
`dark` and `light` mixins can be used to create styles that will be applied only in dark or light color scheme.
```scss
.demo {
@mixin light {
color: red;
}
@mixin dark {
color: blue;
}
}
```
Will be transformed to:
```scss
[data-mantine-color-scheme='light'] .demo {
color: red;
}
[data-mantine-color-scheme='dark'] .demo {
color: blue;
}
```
Note that usually you do not need to use both `light` and `dark` mixins at the same time.
It is easier to define styles for light color scheme and then use `dark` mixin to override them in dark color scheme.
```scss
.demo {
// Value for light color scheme
color: red;
@mixin dark {
// Value for dark color scheme
color: blue;
}
}
```
To define values for light/dark color scheme on the `:root`/`html` element, use `light-root` and `dark-root` mixins instead:
```scss
:root {
@mixin light-root {
--color: red;
}
@mixin dark-root {
--color: blue;
}
}
```
## smaller-than and larger-than mixins
`smaller-than` and `larger-than` mixins can be used to create styles that will be applied only when screen is smaller or larger than specified breakpoint.
```scss
.demo {
@mixin smaller-than 320px {
color: red;
}
@mixin larger-than 320px {
color: blue;
}
}
```
Will be transformed to:
```scss
// Breakpoint values are converted to em units
// In smaller-than mixin 0.1px is subtracted from breakpoint value
// to avoid intersection with larger-than mixin
@media (max-width: 19.99375em) {
.demo {
color: red;
}
}
@media (min-width: 20em) {
.demo {
color: blue;
}
}
```
You can also use `smaller-than` and `larger-than` mixins with [mantine breakpoints](/styles/responsive/#breakpoints-variables-in-css-modules):
```scss
.demo {
@mixin smaller-than $mantine-breakpoint-sm {
color: red;
}
@mixin larger-than $mantine-breakpoint-sm {
color: blue;
}
}
```
## light-dark function
`light-dark` function is an alternative to `light` and `dark` mixins. It accepts two arguments:
first argument is rule that will be applied in light color scheme, second argument is rule that will be applied in dark color scheme.
```css
.demo {
color: light-dark(red, blue);
}
```
Will be transformed to:
```css
.demo {
color: red;
}
[data-mantine-color-scheme='dark'] .demo {
color: blue;
}
```
### light-dark with html and :root selectors
Note that `light-dark` function does not work on `:root`/`html` element. Use `light-root` and `dark-root` mixins instead:
```scss
// ❌ Does not work
:root {
--color: light-dark(red, blue);
}
// ✅ Works
:root {
@mixin light-root {
--color: red;
}
@mixin dark-root {
--color: blue;
}
}
```
### light-dark and !important
`!important` at rule level:
```scss
.button {
color: light-dark(red, blue) !important;
}
// Is transformed to
.button {
background: red !important;
}
[data-mantine-color-scheme='dark'] .button {
background: blue !important;
}
```
`!important` at value level:
```scss
// !important at value level
.button {
color: light-dark(red !important, blue);
}
// Is transformed to
.button {
background: red !important;
}
[data-mantine-color-scheme='dark'] .button {
background: blue;
}
```
## alpha function
`alpha` function can be used to add alpha channel to color. Note that it uses [color-mix](https://caniuse.com/mdn-css_types_color_color-mix) which is not supported in some older browsers.
```scss
.demo {
color: alpha(var(--mantine-color-red-4), 0.5);
border: 1px solid alpha(#ffc, 0.2);
}
```
Will be transformed to:
```scss
.demo {
color: color-mix(in srgb, var(--mantine-color-red-4), transparent 50%);
border: 1px solid color-mix(in srgb, #ffc, transparent 80%);
}
```
## lighten and darken functions
`lighten` and `darken` functions work similar to `alpha` function, but instead of adding alpha channel they add white or black color to the color with [color-mix](https://caniuse.com/mdn-css_types_color_color-mix).
```scss
.demo {
color: lighten(var(--mantine-color-red-4), 0.5);
border: 1px solid darken(#ffc, 0.2);
}
```
Will be transformed to:
```scss
.demo {
color: color-mix(in srgb, var(--mantine-color-red-4), white 50%);
border: 1px solid color-mix(in srgb, #ffc, black 20%);
}
```
## hover mixin
`hover` mixin can be used to create styles that will be applied on hover.
```css
.demo {
@mixin hover {
color: orange;
}
}
```
Will be transformed to:
```css
@media (hover: hover) {
.demo:hover {
color: orange;
}
}
@media (hover: none) {
.demo:active {
color: orange;
}
}
```
## rtl/ltr mixins
`rtl` mixin can be used to create styles that will be applied when `dir="rtl"` is set on parent element (usually `