css-calipers 0.7.0 → 0.9.0

package/README.md

@@ -7,6 +7,13 @@ CSS-Calipers is a tiny layer for typed CSS measurements. Stop parsing CSS
 strings and concatenating units. Do your math on real numbers, get
 compile-time unit safety, and output CSS only at the edges.
 
+This README is a general overview. Deeper module guides live in their own files.
+
+Module guides:
+
+- Measurements core: README_MEASUREMENT.md
+- Media queries: README_MEDIAQUERIES.md
+
 At a glance:
 
 - Create measurements with `m` from a number and a unit; if you omit the unit, it defaults to `px` and is typed as the px measurement type.
@@ -54,6 +61,34 @@ If you prefer, you can also import unit helpers from dedicated subpaths. For exa
 
 ---
 
+## Media queries
+
+```ts
+import { m } from "css-calipers";
+import { mediaQueryFactory } from "css-calipers/mediaQueries";
+
+const media = mediaQueryFactory({
+  queries: {
+    mobile: { maxWidth: m(639) },
+    desktop: { minWidth: m(640) },
+  },
+  config: {
+    label: "layout",
+  },
+});
+
+const styles = {
+  ...media({
+    mobile: { gridTemplateColumns: "1fr" },
+    desktop: { gridTemplateColumns: "repeat(4, 1fr)" },
+  }),
+};
+```
+
+See README_MEDIAQUERIES.md for the full media queries guide.
+
+---
+
 ## Features
 
 - **Compile-time unit validation.** Prevents mixing incompatible units.
@@ -105,7 +140,7 @@ It’s probably overkill if:
 import { m, mPercent, mVw, mVh, assertCondition } from "css-calipers";
 
 // Token-style measurements (px by default)
-const spacing = m(8); // Defaults to px and is typed as a PxMeasurement; equivalent to mPx(8)
+const spacing = m(8); // Defaults to px and is typed as a PxMeasurement
 const cardPadding = spacing.multiply(2); // 16px
 const gutter = spacing.multiply(1.5); // 12px
 

package/dist/cjs/libraryHelpers/vanilla-extract.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaQueryOutputVanillaExtract = void 0;
+const mediaQueryOutputVanillaExtract = (media) => ({
+    '&': media,
+});
+exports.mediaQueryOutputVanillaExtract = mediaQueryOutputVanillaExtract;

