css-calipers 0.7.0 → 0.9.0
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/README.md +36 -1
- package/dist/cjs/libraryHelpers/vanilla-extract.js +7 -0
- package/dist/cjs/mediaQueries/factory.js +162 -0
- package/dist/cjs/mediaQueries/helpers.js +97 -0
- package/dist/cjs/mediaQueries/index.js +22 -0
- package/dist/cjs/mediaQueries/linting/core.js +19 -0
- package/dist/cjs/mediaQueries/linting/resolution.js +11 -0
- package/dist/cjs/mediaQueries/linting.js +24 -0
- package/dist/cjs/mediaQueries/mediaQueries.js +51 -0
- package/dist/cjs/mediaQueries/mediaQueryFactory.js +120 -0
- package/dist/cjs/mediaQueries/moduleRegistry.js +5 -0
- package/dist/cjs/mediaQueries/modules/custom.js +26 -0
- package/dist/cjs/mediaQueries/modules/dimensions.js +59 -0
- package/dist/cjs/mediaQueries/modules/display.js +20 -0
- package/dist/cjs/mediaQueries/modules/environment.js +20 -0
- package/dist/cjs/mediaQueries/modules/index.js +23 -0
- package/dist/cjs/mediaQueries/modules/interaction.js +26 -0
- package/dist/cjs/mediaQueries/modules/preferences.js +26 -0
- package/dist/cjs/mediaQueries/modules/resolution.js +29 -0
- package/dist/cjs/mediaQueries/types.js +2 -0
- package/dist/cjs/mediaQueries/validation.js +133 -0
- package/dist/esm/libraryHelpers/vanilla-extract.d.ts +3 -0
- package/dist/esm/libraryHelpers/vanilla-extract.d.ts.map +1 -0
- package/dist/esm/libraryHelpers/vanilla-extract.js +3 -0
- package/dist/esm/mediaQueries/factory.d.ts +29 -0
- package/dist/esm/mediaQueries/factory.d.ts.map +1 -0
- package/dist/esm/mediaQueries/factory.js +158 -0
- package/dist/esm/mediaQueries/helpers.d.ts +40 -0
- package/dist/esm/mediaQueries/helpers.d.ts.map +1 -0
- package/dist/esm/mediaQueries/helpers.js +87 -0
- package/dist/esm/mediaQueries/index.d.ts +7 -0
- package/dist/esm/mediaQueries/index.d.ts.map +1 -0
- package/dist/esm/mediaQueries/index.js +6 -0
- package/dist/esm/mediaQueries/linting/core.d.ts +5 -0
- package/dist/esm/mediaQueries/linting/core.d.ts.map +1 -0
- package/dist/esm/mediaQueries/linting/core.js +14 -0
- package/dist/esm/mediaQueries/linting/resolution.d.ts +3 -0
- package/dist/esm/mediaQueries/linting/resolution.d.ts.map +1 -0
- package/dist/esm/mediaQueries/linting/resolution.js +7 -0
- package/dist/esm/mediaQueries/linting.d.ts +4 -0
- package/dist/esm/mediaQueries/linting.d.ts.map +1 -0
- package/dist/esm/mediaQueries/linting.js +20 -0
- package/dist/esm/mediaQueries/mediaQueries.d.ts +21 -0
- package/dist/esm/mediaQueries/mediaQueries.d.ts.map +1 -0
- package/dist/esm/mediaQueries/mediaQueries.js +46 -0
- package/dist/esm/mediaQueries/moduleRegistry.d.ts +27 -0
- package/dist/esm/mediaQueries/moduleRegistry.d.ts.map +1 -0
- package/dist/esm/mediaQueries/moduleRegistry.js +1 -0
- package/dist/esm/mediaQueries/modules/custom.d.ts +10 -0
- package/dist/esm/mediaQueries/modules/custom.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/custom.js +22 -0
- package/dist/esm/mediaQueries/modules/dimensions.d.ts +17 -0
- package/dist/esm/mediaQueries/modules/dimensions.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/dimensions.js +55 -0
- package/dist/esm/mediaQueries/modules/display.d.ts +9 -0
- package/dist/esm/mediaQueries/modules/display.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/display.js +16 -0
- package/dist/esm/mediaQueries/modules/environment.d.ts +9 -0
- package/dist/esm/mediaQueries/modules/environment.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/environment.js +16 -0
- package/dist/esm/mediaQueries/modules/index.d.ts +8 -0
- package/dist/esm/mediaQueries/modules/index.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/index.js +7 -0
- package/dist/esm/mediaQueries/modules/interaction.d.ts +11 -0
- package/dist/esm/mediaQueries/modules/interaction.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/interaction.js +22 -0
- package/dist/esm/mediaQueries/modules/preferences.d.ts +11 -0
- package/dist/esm/mediaQueries/modules/preferences.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/preferences.js +22 -0
- package/dist/esm/mediaQueries/modules/resolution.d.ts +10 -0
- package/dist/esm/mediaQueries/modules/resolution.d.ts.map +1 -0
- package/dist/esm/mediaQueries/modules/resolution.js +25 -0
- package/dist/esm/mediaQueries/types.d.ts +117 -0
- package/dist/esm/mediaQueries/types.d.ts.map +1 -0
- package/dist/esm/mediaQueries/types.js +1 -0
- package/dist/esm/mediaQueries/validation.d.ts +14 -0
- package/dist/esm/mediaQueries/validation.d.ts.map +1 -0
- package/dist/esm/mediaQueries/validation.js +122 -0
- package/package.json +27 -9
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.emitDisplayFeatures = void 0;
|
|
4
|
+
const helpers_1 = require("../helpers");
|
|
5
|
+
const emitDisplayFeatures = (props, helpers, validate) => {
|
|
6
|
+
if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'display')) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const { addFeature } = helpers;
|
|
10
|
+
if (props.colorGamut) {
|
|
11
|
+
addFeature('color-gamut', props.colorGamut);
|
|
12
|
+
}
|
|
13
|
+
if (props.dynamicRange) {
|
|
14
|
+
addFeature('dynamic-range', props.dynamicRange);
|
|
15
|
+
}
|
|
16
|
+
if (props.invertedColors) {
|
|
17
|
+
addFeature('inverted-colors', props.invertedColors);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
exports.emitDisplayFeatures = emitDisplayFeatures;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.emitEnvironmentFeatures = void 0;
|
|
4
|
+
const helpers_1 = require("../helpers");
|
|
5
|
+
const emitEnvironmentFeatures = (props, helpers, validate) => {
|
|
6
|
+
if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'environment')) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const { addFeature } = helpers;
|
|
10
|
+
if (props.scripting) {
|
|
11
|
+
addFeature('scripting', props.scripting);
|
|
12
|
+
}
|
|
13
|
+
if (props.overflowBlock) {
|
|
14
|
+
addFeature('overflow-block', props.overflowBlock);
|
|
15
|
+
}
|
|
16
|
+
if (props.overflowInline) {
|
|
17
|
+
addFeature('overflow-inline', props.overflowInline);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
exports.emitEnvironmentFeatures = emitEnvironmentFeatures;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./custom"), exports);
|
|
18
|
+
__exportStar(require("./dimensions"), exports);
|
|
19
|
+
__exportStar(require("./display"), exports);
|
|
20
|
+
__exportStar(require("./environment"), exports);
|
|
21
|
+
__exportStar(require("./interaction"), exports);
|
|
22
|
+
__exportStar(require("./preferences"), exports);
|
|
23
|
+
__exportStar(require("./resolution"), exports);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.emitInteractionFeatures = void 0;
|
|
4
|
+
const helpers_1 = require("../helpers");
|
|
5
|
+
const emitInteractionFeatures = (props, helpers, validate) => {
|
|
6
|
+
if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'interaction')) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const { addFeature } = helpers;
|
|
10
|
+
if (props.hover) {
|
|
11
|
+
addFeature('hover', props.hover);
|
|
12
|
+
}
|
|
13
|
+
if (props.anyHover) {
|
|
14
|
+
addFeature('any-hover', props.anyHover);
|
|
15
|
+
}
|
|
16
|
+
if (props.pointer) {
|
|
17
|
+
addFeature('pointer', props.pointer);
|
|
18
|
+
}
|
|
19
|
+
if (props.anyPointer) {
|
|
20
|
+
addFeature('any-pointer', props.anyPointer);
|
|
21
|
+
}
|
|
22
|
+
if (props.update) {
|
|
23
|
+
addFeature('update', props.update);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
exports.emitInteractionFeatures = emitInteractionFeatures;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.emitPreferencesFeatures = void 0;
|
|
4
|
+
const helpers_1 = require("../helpers");
|
|
5
|
+
const emitPreferencesFeatures = (props, helpers, validate) => {
|
|
6
|
+
if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'preferences')) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const { addFeature } = helpers;
|
|
10
|
+
if (props.colorScheme) {
|
|
11
|
+
addFeature('prefers-color-scheme', props.colorScheme);
|
|
12
|
+
}
|
|
13
|
+
if (props.reducedMotion) {
|
|
14
|
+
addFeature('prefers-reduced-motion', props.reducedMotion);
|
|
15
|
+
}
|
|
16
|
+
if (props.reducedData) {
|
|
17
|
+
addFeature('prefers-reduced-data', props.reducedData);
|
|
18
|
+
}
|
|
19
|
+
if (props.contrast) {
|
|
20
|
+
addFeature('prefers-contrast', props.contrast);
|
|
21
|
+
}
|
|
22
|
+
if (props.forcedColors) {
|
|
23
|
+
addFeature('forced-colors', props.forcedColors);
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
exports.emitPreferencesFeatures = emitPreferencesFeatures;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.emitResolutionFeatures = void 0;
|
|
4
|
+
const helpers_1 = require("../helpers");
|
|
5
|
+
const validation_1 = require("../validation");
|
|
6
|
+
const linting_1 = require("../linting");
|
|
7
|
+
const resolution_1 = require("../linting/resolution");
|
|
8
|
+
const emitResolutionFeatures = (props, helpers, validate) => {
|
|
9
|
+
if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateResolutionValues, 'resolution', 'resolution values must be greater than 0')) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
if (!(0, linting_1.runMediaQueryLint)(props, helpers, resolution_1.lintResolutionRedundancy, 'resolution should not be combined with minResolution or maxResolution')) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'resolution')) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
const { addFeature } = helpers;
|
|
19
|
+
if (props.resolutionValue) {
|
|
20
|
+
addFeature('resolution', props.resolutionValue);
|
|
21
|
+
}
|
|
22
|
+
if (props.minResolution) {
|
|
23
|
+
addFeature('min-resolution', props.minResolution);
|
|
24
|
+
}
|
|
25
|
+
if (props.maxResolution) {
|
|
26
|
+
addFeature('max-resolution', props.maxResolution);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
exports.emitResolutionFeatures = emitResolutionFeatures;
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.validateResolutionValues = exports.validateAspectRatioValuesPositive = exports.validateMinMaxAspectRatio = exports.validateHeightValuesPositive = exports.validateMinMaxHeight = exports.validateWidthValuesPositive = exports.validateMinMaxWidth = exports.runMediaQueryValidation = void 0;
|
|
4
|
+
const helpers_1 = require("./helpers");
|
|
5
|
+
const core_1 = require("../core");
|
|
6
|
+
const toValidationResult = (error, fallback) => {
|
|
7
|
+
if (error instanceof Error && error.message)
|
|
8
|
+
return error.message;
|
|
9
|
+
return fallback;
|
|
10
|
+
};
|
|
11
|
+
const runMediaQueryValidation = (config, helpers, check, context, fallbackMessage = 'Invalid media query configuration') => {
|
|
12
|
+
if (!check)
|
|
13
|
+
return true;
|
|
14
|
+
try {
|
|
15
|
+
check(config);
|
|
16
|
+
return true;
|
|
17
|
+
}
|
|
18
|
+
catch (error) {
|
|
19
|
+
const result = toValidationResult(error, fallbackMessage);
|
|
20
|
+
return (0, helpers_1.applyMediaQueryValidation)(config, helpers, () => result, context);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
exports.runMediaQueryValidation = runMediaQueryValidation;
|
|
24
|
+
const validateMinMaxWidth = (props) => {
|
|
25
|
+
if (!props.minWidth || !props.maxWidth)
|
|
26
|
+
return;
|
|
27
|
+
(0, core_1.assertMatchingUnits)(props.minWidth, props.maxWidth, 'mediaQueries.minMaxWidth');
|
|
28
|
+
(0, core_1.assertCondition)(props.minWidth.getValue() <= props.maxWidth.getValue(), 'minWidth must be less than or equal to maxWidth');
|
|
29
|
+
};
|
|
30
|
+
exports.validateMinMaxWidth = validateMinMaxWidth;
|
|
31
|
+
const validateWidthValuesPositive = (props) => {
|
|
32
|
+
const assertPositive = (value, label) => {
|
|
33
|
+
(0, core_1.assertCondition)(value.getValue() > 0, `${label} must be greater than 0`);
|
|
34
|
+
};
|
|
35
|
+
if (props.width) {
|
|
36
|
+
assertPositive(props.width, 'width');
|
|
37
|
+
}
|
|
38
|
+
if (props.minWidth) {
|
|
39
|
+
assertPositive(props.minWidth, 'minWidth');
|
|
40
|
+
}
|
|
41
|
+
if (props.maxWidth) {
|
|
42
|
+
assertPositive(props.maxWidth, 'maxWidth');
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
exports.validateWidthValuesPositive = validateWidthValuesPositive;
|
|
46
|
+
const validateMinMaxHeight = (props) => {
|
|
47
|
+
if (!props.minHeight || !props.maxHeight)
|
|
48
|
+
return;
|
|
49
|
+
(0, core_1.assertMatchingUnits)(props.minHeight, props.maxHeight, 'mediaQueries.minMaxHeight');
|
|
50
|
+
(0, core_1.assertCondition)(props.minHeight.getValue() <= props.maxHeight.getValue(), 'minHeight must be less than or equal to maxHeight');
|
|
51
|
+
};
|
|
52
|
+
exports.validateMinMaxHeight = validateMinMaxHeight;
|
|
53
|
+
const validateHeightValuesPositive = (props) => {
|
|
54
|
+
const assertPositive = (value, label) => {
|
|
55
|
+
(0, core_1.assertCondition)(value.getValue() > 0, `${label} must be greater than 0`);
|
|
56
|
+
};
|
|
57
|
+
if (props.height) {
|
|
58
|
+
assertPositive(props.height, 'height');
|
|
59
|
+
}
|
|
60
|
+
if (props.minHeight) {
|
|
61
|
+
assertPositive(props.minHeight, 'minHeight');
|
|
62
|
+
}
|
|
63
|
+
if (props.maxHeight) {
|
|
64
|
+
assertPositive(props.maxHeight, 'maxHeight');
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
exports.validateHeightValuesPositive = validateHeightValuesPositive;
|
|
68
|
+
const parseAspectRatio = (value) => {
|
|
69
|
+
if (value === undefined || value === null)
|
|
70
|
+
return null;
|
|
71
|
+
if (typeof value === 'number')
|
|
72
|
+
return Number.isFinite(value) ? value : null;
|
|
73
|
+
const trimmed = value.trim();
|
|
74
|
+
if (!trimmed)
|
|
75
|
+
return null;
|
|
76
|
+
if (trimmed.includes('/')) {
|
|
77
|
+
const [left, right] = trimmed.split('/');
|
|
78
|
+
if (left === undefined || right === undefined)
|
|
79
|
+
return null;
|
|
80
|
+
const numerator = Number(left.trim());
|
|
81
|
+
const denominator = Number(right.trim());
|
|
82
|
+
if (!Number.isFinite(numerator) || !Number.isFinite(denominator)) {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
if (denominator === 0)
|
|
86
|
+
return null;
|
|
87
|
+
return numerator / denominator;
|
|
88
|
+
}
|
|
89
|
+
const parsed = Number(trimmed);
|
|
90
|
+
return Number.isFinite(parsed) ? parsed : null;
|
|
91
|
+
};
|
|
92
|
+
const validateMinMaxAspectRatio = (props) => {
|
|
93
|
+
if (!props.minAspectRatio || !props.maxAspectRatio)
|
|
94
|
+
return;
|
|
95
|
+
const minRatio = parseAspectRatio(props.minAspectRatio);
|
|
96
|
+
const maxRatio = parseAspectRatio(props.maxAspectRatio);
|
|
97
|
+
(0, core_1.assertCondition)(minRatio !== null && maxRatio !== null, 'aspectRatio values must be valid numbers or ratio strings');
|
|
98
|
+
(0, core_1.assertCondition)(minRatio <= maxRatio, 'minAspectRatio must be less than or equal to maxAspectRatio');
|
|
99
|
+
};
|
|
100
|
+
exports.validateMinMaxAspectRatio = validateMinMaxAspectRatio;
|
|
101
|
+
const validateAspectRatioValuesPositive = (props) => {
|
|
102
|
+
const assertValidPositive = (label, value) => {
|
|
103
|
+
(0, core_1.assertCondition)(value !== null && value > 0, `${label} must be a valid ratio greater than 0`);
|
|
104
|
+
};
|
|
105
|
+
if (props.aspectRatio !== undefined) {
|
|
106
|
+
assertValidPositive('aspectRatio', parseAspectRatio(props.aspectRatio));
|
|
107
|
+
}
|
|
108
|
+
if (props.minAspectRatio !== undefined) {
|
|
109
|
+
assertValidPositive('minAspectRatio', parseAspectRatio(props.minAspectRatio));
|
|
110
|
+
}
|
|
111
|
+
if (props.maxAspectRatio !== undefined) {
|
|
112
|
+
assertValidPositive('maxAspectRatio', parseAspectRatio(props.maxAspectRatio));
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
exports.validateAspectRatioValuesPositive = validateAspectRatioValuesPositive;
|
|
116
|
+
const validateResolutionValues = (props) => {
|
|
117
|
+
const assertPositive = (value, label) => {
|
|
118
|
+
(0, core_1.assertCondition)(value.getValue() > 0, `${label} must be greater than 0`);
|
|
119
|
+
};
|
|
120
|
+
if (props.resolutionValue) {
|
|
121
|
+
assertPositive(props.resolutionValue, 'resolution');
|
|
122
|
+
}
|
|
123
|
+
if (props.minResolution) {
|
|
124
|
+
assertPositive(props.minResolution, 'minResolution');
|
|
125
|
+
}
|
|
126
|
+
if (props.maxResolution) {
|
|
127
|
+
assertPositive(props.maxResolution, 'maxResolution');
|
|
128
|
+
}
|
|
129
|
+
if (props.minResolution && props.maxResolution) {
|
|
130
|
+
(0, core_1.assertMatchingUnits)(props.minResolution, props.maxResolution, 'mediaQueries.resolutionUnits');
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
exports.validateResolutionValues = validateResolutionValues;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vanilla-extract.d.ts","sourceRoot":"","sources":["../../../src/libraryHelpers/vanilla-extract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,eAAO,MAAM,8BAA8B,GACzC,OAAO,gBAAgB,KACtB,MAAM,CAAC,MAAM,EAAE,OAAO,CAEvB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ComplexStyleRule, StyleRule } from './types';
|
|
2
|
+
import type { MediaQueryBuilderConfig } from './helpers';
|
|
3
|
+
import type { IMediaQueryProps } from './mediaQueries';
|
|
4
|
+
import type { MediaQueryModulePropsMap, MediaQueryModulesList } from './moduleRegistry';
|
|
5
|
+
type UnionToIntersection<T> = (T extends unknown ? (value: T) => void : never) extends (value: infer R) => void ? R : never;
|
|
6
|
+
type ModulesToProps<TModules extends MediaQueryModulesList> = UnionToIntersection<MediaQueryModulePropsMap[TModules[number]]>;
|
|
7
|
+
type FactoryQueryProps<TModules extends MediaQueryModulesList | undefined> = TModules extends MediaQueryModulesList ? ModulesToProps<TModules> : IMediaQueryProps;
|
|
8
|
+
type MediaQueryStyleMap<TQueries> = Partial<Record<keyof TQueries, StyleRule>>;
|
|
9
|
+
type CustomHookResult = boolean | string | null | undefined | {
|
|
10
|
+
valid: boolean;
|
|
11
|
+
message?: string;
|
|
12
|
+
};
|
|
13
|
+
type MediaQueryFactoryCustomHooks = {
|
|
14
|
+
key: string;
|
|
15
|
+
validator?: (props: IMediaQueryProps) => CustomHookResult;
|
|
16
|
+
linter?: (props: IMediaQueryProps) => CustomHookResult;
|
|
17
|
+
};
|
|
18
|
+
export type MediaQueryFactoryConfig<TModules extends MediaQueryModulesList | undefined = undefined, TOutput = ComplexStyleRule> = MediaQueryBuilderConfig & {
|
|
19
|
+
label: string;
|
|
20
|
+
modules?: TModules;
|
|
21
|
+
output?: (media: ComplexStyleRule) => TOutput;
|
|
22
|
+
custom?: MediaQueryFactoryCustomHooks;
|
|
23
|
+
};
|
|
24
|
+
export declare const mediaQueryFactory: <TModules extends MediaQueryModulesList | undefined, TQueries extends Record<string, FactoryQueryProps<TModules>>, TOutput = ComplexStyleRule>(options: {
|
|
25
|
+
queries: TQueries;
|
|
26
|
+
config: MediaQueryFactoryConfig<TModules, TOutput>;
|
|
27
|
+
}) => (stylesByQuery: MediaQueryStyleMap<TQueries>) => TOutput;
|
|
28
|
+
export {};
|
|
29
|
+
//# sourceMappingURL=factory.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../src/mediaQueries/factory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,OAAO,KAAK,EAEV,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAE1B,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAC5B,CAAC,SAAS,OAAO,GAAG,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,KAAK,CAC/C,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,GAC9B,CAAC,GACD,KAAK,CAAC;AAEV,KAAK,cAAc,CAAC,QAAQ,SAAS,qBAAqB,IACxD,mBAAmB,CAAC,wBAAwB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAElE,KAAK,iBAAiB,CAAC,QAAQ,SAAS,qBAAqB,GAAG,SAAS,IACvE,QAAQ,SAAS,qBAAqB,GAClC,cAAc,CAAC,QAAQ,CAAC,GACxB,gBAAgB,CAAC;AAEvB,KAAK,kBAAkB,CAAC,QAAQ,IAAI,OAAO,CACzC,MAAM,CAAC,MAAM,QAAQ,EAAE,SAAS,CAAC,CAClC,CAAC;AAEF,KAAK,gBAAgB,GACjB,OAAO,GACP,MAAM,GACN,IAAI,GACJ,SAAS,GACT;IACE,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEN,KAAK,4BAA4B,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,gBAAgB,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,gBAAgB,CAAC;CACxD,CAAC;AA+FF,MAAM,MAAM,uBAAuB,CACjC,QAAQ,SAAS,qBAAqB,GAAG,SAAS,GAAG,SAAS,EAC9D,OAAO,GAAG,gBAAgB,IACxB,uBAAuB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,OAAO,CAAC;IAC9C,MAAM,CAAC,EAAE,4BAA4B,CAAC;CACvC,CAAC;AA2DF,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,SAAS,qBAAqB,GAAG,SAAS,EAClD,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAC5D,OAAO,GAAG,gBAAgB,EAC1B,SAAS;IACT,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,uBAAuB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;CACpD,MAuBS,eAAe,kBAAkB,CAAC,QAAQ,CAAC,KAAG,OAkBvD,CAAC"}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { createMediaQueryBuilder } from './helpers';
|
|
2
|
+
import { emitCoreFeatures } from './mediaQueries';
|
|
3
|
+
import { emitCustomFeatures, emitDimensionsFeatures, emitDisplayFeatures, emitEnvironmentFeatures, emitInteractionFeatures, emitPreferencesFeatures, emitResolutionFeatures, } from './modules';
|
|
4
|
+
const ALL_MEDIA_QUERY_MODULES = [
|
|
5
|
+
'core',
|
|
6
|
+
'dimensions',
|
|
7
|
+
'resolution',
|
|
8
|
+
'interaction',
|
|
9
|
+
'preferences',
|
|
10
|
+
'display',
|
|
11
|
+
'environment',
|
|
12
|
+
'custom',
|
|
13
|
+
];
|
|
14
|
+
const MODULE_KEYS = {
|
|
15
|
+
core: ['type', 'minWidth', 'maxWidth'],
|
|
16
|
+
dimensions: [
|
|
17
|
+
'width',
|
|
18
|
+
'height',
|
|
19
|
+
'minHeight',
|
|
20
|
+
'maxHeight',
|
|
21
|
+
'aspectRatio',
|
|
22
|
+
'minAspectRatio',
|
|
23
|
+
'maxAspectRatio',
|
|
24
|
+
'orientation',
|
|
25
|
+
],
|
|
26
|
+
resolution: ['resolutionValue', 'minResolution', 'maxResolution'],
|
|
27
|
+
interaction: ['hover', 'anyHover', 'pointer', 'anyPointer', 'update'],
|
|
28
|
+
preferences: [
|
|
29
|
+
'colorScheme',
|
|
30
|
+
'reducedMotion',
|
|
31
|
+
'reducedData',
|
|
32
|
+
'contrast',
|
|
33
|
+
'forcedColors',
|
|
34
|
+
],
|
|
35
|
+
display: ['colorGamut', 'dynamicRange', 'invertedColors'],
|
|
36
|
+
environment: ['scripting', 'overflowBlock', 'overflowInline'],
|
|
37
|
+
custom: ['customFeatures'],
|
|
38
|
+
};
|
|
39
|
+
const MODULE_EMITTERS = {
|
|
40
|
+
core: emitCoreFeatures,
|
|
41
|
+
dimensions: emitDimensionsFeatures,
|
|
42
|
+
resolution: emitResolutionFeatures,
|
|
43
|
+
interaction: emitInteractionFeatures,
|
|
44
|
+
preferences: emitPreferencesFeatures,
|
|
45
|
+
display: emitDisplayFeatures,
|
|
46
|
+
environment: emitEnvironmentFeatures,
|
|
47
|
+
custom: emitCustomFeatures,
|
|
48
|
+
};
|
|
49
|
+
const ALL_MODULE_KEYS = MODULE_KEYS;
|
|
50
|
+
const KEY_TO_MODULE = Object.fromEntries(Object.keys(ALL_MODULE_KEYS).flatMap((moduleId) => ALL_MODULE_KEYS[moduleId].map((key) => [key, moduleId])));
|
|
51
|
+
const guardUnsupportedProps = (props, modules, config, label) => {
|
|
52
|
+
const allowed = new Set();
|
|
53
|
+
modules.forEach((moduleId) => {
|
|
54
|
+
ALL_MODULE_KEYS[moduleId].forEach((key) => {
|
|
55
|
+
allowed.add(key);
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
Object.keys(props).forEach((key) => {
|
|
59
|
+
var _a, _b;
|
|
60
|
+
if (props[key] === undefined)
|
|
61
|
+
return;
|
|
62
|
+
if (allowed.has(key))
|
|
63
|
+
return;
|
|
64
|
+
const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : 'throw';
|
|
65
|
+
const moduleHint = KEY_TO_MODULE[key];
|
|
66
|
+
const moduleSuffix = moduleHint
|
|
67
|
+
? ` Add "${moduleHint}" to modules.`
|
|
68
|
+
: '';
|
|
69
|
+
const message = `Media query factory "${label}" received unsupported feature "${key}".${moduleSuffix}`;
|
|
70
|
+
if (mode === 'log') {
|
|
71
|
+
console.warn(message);
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (mode === 'allow')
|
|
75
|
+
return;
|
|
76
|
+
throw new Error(message);
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
const normalizeCustomResult = (result) => {
|
|
80
|
+
if (result === undefined || result === null)
|
|
81
|
+
return { valid: true };
|
|
82
|
+
if (typeof result === 'boolean')
|
|
83
|
+
return { valid: result };
|
|
84
|
+
if (typeof result === 'string') {
|
|
85
|
+
return result ? { valid: false, message: result } : { valid: true };
|
|
86
|
+
}
|
|
87
|
+
return result;
|
|
88
|
+
};
|
|
89
|
+
const runCustomValidator = (props, config) => {
|
|
90
|
+
var _a, _b;
|
|
91
|
+
const custom = config.custom;
|
|
92
|
+
if (!(custom === null || custom === void 0 ? void 0 : custom.validator))
|
|
93
|
+
return;
|
|
94
|
+
const normalized = normalizeCustomResult(custom.validator(props));
|
|
95
|
+
if (normalized.valid)
|
|
96
|
+
return;
|
|
97
|
+
const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : 'throw';
|
|
98
|
+
const suffix = normalized.message ? `: ${normalized.message}` : '';
|
|
99
|
+
const message = `Media query factory "${config.label}" custom validator "${custom.key}" failed${suffix}`;
|
|
100
|
+
if (mode === 'log') {
|
|
101
|
+
console.warn(message);
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
if (mode === 'allow')
|
|
105
|
+
return;
|
|
106
|
+
throw new Error(message);
|
|
107
|
+
};
|
|
108
|
+
const runCustomLinter = (props, config) => {
|
|
109
|
+
var _a, _b;
|
|
110
|
+
const custom = config.custom;
|
|
111
|
+
if (!(custom === null || custom === void 0 ? void 0 : custom.linter))
|
|
112
|
+
return;
|
|
113
|
+
const normalized = normalizeCustomResult(custom.linter(props));
|
|
114
|
+
if (normalized.valid)
|
|
115
|
+
return;
|
|
116
|
+
const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.lintingMode) !== null && _b !== void 0 ? _b : 'throw';
|
|
117
|
+
const suffix = normalized.message ? `: ${normalized.message}` : '';
|
|
118
|
+
const message = `Media query factory "${config.label}" custom linter "${custom.key}" flagged${suffix}`;
|
|
119
|
+
if (mode === 'log') {
|
|
120
|
+
console.warn(message);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
if (mode === 'allow')
|
|
124
|
+
return;
|
|
125
|
+
throw new Error(message);
|
|
126
|
+
};
|
|
127
|
+
export const mediaQueryFactory = (options) => {
|
|
128
|
+
var _a;
|
|
129
|
+
const modules = (_a = options.config.modules) !== null && _a !== void 0 ? _a : ALL_MEDIA_QUERY_MODULES;
|
|
130
|
+
const buildMediaQuery = createMediaQueryBuilder({
|
|
131
|
+
emitBase: (props, helpers) => {
|
|
132
|
+
guardUnsupportedProps(props, modules, options.config, options.config.label);
|
|
133
|
+
runCustomValidator(props, options.config);
|
|
134
|
+
runCustomLinter(props, options.config);
|
|
135
|
+
modules.forEach((moduleId) => {
|
|
136
|
+
MODULE_EMITTERS[moduleId](props, helpers);
|
|
137
|
+
});
|
|
138
|
+
},
|
|
139
|
+
resolveType: (props) => props.type,
|
|
140
|
+
config: options.config,
|
|
141
|
+
});
|
|
142
|
+
return (stylesByQuery) => {
|
|
143
|
+
const result = {};
|
|
144
|
+
Object.keys(stylesByQuery).forEach((key) => {
|
|
145
|
+
const styles = stylesByQuery[key];
|
|
146
|
+
const props = options.queries[key];
|
|
147
|
+
if (!styles || !props)
|
|
148
|
+
return;
|
|
149
|
+
result[buildMediaQuery(props)] = styles;
|
|
150
|
+
});
|
|
151
|
+
const mediaQuery = {
|
|
152
|
+
'@media': result,
|
|
153
|
+
};
|
|
154
|
+
return options.config.output
|
|
155
|
+
? options.config.output(mediaQuery)
|
|
156
|
+
: mediaQuery;
|
|
157
|
+
};
|
|
158
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { IMeasurement } from '../core';
|
|
2
|
+
type MediaQueryFeatureValue = string | number | IMeasurement;
|
|
3
|
+
type MediaQueryFeatureEmitter = (name: string, value: MediaQueryFeatureValue) => void;
|
|
4
|
+
export type MediaQueryInvalidValueMode = 'allow' | 'log' | 'throw';
|
|
5
|
+
export type MediaQueryLintingMode = 'allow' | 'log' | 'throw';
|
|
6
|
+
export type MediaQueryBuilderConfig = {
|
|
7
|
+
errorHandling?: {
|
|
8
|
+
invalidValueMode?: MediaQueryInvalidValueMode;
|
|
9
|
+
lintingMode?: MediaQueryLintingMode;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export interface MediaQueryBuilderHelpers {
|
|
13
|
+
addFeature: MediaQueryFeatureEmitter;
|
|
14
|
+
config: MediaQueryBuilderConfig;
|
|
15
|
+
}
|
|
16
|
+
export type MediaQueryValidationResult = boolean | string | null | undefined | {
|
|
17
|
+
valid: boolean;
|
|
18
|
+
message?: string;
|
|
19
|
+
};
|
|
20
|
+
export type MediaQueryValidator<TConfig> = (config: TConfig) => MediaQueryValidationResult;
|
|
21
|
+
export type MediaQueryExtensionHandler<TConfig> = (config: TConfig, helpers: MediaQueryBuilderHelpers) => void;
|
|
22
|
+
type MediaQueryBuilderOptions<TConfig> = {
|
|
23
|
+
emitBase: MediaQueryExtensionHandler<TConfig>;
|
|
24
|
+
emitExtensions?: MediaQueryExtensionHandler<TConfig>;
|
|
25
|
+
resolveType?: (config: TConfig) => 'all' | 'print' | 'screen' | undefined;
|
|
26
|
+
config?: MediaQueryBuilderConfig;
|
|
27
|
+
};
|
|
28
|
+
export declare const formatMediaQueryValue: (value: MediaQueryFeatureValue) => string;
|
|
29
|
+
export declare const buildMediaQueryStringFromParts: (mediaType: "all" | "print" | "screen", parts: string[]) => string;
|
|
30
|
+
export declare const createMediaQueryFeatureEmitter: (parts: string[]) => MediaQueryFeatureEmitter;
|
|
31
|
+
type MediaQueryFeatureEmitterOptions = {
|
|
32
|
+
emitted?: Set<string>;
|
|
33
|
+
lintingMode?: MediaQueryLintingMode;
|
|
34
|
+
};
|
|
35
|
+
export declare const createMediaQueryFeatureEmitterWithTracking: (parts: string[], options?: MediaQueryFeatureEmitterOptions) => MediaQueryFeatureEmitter;
|
|
36
|
+
export declare const createMediaQueryBuilder: <TConfig>(options: MediaQueryBuilderOptions<TConfig>) => (config: TConfig) => string;
|
|
37
|
+
export declare const applyMediaQueryValidation: <TConfig>(config: TConfig, helpers: MediaQueryBuilderHelpers, validator?: MediaQueryValidator<TConfig>, context?: string) => boolean;
|
|
38
|
+
export declare const buildMediaQueryFromFeatures: (features: Record<string, MediaQueryFeatureValue>, mediaType?: "all" | "print" | "screen") => string;
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/mediaQueries/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,KAAK,sBAAsB,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;AAE7D,KAAK,wBAAwB,GAAG,CAC9B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,sBAAsB,KAC1B,IAAI,CAAC;AAEV,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,CAAC,EAAE;QACd,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;QAC9C,WAAW,CAAC,EAAE,qBAAqB,CAAC;KACrC,CAAC;CACH,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,wBAAwB,CAAC;IACrC,MAAM,EAAE,uBAAuB,CAAC;CACjC;AAED,MAAM,MAAM,0BAA0B,GAClC,OAAO,GACP,MAAM,GACN,IAAI,GACJ,SAAS,GACT;IACE,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEN,MAAM,MAAM,mBAAmB,CAAC,OAAO,IAAI,CACzC,MAAM,EAAE,OAAO,KACZ,0BAA0B,CAAC;AAEhC,MAAM,MAAM,0BAA0B,CAAC,OAAO,IAAI,CAChD,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,wBAAwB,KAC9B,IAAI,CAAC;AAEV,KAAK,wBAAwB,CAAC,OAAO,IAAI;IACvC,QAAQ,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,0BAA0B,CAAC,OAAO,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1E,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,OAAO,sBAAsB,KAC5B,MAA6D,CAAC;AAEjE,eAAO,MAAM,8BAA8B,GACzC,WAAW,KAAK,GAAG,OAAO,GAAG,QAAQ,EACrC,OAAO,MAAM,EAAE,KACd,MAAgF,CAAC;AAEpF,eAAO,MAAM,8BAA8B,GACzC,OAAO,MAAM,EAAE,KACd,wBAGA,CAAC;AAEJ,KAAK,+BAA+B,GAAG;IACrC,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,0CAA0C,GACrD,OAAO,MAAM,EAAE,EACf,UAAS,+BAAoC,KAC5C,wBAkBF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,EAC7C,SAAS,wBAAwB,CAAC,OAAO,CAAC,MAElC,QAAQ,OAAO,KAAG,MAiB3B,CAAC;AAaF,eAAO,MAAM,yBAAyB,GAAI,OAAO,EAC/C,QAAQ,OAAO,EACf,SAAS,wBAAwB,EACjC,YAAY,mBAAmB,CAAC,OAAO,CAAC,EACxC,UAAU,MAAM,KACf,OAqBF,CAAC;AAEF,eAAO,MAAM,2BAA2B,GACtC,UAAU,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,EAChD,YAAW,KAAK,GAAG,OAAO,GAAG,QAAmB,KAC/C,MAaF,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { hasCssMethod } from '../core';
|
|
2
|
+
export const formatMediaQueryValue = (value) => (hasCssMethod(value) ? value.css() : String(value));
|
|
3
|
+
export const buildMediaQueryStringFromParts = (mediaType, parts) => (parts.length ? `${mediaType} and ${parts.join(' and ')}` : mediaType);
|
|
4
|
+
export const createMediaQueryFeatureEmitter = (parts) => (name, value) => {
|
|
5
|
+
parts.push(`(${name}: ${formatMediaQueryValue(value)})`);
|
|
6
|
+
};
|
|
7
|
+
export const createMediaQueryFeatureEmitterWithTracking = (parts, options = {}) => {
|
|
8
|
+
const { emitted, lintingMode = 'throw' } = options;
|
|
9
|
+
return (name, value) => {
|
|
10
|
+
if (emitted === null || emitted === void 0 ? void 0 : emitted.has(name)) {
|
|
11
|
+
if (lintingMode === 'throw') {
|
|
12
|
+
throw new Error(`Media query feature "${name}" was emitted more than once.`);
|
|
13
|
+
}
|
|
14
|
+
if (lintingMode === 'log') {
|
|
15
|
+
console.warn(`Media query feature "${name}" was emitted more than once; using the latest value.`);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
emitted === null || emitted === void 0 ? void 0 : emitted.add(name);
|
|
19
|
+
parts.push(`(${name}: ${formatMediaQueryValue(value)})`);
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export const createMediaQueryBuilder = (options) => {
|
|
23
|
+
return (config) => {
|
|
24
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
25
|
+
const parts = [];
|
|
26
|
+
const emittedFeatures = new Set();
|
|
27
|
+
const helpers = {
|
|
28
|
+
addFeature: createMediaQueryFeatureEmitterWithTracking(parts, {
|
|
29
|
+
emitted: emittedFeatures,
|
|
30
|
+
lintingMode: (_c = (_b = (_a = options.config) === null || _a === void 0 ? void 0 : _a.errorHandling) === null || _b === void 0 ? void 0 : _b.lintingMode) !== null && _c !== void 0 ? _c : 'throw',
|
|
31
|
+
}),
|
|
32
|
+
config: (_d = options.config) !== null && _d !== void 0 ? _d : {},
|
|
33
|
+
};
|
|
34
|
+
options.emitBase(config, helpers);
|
|
35
|
+
(_e = options.emitExtensions) === null || _e === void 0 ? void 0 : _e.call(options, config, helpers);
|
|
36
|
+
const mediaType = (_g = (_f = options.resolveType) === null || _f === void 0 ? void 0 : _f.call(options, config)) !== null && _g !== void 0 ? _g : 'screen';
|
|
37
|
+
return buildMediaQueryStringFromParts(mediaType, parts);
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
const normalizeValidationResult = (result) => {
|
|
41
|
+
if (result === undefined || result === null)
|
|
42
|
+
return { valid: true };
|
|
43
|
+
if (typeof result === 'boolean')
|
|
44
|
+
return { valid: result };
|
|
45
|
+
if (typeof result === 'string') {
|
|
46
|
+
return result ? { valid: false, message: result } : { valid: true };
|
|
47
|
+
}
|
|
48
|
+
return result;
|
|
49
|
+
};
|
|
50
|
+
export const applyMediaQueryValidation = (config, helpers, validator, context) => {
|
|
51
|
+
var _a, _b;
|
|
52
|
+
if (!validator)
|
|
53
|
+
return true;
|
|
54
|
+
const normalized = normalizeValidationResult(validator(config));
|
|
55
|
+
if (normalized.valid)
|
|
56
|
+
return true;
|
|
57
|
+
const mode = (_b = (_a = helpers.config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : 'throw';
|
|
58
|
+
if (mode === 'log') {
|
|
59
|
+
const suffix = normalized.message ? `: ${normalized.message}` : '';
|
|
60
|
+
const prefix = context
|
|
61
|
+
? `Media query ${context} validation failed`
|
|
62
|
+
: 'Media query validation failed';
|
|
63
|
+
console.warn(`${prefix}${suffix}`);
|
|
64
|
+
}
|
|
65
|
+
if (mode === 'allow')
|
|
66
|
+
return true;
|
|
67
|
+
if (mode === 'log')
|
|
68
|
+
return true;
|
|
69
|
+
const suffix = normalized.message ? `: ${normalized.message}` : '';
|
|
70
|
+
const prefix = context
|
|
71
|
+
? `Media query ${context} validation failed`
|
|
72
|
+
: 'Media query validation failed';
|
|
73
|
+
throw new Error(`${prefix}${suffix}`);
|
|
74
|
+
};
|
|
75
|
+
export const buildMediaQueryFromFeatures = (features, mediaType = 'screen') => {
|
|
76
|
+
const parts = [];
|
|
77
|
+
const addFeature = createMediaQueryFeatureEmitterWithTracking(parts, {
|
|
78
|
+
emitted: new Set(),
|
|
79
|
+
lintingMode: 'throw',
|
|
80
|
+
});
|
|
81
|
+
Object.entries(features).forEach(([name, value]) => {
|
|
82
|
+
if (value === undefined || value === null)
|
|
83
|
+
return;
|
|
84
|
+
addFeature(name, value);
|
|
85
|
+
});
|
|
86
|
+
return buildMediaQueryStringFromParts(mediaType, parts);
|
|
87
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/mediaQueries/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { IMediaQueryCore } from '../mediaQueries';
|
|
2
|
+
import type { IMediaQueryDimensions } from '../modules/dimensions';
|
|
3
|
+
export declare const lintWidthRedundancy: (props: IMediaQueryCore & IMediaQueryDimensions) => void;
|
|
4
|
+
export declare const lintHeightRedundancy: (props: IMediaQueryDimensions) => void;
|
|
5
|
+
//# sourceMappingURL=core.d.ts.map
|