css-calipers 0.9.3 → 0.9.4

package/dist/examples/src/containerQueries/helpers.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyContainerQueryValidation = exports.createContainerQueryBuilder = exports.createContainerQueryFeatureEmitterWithTracking = exports.createContainerQueryConditionEmitter = exports.createContainerQueryFeatureEmitter = exports.formatContainerQueryComparison = exports.buildContainerQueryStringFromParts = exports.buildContainerRange = exports.buildContainerComparison = exports.formatContainerQueryValue = void 0;
+const core_1 = require("../core");
+const validation_1 = require("../validation");
+const formatContainerQueryValue = (value) => ((0, core_1.hasCssMethod)(value) ? value.css() : String(value));
+exports.formatContainerQueryValue = formatContainerQueryValue;
+const buildContainerComparison = (comparison) => comparison;
+exports.buildContainerComparison = buildContainerComparison;
+const buildContainerRange = (min, max, options = {}) => {
+    var _a;
+    const mode = (_a = options.mode) !== null && _a !== void 0 ? _a : "min";
+    const operator = options.inclusive === false ? "<" : "<=";
+    if (mode === "max") {
+        return { min, max, maxOperator: operator };
+    }
+    return { min, max, minOperator: operator };
+};
+exports.buildContainerRange = buildContainerRange;
+const buildContainerQueryStringFromParts = (parts) => parts.join(" and ");
+exports.buildContainerQueryStringFromParts = buildContainerQueryStringFromParts;
+const formatContainerQueryComparison = (name, operator, value) => {
+    return `(${name} ${operator} ${(0, exports.formatContainerQueryValue)(value)})`;
+};
+exports.formatContainerQueryComparison = formatContainerQueryComparison;
+const createContainerQueryFeatureEmitter = (parts) => (name, value) => {
+    parts.push(`(${name}: ${(0, exports.formatContainerQueryValue)(value)})`);
+};
+exports.createContainerQueryFeatureEmitter = createContainerQueryFeatureEmitter;
+const createContainerQueryConditionEmitter = (parts) => (condition) => {
+    parts.push(condition);
+};
+exports.createContainerQueryConditionEmitter = createContainerQueryConditionEmitter;
+const createContainerQueryFeatureEmitterWithTracking = (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(`Container query feature "${name}" was emitted more than once.`);
+            }
+            if (lintingMode === "log") {
+                console.warn(`Container 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.formatContainerQueryValue)(value)})`);
+    };
+};
+exports.createContainerQueryFeatureEmitterWithTracking = createContainerQueryFeatureEmitterWithTracking;
+const createContainerQueryBuilder = (options) => {
+    return (config) => {
+        var _a, _b, _c, _d, _e;
+        const parts = [];
+        const emittedFeatures = new Set();
+        const helpers = {
+            addFeature: (0, exports.createContainerQueryFeatureEmitterWithTracking)(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",
+            }),
+            addCondition: (0, exports.createContainerQueryConditionEmitter)(parts),
+            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);
+        return (0, exports.buildContainerQueryStringFromParts)(parts);
+    };
+};
+exports.createContainerQueryBuilder = createContainerQueryBuilder;
+const applyContainerQueryValidation = (config, helpers, validator, context) => {
+    var _a, _b;
+    if (!validator)
+        return true;
+    const normalized = (0, validation_1.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
+            ? `Container query ${context} validation failed`
+            : "Container 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
+        ? `Container query ${context} validation failed`
+        : "Container query validation failed";
+    throw new Error(`${prefix}${suffix}`);
+};
+exports.applyContainerQueryValidation = applyContainerQueryValidation;

package/dist/examples/src/containerQueries/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineContainerQueryModules = exports.createContainerQueryFactory = exports.containerQueryFactory = exports.formatContainerQueryValue = exports.buildContainerRange = exports.buildContainerComparison = exports.makeContainerQueryStyle = exports.buildContainerQueryString = exports.buildContainerConditionString = void 0;
+var containerQueries_1 = require("./containerQueries");
+Object.defineProperty(exports, "buildContainerConditionString", { enumerable: true, get: function () { return containerQueries_1.buildContainerConditionString; } });
+Object.defineProperty(exports, "buildContainerQueryString", { enumerable: true, get: function () { return containerQueries_1.buildContainerQueryString; } });
+Object.defineProperty(exports, "makeContainerQueryStyle", { enumerable: true, get: function () { return containerQueries_1.makeContainerQueryStyle; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "buildContainerComparison", { enumerable: true, get: function () { return helpers_1.buildContainerComparison; } });
+Object.defineProperty(exports, "buildContainerRange", { enumerable: true, get: function () { return helpers_1.buildContainerRange; } });
+Object.defineProperty(exports, "formatContainerQueryValue", { enumerable: true, get: function () { return helpers_1.formatContainerQueryValue; } });
+var factory_1 = require("./factory");
+Object.defineProperty(exports, "containerQueryFactory", { enumerable: true, get: function () { return factory_1.containerQueryFactory; } });
+Object.defineProperty(exports, "createContainerQueryFactory", { enumerable: true, get: function () { return factory_1.createContainerQueryFactory; } });
+var moduleRegistry_1 = require("./moduleRegistry");
+Object.defineProperty(exports, "defineContainerQueryModules", { enumerable: true, get: function () { return moduleRegistry_1.defineContainerQueryModules; } });

package/dist/examples/src/containerQueries/linting/aspectRatio.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintAspectRatioRangeCollapse = exports.lintAspectRatioRedundancy = void 0;
+const ratio_1 = require("../../ratio");
+const lintAspectRatioRedundancy = (props) => {
+    if (!props.aspectRatio)
+        return;
+    if (props.minAspectRatio || props.maxAspectRatio) {
+        throw new Error("aspectRatio should not be combined with minAspectRatio or maxAspectRatio");
+    }
+};
+exports.lintAspectRatioRedundancy = lintAspectRatioRedundancy;
+const lintAspectRatioRangeCollapse = (props) => {
+    if (!props.minAspectRatio || !props.maxAspectRatio)
+        return;
+    if ((0, ratio_1.ratioToFloat)(props.minAspectRatio) === (0, ratio_1.ratioToFloat)(props.maxAspectRatio)) {
+        throw new Error("minAspectRatio and maxAspectRatio are equal; use aspectRatio instead");
+    }
+};
+exports.lintAspectRatioRangeCollapse = lintAspectRatioRangeCollapse;

package/dist/examples/src/containerQueries/linting/block.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintBlockRangeCollapse = exports.lintBlockRedundancy = void 0;
+const lintBlockRedundancy = (props) => {
+    if (!props.blockSize)
+        return;
+    if (props.blockSizeRange) {
+        throw new Error("blockSize should not be combined with blockSizeRange");
+    }
+};
+exports.lintBlockRedundancy = lintBlockRedundancy;
+const lintBlockRangeCollapse = (props) => {
+    if (!props.blockSizeRange)
+        return;
+    const { min, max } = props.blockSizeRange;
+    if (min.equals(max)) {
+        throw new Error("blockSizeRange min and max are equal; use blockSize instead");
+    }
+};
+exports.lintBlockRangeCollapse = lintBlockRangeCollapse;

package/dist/examples/src/containerQueries/linting/core.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintHeightExactRedundancy = exports.lintWidthExactRedundancy = void 0;
+const lintWidthExactRedundancy = (props) => {
+    if (!props.minWidth || !props.maxWidth)
+        return;
+    if (props.minWidth.equals(props.maxWidth)) {
+        throw new Error("minWidth should not be combined with maxWidth when both are equal");
+    }
+};
+exports.lintWidthExactRedundancy = lintWidthExactRedundancy;
+const lintHeightExactRedundancy = (props) => {
+    if (!props.minHeight || !props.maxHeight)
+        return;
+    if (props.minHeight.equals(props.maxHeight)) {
+        throw new Error("minHeight should not be combined with maxHeight when both are equal");
+    }
+};
+exports.lintHeightExactRedundancy = lintHeightExactRedundancy;

package/dist/examples/src/containerQueries/linting/custom.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintCustomFeatures = void 0;
+const lintCustomFeatures = (props) => {
+    if (!props.customFeatures)
+        return;
+    if (!Object.keys(props.customFeatures).length) {
+        throw new Error("customFeatures should not be empty.");
+    }
+};
+exports.lintCustomFeatures = lintCustomFeatures;

package/dist/examples/src/containerQueries/linting/inline.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintInlineRangeCollapse = exports.lintInlineRedundancy = void 0;
+const lintInlineRedundancy = (props) => {
+    if (!props.inlineSize)
+        return;
+    if (props.inlineSizeRange) {
+        throw new Error("inlineSize should not be combined with inlineSizeRange");
+    }
+};
+exports.lintInlineRedundancy = lintInlineRedundancy;
+const lintInlineRangeCollapse = (props) => {
+    if (!props.inlineSizeRange)
+        return;
+    const { min, max } = props.inlineSizeRange;
+    if (min.equals(max)) {
+        throw new Error("inlineSizeRange min and max are equal; use inlineSize instead");
+    }
+};
+exports.lintInlineRangeCollapse = lintInlineRangeCollapse;

package/dist/examples/src/containerQueries/linting/style.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lintStyleCondition = void 0;
+const core_1 = require("../../core");
+const isComparisonShape = (value) => {
+    if (typeof value !== "object" || value === null)
+        return false;
+    return "operator" in value && "value" in value;
+};
+const lintStyleCondition = (props) => {
+    if (!props.style)
+        return;
+    if (!Object.keys(props.style).length) {
+        throw new Error("style conditions must not be empty.");
+    }
+    Object.values(props.style).forEach((value) => {
+        if (value === undefined || value === null)
+            return;
+        if (Array.isArray(value))
+            return;
+        if ((0, core_1.hasCssMethod)(value))
+            return;
+        if (isComparisonShape(value)) {
+            throw new Error("style conditions must not contain comparisons.");
+        }
+    });
+};
+exports.lintStyleCondition = lintStyleCondition;

package/dist/examples/src/containerQueries/linting.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runContainerQueryLint = void 0;
+const runContainerQueryLint = (config, helpers, check, message = "Container 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.runContainerQueryLint = runContainerQueryLint;

package/dist/examples/src/containerQueries/moduleRegistry.js

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

package/dist/examples/src/containerQueries/modules/aspectRatio.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitAspectRatioFeatures = void 0;
+const helpers_1 = require("../helpers");
+const validation_1 = require("../validation");
+const linting_1 = require("../linting");
+const aspectRatio_1 = require("../linting/aspectRatio");
+const emitAspectRatioFeatures = (props, helpers, validate) => {
+    const { runContainerQueryValidation, validateAspectRatioValues } = validation_1.defaultContainerQueryValidation;
+    if (!runContainerQueryValidation(props, helpers, validateAspectRatioValues, "aspectRatio", "aspect ratio values must be valid ratio greater than 0")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, aspectRatio_1.lintAspectRatioRedundancy, "aspectRatio should not be combined with minAspectRatio or maxAspectRatio")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, aspectRatio_1.lintAspectRatioRangeCollapse, "minAspectRatio and maxAspectRatio are equal; use aspectRatio instead")) {
+        return;
+    }
+    if (!(0, helpers_1.applyContainerQueryValidation)(props, helpers, validate, "aspectRatio")) {
+        return;
+    }
+    const { addFeature } = helpers;
+    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);
+    }
+};
+exports.emitAspectRatioFeatures = emitAspectRatioFeatures;

