@volverjs/style 0.1.28 → 0.1.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/props/index.scss +4 -1
- package/src/props/media.scss +21 -6
package/package.json
CHANGED
package/src/props/index.scss
CHANGED
|
@@ -6,8 +6,11 @@
|
|
|
6
6
|
@use 'filters';
|
|
7
7
|
@use 'input';
|
|
8
8
|
@use 'layout';
|
|
9
|
-
@use 'media';
|
|
10
9
|
@use 'sizing';
|
|
11
10
|
@use 'spacing';
|
|
12
11
|
@use 'transitions';
|
|
13
12
|
@use 'typography';
|
|
13
|
+
|
|
14
|
+
// `media` is left out on purpose: `@custom-media` needs a build step to be
|
|
15
|
+
// resolved, and without one a minifier warns about every rule. A consumer
|
|
16
|
+
// whose pipeline resolves them imports `scss/props/media` on its own.
|
package/src/props/media.scss
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
@use '../context' as *;
|
|
2
2
|
|
|
3
|
+
// Opt-in, left out of `props/index.scss`: `@custom-media` is a draft that has
|
|
4
|
+
// to be resolved at build time (postcss-custom-media, or lightningcss with
|
|
5
|
+
// `drafts.customMedia`), and each resolver reads the definitions of the file
|
|
6
|
+
// it is transforming, so import this module where the queries are used.
|
|
7
|
+
|
|
3
8
|
// motion
|
|
4
9
|
@custom-media --motion-ok (prefers-reduced-motion: no-preference);
|
|
5
10
|
@custom-media --motion-not-ok (prefers-reduced-motion: reduce);
|
|
@@ -16,7 +21,7 @@
|
|
|
16
21
|
@custom-media --os-dark (prefers-color-scheme: dark);
|
|
17
22
|
@custom-media --os-light (prefers-color-scheme: light);
|
|
18
23
|
|
|
19
|
-
//
|
|
24
|
+
// contrast
|
|
20
25
|
@custom-media --high-contrast (prefers-contrast: more);
|
|
21
26
|
@custom-media --low-contrast (prefers-contrast: less);
|
|
22
27
|
|
|
@@ -33,17 +38,27 @@
|
|
|
33
38
|
@custom-media --pointer (hover) and (pointer: coarse);
|
|
34
39
|
@custom-media --mouse (hover) and (pointer: fine);
|
|
35
40
|
|
|
36
|
-
// breakpoints
|
|
37
|
-
|
|
41
|
+
// breakpoints: the same widths as the `bp-only`, `bp-up` and `bp-down`
|
|
42
|
+
// mixins. A range stops short of the next breakpoint instead of sharing its
|
|
43
|
+
// first pixel, and the last breakpoint has no upper bound.
|
|
44
|
+
// stylelint-disable custom-media-pattern
|
|
38
45
|
$old-breakpoint: null;
|
|
39
46
|
$old-breakpoint-value: null;
|
|
47
|
+
|
|
40
48
|
@each $breakpoint, $breakpoint-value in $breakpoints {
|
|
41
49
|
@if $old-breakpoint {
|
|
42
|
-
@custom-media --#{$old-breakpoint}-only (#{$old-breakpoint-value} <= width
|
|
43
|
-
@custom-media --#{$old-breakpoint}-n-
|
|
44
|
-
@custom-media --#{$old-breakpoint}-n-below (width <= #{$breakpoint-value});
|
|
50
|
+
@custom-media --#{$old-breakpoint}-only (#{$old-breakpoint-value} <= width < #{$breakpoint-value});
|
|
51
|
+
@custom-media --#{$old-breakpoint}-n-below (width < #{$breakpoint-value});
|
|
45
52
|
}
|
|
46
53
|
|
|
54
|
+
@custom-media --#{$breakpoint}-n-above (width >= #{$breakpoint-value});
|
|
55
|
+
|
|
47
56
|
$old-breakpoint: $breakpoint;
|
|
48
57
|
$old-breakpoint-value: $breakpoint-value;
|
|
49
58
|
}
|
|
59
|
+
|
|
60
|
+
@if $old-breakpoint {
|
|
61
|
+
@custom-media --#{$old-breakpoint}-only (width >= #{$old-breakpoint-value});
|
|
62
|
+
@custom-media --#{$old-breakpoint}-n-below (width >= 0);
|
|
63
|
+
}
|
|
64
|
+
// stylelint-enable custom-media-pattern
|