package/dist/cjs/mediaQueries/factory.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mediaQueryFactory = void 0;
+const helpers_1 = require("./helpers");
+const mediaQueries_1 = require("./mediaQueries");
+const modules_1 = require("./modules");
+const ALL_MEDIA_QUERY_MODULES = [
+    'core',
+    'dimensions',
+    'resolution',
+    'interaction',
+    'preferences',
+    'display',
+    'environment',
+    'custom',
+];
+const MODULE_KEYS = {
+    core: ['type', 'minWidth', 'maxWidth'],
+    dimensions: [
+        'width',
+        'height',
+        'minHeight',
+        'maxHeight',
+        'aspectRatio',
+        'minAspectRatio',
+        'maxAspectRatio',
+        'orientation',
+    ],
+    resolution: ['resolutionValue', 'minResolution', 'maxResolution'],
+    interaction: ['hover', 'anyHover', 'pointer', 'anyPointer', 'update'],
+    preferences: [
+        'colorScheme',
+        'reducedMotion',
+        'reducedData',
+        'contrast',
+        'forcedColors',
+    ],
+    display: ['colorGamut', 'dynamicRange', 'invertedColors'],
+    environment: ['scripting', 'overflowBlock', 'overflowInline'],
+    custom: ['customFeatures'],
+};
+const MODULE_EMITTERS = {
+    core: mediaQueries_1.emitCoreFeatures,
+    dimensions: modules_1.emitDimensionsFeatures,
+    resolution: modules_1.emitResolutionFeatures,
+    interaction: modules_1.emitInteractionFeatures,
+    preferences: modules_1.emitPreferencesFeatures,
+    display: modules_1.emitDisplayFeatures,
+    environment: modules_1.emitEnvironmentFeatures,
+    custom: modules_1.emitCustomFeatures,
+};
+const ALL_MODULE_KEYS = MODULE_KEYS;
+const KEY_TO_MODULE = Object.fromEntries(Object.keys(ALL_MODULE_KEYS).flatMap((moduleId) => ALL_MODULE_KEYS[moduleId].map((key) => [key, moduleId])));
+const guardUnsupportedProps = (props, modules, config, label) => {
+    const allowed = new Set();
+    modules.forEach((moduleId) => {
+        ALL_MODULE_KEYS[moduleId].forEach((key) => {
+            allowed.add(key);
+        });
+    });
+    Object.keys(props).forEach((key) => {
+        var _a, _b;
+        if (props[key] === undefined)
+            return;
+        if (allowed.has(key))
+            return;
+        const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : 'throw';
+        const moduleHint = KEY_TO_MODULE[key];
+        const moduleSuffix = moduleHint
+            ? ` Add "${moduleHint}" to modules.`
+            : '';
+        const message = `Media query factory "${label}" received unsupported feature "${key}".${moduleSuffix}`;
+        if (mode === 'log') {
+            console.warn(message);
+            return;
+        }
+        if (mode === 'allow')
+            return;
+        throw new Error(message);
+    });
+};
+const normalizeCustomResult = (result) => {
+    if (result === undefined || result === null)
+        return { valid: true };
+    if (typeof result === 'boolean')
+        return { valid: result };
+    if (typeof result === 'string') {
+        return result ? { valid: false, message: result } : { valid: true };
+    }
+    return result;
+};
+const runCustomValidator = (props, config) => {
+    var _a, _b;
+    const custom = config.custom;
+    if (!(custom === null || custom === void 0 ? void 0 : custom.validator))
+        return;
+    const normalized = normalizeCustomResult(custom.validator(props));
+    if (normalized.valid)
+        return;
+    const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : 'throw';
+    const suffix = normalized.message ? `: ${normalized.message}` : '';
+    const message = `Media query factory "${config.label}" custom validator "${custom.key}" failed${suffix}`;
+    if (mode === 'log') {
+        console.warn(message);
+        return;
+    }
+    if (mode === 'allow')
+        return;
+    throw new Error(message);
+};
+const runCustomLinter = (props, config) => {
+    var _a, _b;
+    const custom = config.custom;
+    if (!(custom === null || custom === void 0 ? void 0 : custom.linter))
+        return;
+    const normalized = normalizeCustomResult(custom.linter(props));
+    if (normalized.valid)
+        return;
+    const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.lintingMode) !== null && _b !== void 0 ? _b : 'throw';
+    const suffix = normalized.message ? `: ${normalized.message}` : '';
+    const message = `Media query factory "${config.label}" custom linter "${custom.key}" flagged${suffix}`;
+    if (mode === 'log') {
+        console.warn(message);
+        return;
+    }
+    if (mode === 'allow')
+        return;
+    throw new Error(message);
+};
+const mediaQueryFactory = (options) => {
+    var _a;
+    const modules = (_a = options.config.modules) !== null && _a !== void 0 ? _a : ALL_MEDIA_QUERY_MODULES;
+    const buildMediaQuery = (0, helpers_1.createMediaQueryBuilder)({
+        emitBase: (props, helpers) => {
+            guardUnsupportedProps(props, modules, options.config, options.config.label);
+            runCustomValidator(props, options.config);
+            runCustomLinter(props, options.config);
+            modules.forEach((moduleId) => {
+                MODULE_EMITTERS[moduleId](props, helpers);
+            });
+        },
+        resolveType: (props) => props.type,
+        config: options.config,
+    });
+    return (stylesByQuery) => {
+        const result = {};
+        Object.keys(stylesByQuery).forEach((key) => {
+            const styles = stylesByQuery[key];
+            const props = options.queries[key];
+            if (!styles || !props)
+                return;
+            result[buildMediaQuery(props)] = styles;
+        });
+        const mediaQuery = {
+            '@media': result,
+        };
+        return options.config.output
+            ? options.config.output(mediaQuery)
+            : mediaQuery;
+    };
+};
+exports.mediaQueryFactory = mediaQueryFactory;