package/dist/examples/src/containerQueries/modules/block.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitBlockSizeFeatures = void 0;
+const helpers_1 = require("../helpers");
+const validation_1 = require("../validation");
+const linting_1 = require("../linting");
+const block_1 = require("../linting/block");
+const emitBlockComparison = (name, comparison, addCondition) => {
+    addCondition((0, helpers_1.formatContainerQueryComparison)(name, comparison.operator, comparison.value));
+};
+const emitBlockRange = (name, range, addCondition) => {
+    const min = (0, helpers_1.formatContainerQueryValue)(range.min);
+    const max = (0, helpers_1.formatContainerQueryValue)(range.max);
+    if ("minOperator" in range) {
+        addCondition(`(${min} ${range.minOperator} ${name})`);
+        addCondition(`(${name} <= ${max})`);
+        return;
+    }
+    addCondition(`(${min} <= ${name})`);
+    addCondition(`(${name} ${range.maxOperator} ${max})`);
+};
+const emitBlockSizeFeatures = (props, helpers, validate) => {
+    const { runContainerQueryValidation, validateBlockSizeValues, } = validation_1.defaultContainerQueryValidation;
+    if (!runContainerQueryValidation(props, helpers, validateBlockSizeValues, "block", "block size values must be valid measurements greater than 0")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, block_1.lintBlockRedundancy, "blockSize should not be combined with blockSizeRange")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, block_1.lintBlockRangeCollapse, "blockSizeRange min and max are equal; use blockSize instead")) {
+        return;
+    }
+    if (!(0, helpers_1.applyContainerQueryValidation)(props, helpers, validate, "block")) {
+        return;
+    }
+    const { addCondition } = helpers;
+    if (props.blockSize) {
+        emitBlockComparison("block-size", props.blockSize, addCondition);
+    }
+    if (props.blockSizeRange) {
+        emitBlockRange("block-size", props.blockSizeRange, addCondition);
+    }
+};
+exports.emitBlockSizeFeatures = emitBlockSizeFeatures;