package/dist/cjs/mediaQueries/helpers.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMediaQueryFromFeatures = exports.applyMediaQueryValidation = exports.createMediaQueryBuilder = exports.createMediaQueryFeatureEmitterWithTracking = exports.createMediaQueryFeatureEmitter = exports.buildMediaQueryStringFromParts = exports.formatMediaQueryValue = void 0;
+const core_1 = require("../core");
+const formatMediaQueryValue = (value) => ((0, core_1.hasCssMethod)(value) ? value.css() : String(value));
+exports.formatMediaQueryValue = formatMediaQueryValue;
+const buildMediaQueryStringFromParts = (mediaType, parts) => (parts.length ? `${mediaType} and ${parts.join(' and ')}` : mediaType);
+exports.buildMediaQueryStringFromParts = buildMediaQueryStringFromParts;
+const createMediaQueryFeatureEmitter = (parts) => (name, value) => {
+    parts.push(`(${name}: ${(0, exports.formatMediaQueryValue)(value)})`);
+};
+exports.createMediaQueryFeatureEmitter = createMediaQueryFeatureEmitter;
+const createMediaQueryFeatureEmitterWithTracking = (parts, options = {}) => {
+    const { emitted, lintingMode = 'throw' } = options;
+    return (name, value) => {
+        if (emitted === null || emitted === void 0 ? void 0 : emitted.has(name)) {
+            if (lintingMode === 'throw') {
+                throw new Error(`Media query feature "${name}" was emitted more than once.`);
+            }
+            if (lintingMode === 'log') {
+                console.warn(`Media query feature "${name}" was emitted more than once; using the latest value.`);
+            }
+        }
+        emitted === null || emitted === void 0 ? void 0 : emitted.add(name);
+        parts.push(`(${name}: ${(0, exports.formatMediaQueryValue)(value)})`);
+    };
+};
+exports.createMediaQueryFeatureEmitterWithTracking = createMediaQueryFeatureEmitterWithTracking;
+const createMediaQueryBuilder = (options) => {
+    return (config) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const parts = [];
+        const emittedFeatures = new Set();
+        const helpers = {
+            addFeature: (0, exports.createMediaQueryFeatureEmitterWithTracking)(parts, {
+                emitted: emittedFeatures,
+                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',
+            }),
+            config: (_d = options.config) !== null && _d !== void 0 ? _d : {},
+        };
+        options.emitBase(config, helpers);
+        (_e = options.emitExtensions) === null || _e === void 0 ? void 0 : _e.call(options, config, helpers);
+        const mediaType = (_g = (_f = options.resolveType) === null || _f === void 0 ? void 0 : _f.call(options, config)) !== null && _g !== void 0 ? _g : 'screen';
+        return (0, exports.buildMediaQueryStringFromParts)(mediaType, parts);
+    };
+};
+exports.createMediaQueryBuilder = createMediaQueryBuilder;
+const normalizeValidationResult = (result) => {
+    if (result === undefined || result === null)
+        return { valid: true };
+    if (typeof result === 'boolean')
+        return { valid: result };
+    if (typeof result === 'string') {
+        return result ? { valid: false, message: result } : { valid: true };
+    }
+    return result;
+};
+const applyMediaQueryValidation = (config, helpers, validator, context) => {
+    var _a, _b;
+    if (!validator)
+        return true;
+    const normalized = normalizeValidationResult(validator(config));
+    if (normalized.valid)
+        return true;
+    const mode = (_b = (_a = helpers.config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : 'throw';
+    if (mode === 'log') {
+        const suffix = normalized.message ? `: ${normalized.message}` : '';
+        const prefix = context
+            ? `Media query ${context} validation failed`
+            : 'Media query validation failed';
+        console.warn(`${prefix}${suffix}`);
+    }
+    if (mode === 'allow')
+        return true;
+    if (mode === 'log')
+        return true;
+    const suffix = normalized.message ? `: ${normalized.message}` : '';
+    const prefix = context
+        ? `Media query ${context} validation failed`
+        : 'Media query validation failed';
+    throw new Error(`${prefix}${suffix}`);
+};
+exports.applyMediaQueryValidation = applyMediaQueryValidation;
+const buildMediaQueryFromFeatures = (features, mediaType = 'screen') => {
+    const parts = [];
+    const addFeature = (0, exports.createMediaQueryFeatureEmitterWithTracking)(parts, {
+        emitted: new Set(),
+        lintingMode: 'throw',
+    });
+    Object.entries(features).forEach(([name, value]) => {
+        if (value === undefined || value === null)
+            return;
+        addFeature(name, value);
+    });
+    return (0, exports.buildMediaQueryStringFromParts)(mediaType, parts);
+};
+exports.buildMediaQueryFromFeatures = buildMediaQueryFromFeatures;

package/dist/cjs/mediaQueries/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./factory"), exports);
+__exportStar(require("./mediaQueries"), exports);
+__exportStar(require("./modules"), exports);
+__exportStar(require("./moduleRegistry"), exports);

package/dist/cjs/mediaQueries/linting/core.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintHeightRedundancy = exports.lintWidthRedundancy = void 0;
+const lintWidthRedundancy = (props) => {
+    if (!props.width)
+        return;
+    if (props.minWidth || props.maxWidth) {
+        throw new Error('width should not be combined with minWidth or maxWidth');
+    }
+};
+exports.lintWidthRedundancy = lintWidthRedundancy;
+const lintHeightRedundancy = (props) => {
+    if (!props.height)
+        return;
+    if (props.minHeight || props.maxHeight) {
+        throw new Error('height should not be combined with minHeight or maxHeight');
+    }
+};
+exports.lintHeightRedundancy = lintHeightRedundancy;

package/dist/cjs/mediaQueries/linting/resolution.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintResolutionRedundancy = void 0;
+const lintResolutionRedundancy = (props) => {
+    if (!props.resolutionValue)
+        return;
+    if (props.minResolution || props.maxResolution) {
+        throw new Error('resolution should not be combined with minResolution or maxResolution');
+    }
+};
+exports.lintResolutionRedundancy = lintResolutionRedundancy;

package/dist/cjs/mediaQueries/linting.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runMediaQueryLint = void 0;
+const runMediaQueryLint = (config, helpers, check, message = 'Media query lint failed') => {
+    var _a, _b;
+    if (!check)
+        return true;
+    const mode = (_b = (_a = helpers.config.errorHandling) === null || _a === void 0 ? void 0 : _a.lintingMode) !== null && _b !== void 0 ? _b : 'throw';
+    if (mode === 'allow')
+        return true;
+    if (mode === 'log') {
+        try {
+            check(config);
+            return true;
+        }
+        catch {
+            console.warn(message);
+            return true;
+        }
+    }
+    check(config);
+    return true;
+};
+exports.runMediaQueryLint = runMediaQueryLint;

package/dist/cjs/mediaQueries/mediaQueries.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeMediaQueryStyle = exports.buildMediaQueryString = exports.emitCoreFeatures = void 0;
+const helpers_1 = require("./helpers");
+const validation_1 = require("./validation");
+const modules_1 = require("./modules");
+const emitCoreFeatures = (props, helpers) => {
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateMinMaxWidth, "core", "minWidth must be less than or equal to maxWidth")) {
+        return;
+    }
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateWidthValuesPositive, "core", "width values must be greater than 0")) {
+        return;
+    }
+    const { addFeature } = helpers;
+    if (props.minWidth) {
+        addFeature("min-width", props.minWidth);
+    }
+    if (props.maxWidth) {
+        addFeature("max-width", props.maxWidth);
+    }
+};
+exports.emitCoreFeatures = emitCoreFeatures;
+const emitBaseFeatures = (props, helpers) => {
+    (0, exports.emitCoreFeatures)(props, helpers);
+    (0, modules_1.emitDimensionsFeatures)(props, helpers);
+    (0, modules_1.emitResolutionFeatures)(props, helpers);
+    (0, modules_1.emitInteractionFeatures)(props, helpers);
+    (0, modules_1.emitPreferencesFeatures)(props, helpers);
+    (0, modules_1.emitDisplayFeatures)(props, helpers);
+    (0, modules_1.emitEnvironmentFeatures)(props, helpers);
+    (0, modules_1.emitCustomFeatures)(props, helpers);
+};
+exports.buildMediaQueryString = (0, helpers_1.createMediaQueryBuilder)({
+    emitBase: emitBaseFeatures,
+    resolveType: (props) => props.type,
+});
+const makeMediaQueryStyle = (queries) => (stylesByQuery) => {
+    const result = {};
+    Object.keys(stylesByQuery).forEach((key) => {
+        const styles = stylesByQuery[key];
+        const props = queries[key];
+        if (!styles || !props)
+            return;
+        result[(0, exports.buildMediaQueryString)(props)] = styles;
+    });
+    const mediaQuery = {
+        "@media": result,
+    };
+    return mediaQuery;
+};
+exports.makeMediaQueryStyle = makeMediaQueryStyle;

package/dist/cjs/mediaQueries/mediaQueryFactory.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.queriesToStrings = queriesToStrings;
+exports.useMediaQuery = useMediaQuery;
+exports.useMediaFromMap = useMediaFromMap;
+exports.makeClientFns = makeClientFns;
+const react_1 = require("react");
+const mediaQueries_1 = require("./mediaQueries");
+function toQueryString(q) {
+    return (0, mediaQueries_1.buildMediaQueryString)(q);
+}
+function queriesToStrings(queries) {
+    return Object.fromEntries(Object.entries(queries).map(([k, v,]) => [
+        k,
+        typeof v === 'string' ? v : toQueryString(v),
+    ]));
+}
+// ---------- Core hooks ----------
+/**
+ * SSR-safe: undefined on server, boolean on client; subscribes to
+ * changes.
+ */
+function useMediaQuery(queryString) {
+    const [matches, setMatches,] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (typeof window === 'undefined')
+            return;
+        const mql = window.matchMedia(queryString);
+        const onChange = () => setMatches(mql.matches);
+        const frameId = requestAnimationFrame(() => {
+            setMatches(mql.matches);
+        });
+        (_a = mql.addEventListener) === null || _a === void 0 ? void 0 : _a.call(mql, 'change', onChange);
+        return () => {
+            var _a;
+            (_a = mql.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(mql, 'change', onChange);
+            cancelAnimationFrame(frameId);
+        };
+    }, [
+        queryString,
+    ]);
+    return matches;
+}
+// Aggregate hook with guarded updates to avoid loops
+function useMediaFromMap(strings) {
+    const shallowEqual = (0, react_1.useCallback)((a, b) => {
+        const ak = Object.keys(a);
+        const bk = Object.keys(b);
+        if (ak.length !== bk.length)
+            return false;
+        for (const k of ak)
+            if (a[k] !== b[k])
+                return false;
+        return true;
+    }, []);
+    // Stable, sorted list of [key, queryString]
+    const entries = (0, react_1.useMemo)(() => {
+        const e = Object.entries(strings);
+        e.sort((a, b) => a[0].localeCompare(b[0]));
+        return e;
+    }, [
+        strings,
+    ]);
+    const [matches, setMatches,] = (0, react_1.useState)(() => Object.create(null));
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mqls = entries.map(([k, qs,]) => [
+            k,
+            window.matchMedia(qs),
+        ]);
+        // Initial snapshot — only set if changed
+        const initial = Object.fromEntries(mqls.map(([k, mql,]) => [
+            k,
+            mql.matches,
+        ]));
+        const frameId = requestAnimationFrame(() => {
+            setMatches((prev) => shallowEqual(prev, initial) ? prev : initial);
+        });
+        // Subscribe with guarded setState
+        const handlers = mqls.map(([k, mql,]) => {
+            var _a;
+            const onChange = () => setMatches((prev) => {
+                const next = {
+                    ...prev,
+                    [k]: mql.matches,
+                };
+                return shallowEqual(prev, next) ? prev : next;
+            });
+            (_a = mql.addEventListener) === null || _a === void 0 ? void 0 : _a.call(mql, 'change', onChange);
+            return [
+                mql,
+                onChange,
+            ];
+        });
+        return () => {
+            var _a;
+            cancelAnimationFrame(frameId);
+            for (const [mql, onChange,] of handlers) {
+                (_a = mql.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(mql, 'change', onChange);
+            }
+        };
+    }, [
+        entries,
+        shallowEqual,
+    ]);
+    return matches;
+}
+// ---------- Client-only predicates ----------
+/** For event handlers/effects only; don't call in SSR render paths. */
+function makeClientFns(strings) {
+    const out = {};
+    Object.keys(strings).forEach((k) => {
+        out[k] = () => typeof window !== 'undefined'
+            ? window.matchMedia(strings[k]).matches
+            : false;
+    });
+    return out;
+}