package/dist/examples/src/containerQueries/modules/custom.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitCustomFeatures = void 0;
+const helpers_1 = require("../helpers");
+const validation_1 = require("../validation");
+const linting_1 = require("../linting");
+const custom_1 = require("../linting/custom");
+const emitCustomFeatures = (props, helpers, validate) => {
+    const { runContainerQueryValidation, validateCustomFeatures, } = validation_1.defaultContainerQueryValidation;
+    if (!runContainerQueryValidation(props, helpers, validateCustomFeatures, "custom", "custom features must be valid and non-empty")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, custom_1.lintCustomFeatures, "customFeatures should not be empty")) {
+        return;
+    }
+    if (!(0, helpers_1.applyContainerQueryValidation)(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)
+            return;
+        addFeature(trimmedName, value);
+    });
+};
+exports.emitCustomFeatures = emitCustomFeatures;

package/dist/examples/src/containerQueries/modules/index.js

@@ -0,0 +1,21 @@
+"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("./aspectRatio"), exports);
+__exportStar(require("./block"), exports);
+__exportStar(require("./custom"), exports);
+__exportStar(require("./inline"), exports);
+__exportStar(require("./style"), exports);

package/dist/examples/src/containerQueries/modules/inline.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitInlineSizeFeatures = void 0;
+const helpers_1 = require("../helpers");
+const validation_1 = require("../validation");
+const linting_1 = require("../linting");
+const inline_1 = require("../linting/inline");
+const emitInlineComparison = (name, comparison, addCondition) => {
+    addCondition((0, helpers_1.formatContainerQueryComparison)(name, comparison.operator, comparison.value));
+};
+const emitInlineRange = (name, range, addCondition) => {
+    const min = (0, helpers_1.formatContainerQueryValue)(range.min);
+    const max = (0, helpers_1.formatContainerQueryValue)(range.max);
+    if ("minOperator" in range) {
+        addCondition(`(${min} ${range.minOperator} ${name})`);
+        addCondition(`(${name} <= ${max})`);
+        return;
+    }
+    addCondition(`(${min} <= ${name})`);
+    addCondition(`(${name} ${range.maxOperator} ${max})`);
+};
+const emitInlineSizeFeatures = (props, helpers, validate) => {
+    const { runContainerQueryValidation, validateInlineSizeValues, } = validation_1.defaultContainerQueryValidation;
+    if (!runContainerQueryValidation(props, helpers, validateInlineSizeValues, "inline", "inline size values must be valid measurements greater than 0")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, inline_1.lintInlineRedundancy, "inlineSize should not be combined with inlineSizeRange")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, inline_1.lintInlineRangeCollapse, "inlineSizeRange min and max are equal; use inlineSize instead")) {
+        return;
+    }
+    if (!(0, helpers_1.applyContainerQueryValidation)(props, helpers, validate, "inline")) {
+        return;
+    }
+    const { addCondition } = helpers;
+    if (props.inlineSize) {
+        emitInlineComparison("inline-size", props.inlineSize, addCondition);
+    }
+    if (props.inlineSizeRange) {
+        emitInlineRange("inline-size", props.inlineSizeRange, addCondition);
+    }
+};
+exports.emitInlineSizeFeatures = emitInlineSizeFeatures;