package/dist/cjs/mediaQueries/moduleRegistry.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineMediaQueryModules = void 0;
+const defineMediaQueryModules = (...modules) => modules;
+exports.defineMediaQueryModules = defineMediaQueryModules;

package/dist/cjs/mediaQueries/modules/custom.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitCustomFeatures = void 0;
+const core_1 = require("../../core");
+const helpers_1 = require("../helpers");
+const emitCustomFeatures = (props, helpers, validate) => {
+    if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'custom')) {
+        return;
+    }
+    const { addFeature } = helpers;
+    if (!props.customFeatures)
+        return;
+    Object.entries(props.customFeatures).forEach(([name, value]) => {
+        if (value === undefined || value === null)
+            return;
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            throw new Error('Custom feature name must be non-empty.');
+        }
+        if (typeof value === 'object' && !(0, core_1.hasCssMethod)(value)) {
+            throw new Error(`Custom feature "${trimmedName}" must be a primitive or a measurement.`);
+        }
+        addFeature(trimmedName, value);
+    });
+};
+exports.emitCustomFeatures = emitCustomFeatures;

package/dist/cjs/mediaQueries/modules/dimensions.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitDimensionsFeatures = void 0;
+const helpers_1 = require("../helpers");
+const validation_1 = require("../validation");
+const linting_1 = require("../linting");
+const core_1 = require("../linting/core");
+const emitDimensionsFeatures = (props, helpers, validate) => {
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateMinMaxHeight, 'dimensions', 'minHeight must be less than or equal to maxHeight')) {
+        return;
+    }
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateHeightValuesPositive, 'dimensions', 'height values must be greater than 0')) {
+        return;
+    }
+    if (!(0, linting_1.runMediaQueryLint)(props, helpers, core_1.lintWidthRedundancy, 'width should not be combined with minWidth or maxWidth')) {
+        return;
+    }
+    if (!(0, linting_1.runMediaQueryLint)(props, helpers, core_1.lintHeightRedundancy, 'height should not be combined with minHeight or maxHeight')) {
+        return;
+    }
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateWidthValuesPositive, 'dimensions', 'width values must be greater than 0')) {
+        return;
+    }
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateMinMaxAspectRatio, 'dimensions', 'minAspectRatio must be less than or equal to maxAspectRatio')) {
+        return;
+    }
+    if (!(0, validation_1.runMediaQueryValidation)(props, helpers, validation_1.validateAspectRatioValuesPositive, 'dimensions', 'aspect ratio values must be greater than 0')) {
+        return;
+    }
+    if (!(0, helpers_1.applyMediaQueryValidation)(props, helpers, validate, 'dimensions')) {
+        return;
+    }
+    const { addFeature } = helpers;
+    if (props.width) {
+        addFeature('width', props.width);
+    }
+    if (props.height) {
+        addFeature('height', props.height);
+    }
+    if (props.minHeight) {
+        addFeature('min-height', props.minHeight);
+    }
+    if (props.maxHeight) {
+        addFeature('max-height', props.maxHeight);
+    }
+    if (props.aspectRatio) {
+        addFeature('aspect-ratio', props.aspectRatio);
+    }
+    if (props.minAspectRatio) {
+        addFeature('min-aspect-ratio', props.minAspectRatio);
+    }
+    if (props.maxAspectRatio) {
+        addFeature('max-aspect-ratio', props.maxAspectRatio);
+    }
+    if (props.orientation) {
+        addFeature('orientation', props.orientation);
+    }
+};
+exports.emitDimensionsFeatures = emitDimensionsFeatures;