package/dist/examples/src/containerQueries/modules/style.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emitStyleFeatures = void 0;
+const helpers_1 = require("../helpers");
+const validation_1 = require("../validation");
+const linting_1 = require("../linting");
+const style_1 = require("../linting/style");
+const emitStyleFeatures = (props, helpers, validate) => {
+    const { runContainerQueryValidation, validateStyleValues, } = validation_1.defaultContainerQueryValidation;
+    if (!runContainerQueryValidation(props, helpers, validateStyleValues, "style", "style conditions must be valid and non-empty")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, style_1.lintStyleCondition, "style conditions must be valid and non-empty")) {
+        return;
+    }
+    if (!(0, helpers_1.applyContainerQueryValidation)(props, helpers, validate, "style")) {
+        return;
+    }
+    if (!props.style)
+        return;
+    const { addCondition } = helpers;
+    Object.entries(props.style).forEach(([name, value]) => {
+        if (value === undefined || value === null)
+            return;
+        if (Array.isArray(value)) {
+            value.forEach((entry) => {
+                if (entry === undefined || entry === null)
+                    return;
+                addCondition(`(style(${name}: ${(0, helpers_1.formatContainerQueryValue)(entry)}))`);
+            });
+            return;
+        }
+        addCondition(`(style(${name}: ${(0, helpers_1.formatContainerQueryValue)(value)}))`);
+    });
+};
+exports.emitStyleFeatures = emitStyleFeatures;

package/dist/examples/src/containerQueries/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });