css-calipers 0.9.2 → 0.9.4

package/dist/examples/examples/validation-and-runtime-checks.example.js

@@ -0,0 +1,85 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * Not part of the public API surface or published bundle. This sketch shows
+ * how css-calipers can participate in dev-only validation around design
+ * tokens or configuration values inside style helpers or components. The
+ * helpers here are framework-agnostic; imagine them being called from React,
+ * a template system, or a Node script.
+ *
+ * The same `bodyLineHeight` token is used in two different places:
+ * - an icon + label row that returns a small HTML snippet and enforces
+ *   "icon must not exceed line-height"
+ * - a table-of-contents heading row that returns a style object and enforces
+ *   row height and body line-height invariants for readability
+ *
+ * See the sibling unit test example for how to assert related invariants in a unit test.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTocHeadingStyles = exports.renderIconWithLabelHtml = void 0;
+const css_calipers_1 = require("css-calipers");
+// Pretend these tokens come from a design token file or configuration layer.
+// Two different components will enforce different invariants against the same
+// underlying line-height measurement.
+const bodyLineHeight = (0, css_calipers_1.m)(1.4, "rem");
+const iconTokenSize = (0, css_calipers_1.m)(1.2, "rem");
+const tocHeadingRowHeightToken = (0, css_calipers_1.m)(2, "rem");
+// An icon+label row where you don't want the icon to visually dominate the
+// text. In development, assert that the icon's size does not exceed the
+// line-height it sits next to. Here we return a small HTML snippet to
+// illustrate string-based consumers.
+const renderIconWithLabelHtml = (labelText) => {
+    const iconSize = iconTokenSize;
+    if (process.env.NODE_ENV !== "production") {
+        // Make sure both measurements use the same unit family before comparing.
+        (0, css_calipers_1.assertMatchingUnits)(iconSize, bodyLineHeight, "iconWithLabel: icon and line-height units must match");
+        if (iconSize.getValue() > bodyLineHeight.getValue()) {
+            throw new Error(`iconWithLabel: icon must not exceed line-height; ` +
+                `iconSize=${iconSize.css()}, bodyLineHeight=${bodyLineHeight.css()}`);
+        }
+    }
+    const iconStyle = `width:${iconSize.css()};height:${iconSize.css()};`;
+    const labelStyle = `line-height:${bodyLineHeight.css()};`;
+    return `
+    <span class="row">
+      <span class="icon" style="${iconStyle}"/>
+      <span class="label" style="${labelStyle}">${labelText}</span>
+    </span>`;
+};
+exports.renderIconWithLabelHtml = renderIconWithLabelHtml;
+// A table-of-contents row where H2 entries should remain readable and aligned
+// with the typography system. In development, enforce a minimum line-height
+// and require that the H2 row height is at least the underlying line-height.
+const buildTocHeadingStyles = () => {
+    const tocHeadingRowHeight = tocHeadingRowHeightToken;
+    if (process.env.NODE_ENV !== "production") {
+        // Require body line-height to stay within a reasonable range for body
+        // text, using the same measurement token.
+        const minBodyLineHeight = (0, css_calipers_1.m)(1.2, "rem");
+        const maxBodyLineHeight = (0, css_calipers_1.m)(1.8, "rem");
+        const bodyValue = bodyLineHeight.getValue();
+        if (!(bodyValue >= minBodyLineHeight.getValue() &&
+            bodyValue <= maxBodyLineHeight.getValue())) {
+            throw new Error(`tocHeading: body line-height out of range; ` +
+                `${bodyLineHeight.css()} (expected between ` +
+                `${minBodyLineHeight.css()} and ${maxBodyLineHeight.css()})`);
+        }
+        // Row height should not be smaller than the line-height it uses.
+        (0, css_calipers_1.assertMatchingUnits)(tocHeadingRowHeight, bodyLineHeight, "tocHeading: row height and line-height units must match");
+        if (tocHeadingRowHeight.getValue() < bodyLineHeight.getValue()) {
+            throw new Error(`tocHeading: row height must be >= line-height; ` +
+                `row=${tocHeadingRowHeight.css()}, bodyLineHeight=${bodyLineHeight.css()}`);
+        }
+    }
+    // In real code these would be component or style objects. Here we just show
+    // that measurement values flow through `.css()` into plain style shapes.
+    return {
+        row: {
+            minHeight: tocHeadingRowHeight.css(),
+            lineHeight: bodyLineHeight.css(),
+        },
+    };
+};
+exports.buildTocHeadingStyles = buildTocHeadingStyles;

package/dist/examples/examples/validation-unit-tests.example.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * Not part of the public API surface or published bundle. This sketch shows
+ * how to exercise a simple design-token invariant in unit tests using Vitest,
+ * which this repo already uses for its own test suite. The pattern is test-
+ * runner agnostic; you can adapt it to Jest, Mocha, or any other framework.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const css_calipers_1 = require("css-calipers");
+// Pretend these spacing tokens come from a design token file or configuration
+// layer. The intent is a simple invariant: small <= large and both share units.
+const spacingTokens = {
+    spaceSm: (0, css_calipers_1.m)(4), // defaults to "px" if no unit is given
+    spaceLg: (0, css_calipers_1.m)(12),
+};
+(0, vitest_1.describe)("spacing tokens (example unit test)", () => {
+    (0, vitest_1.it)("use the same unit for related tokens", () => {
+        const { spaceSm, spaceLg } = spacingTokens;
+        // Unit consistency between related tokens.
+        (0, css_calipers_1.assertMatchingUnits)(spaceSm, spaceLg, "spacing tokens: spaceSm and spaceLg must share units");
+    });
+    (0, vitest_1.it)("keep small <= large", () => {
+        const { spaceSm, spaceLg } = spacingTokens;
+        // Ordering invariant: small should never exceed large.
+        const smValue = spaceSm.getValue();
+        const lgValue = spaceLg.getValue();
+        if (!(smValue <= lgValue)) {
+            throw new Error(`spacing tokens out of order: ` +
+                `spaceSm=${spaceSm.css()}, spaceLg=${spaceLg.css()}`);
+        }
+    });
+});

package/dist/examples/factory-wrapper.example.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.m = exports.mVw = exports.mEm = exports.makeMediaQueryStyle = exports.buildMediaQueryString = exports.units = exports.mediaQueries = exports.assertCondition = exports.assertMatchingUnits = exports.mPercent = exports.mPx = void 0;
+const factory_1 = require("css-calipers/factory");
+/**
+ * Example wrapper module.
+ * Use the factory once, then re-export from here across your app.
+ * This keeps a single import path and makes refactors cheaper.
+ */
+const calipers = (0, factory_1.createCalipers)({
+    errorConfig: { stackHints: 'on' },
+});
+exports.mPx = calipers.mPx, exports.mPercent = calipers.mPercent, exports.assertMatchingUnits = calipers.assertMatchingUnits, exports.assertCondition = calipers.assertCondition, exports.mediaQueries = calipers.mediaQueries, exports.units = calipers.units;
+exports.buildMediaQueryString = exports.mediaQueries.buildMediaQueryString, exports.makeMediaQueryStyle = exports.mediaQueries.makeMediaQueryStyle;
+exports.mEm = exports.units.mEm, exports.mVw = exports.units.mVw;
+/**
+ * Benefit: you can make custom changes in one place without touching call sites.
+ * Example wrapper below is intentionally demonstrative, not a recommended m change.
+ */
+const m = (value, unitOrOptions, context) => {
+    var _a;
+    if (!unitOrOptions) {
+        return calipers.m(value, '%', context);
+    }
+    if (typeof unitOrOptions === 'object') {
+        return calipers.m(value, {
+            ...unitOrOptions,
+            unit: (_a = unitOrOptions.unit) !== null && _a !== void 0 ? _a : '%',
+        });
+    }
+    return calipers.m(value, unitOrOptions, context);
+};
+exports.m = m;

package/dist/examples/lineHeight-normalizer.example.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It exists to demonstrate one way to normalize mixed line-height
+ * inputs into a single value with a `.css()` method. See the README for a
+ * deeper discussion of this pattern and its trade-offs.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeLineHeight = void 0;
+const css_calipers_1 = require("css-calipers");
+const parseNumericWithUnit = (raw) => {
+    const value = raw.trim();
+    const match = value.match(/^(-?\d*\.?\d+)\s*(px|rem|em|%)$/i);
+    if (!match)
+        return null;
+    const [, numeric, unit] = match;
+    return {
+        value: Number(numeric),
+        unit: unit.toLowerCase(),
+    };
+};
+const normalizeLineHeight = (value) => {
+    // Case 1: bare number (unitless line-height)
+    if (typeof value === 'number') {
+        return {
+            css: () => value,
+        };
+    }
+    const trimmed = value.trim();
+    // Case 2: numeric value + unit string (for example, "1.5rem", "20px")
+    const numericWithUnit = parseNumericWithUnit(trimmed);
+    if (numericWithUnit) {
+        const measurement = (0, css_calipers_1.m)(numericWithUnit.value, numericWithUnit.unit);
+        return measurement;
+    }
+    // Case 3: unitless numeric string (for example, "1.5")
+    const numericValue = Number(trimmed);
+    if (!Number.isNaN(numericValue)) {
+        return {
+            css: () => numericValue,
+        };
+    }
+    // Case 4: keywords ("normal") or CSS variables ("var(--body-line-height)")
+    // remain opaque CSS strings and resolve at runtime.
+    return {
+        css: () => trimmed,
+    };
+};
+exports.normalizeLineHeight = normalizeLineHeight;
+// Example usages (not executed here; for illustration only):
+const lineHeightFromNumber = (0, exports.normalizeLineHeight)(1.5);
+const lineHeightFromUnitString = (0, exports.normalizeLineHeight)('1.5rem');
+const lineHeightFromNumericString = (0, exports.normalizeLineHeight)('1.5');
+const lineHeightFromKeyword = (0, exports.normalizeLineHeight)('normal');
+const lineHeightFromVar = (0, exports.normalizeLineHeight)('var(--body-line-height)');
+// All normalized values expose a `.css()` method:
+const lineHeightStyles = {
+    number: lineHeightFromNumber.css(),
+    unitString: lineHeightFromUnitString.css(),
+    numericString: lineHeightFromNumericString.css(),
+    keyword: lineHeightFromKeyword.css(),
+    cssVariable: lineHeightFromVar.css(),
+};
+// Advanced example: if the normalized value happens to be a CSS-Calipers
+// measurement, you can safely do math on it before emitting CSS.
+const baseLineHeight = (0, exports.normalizeLineHeight)('1.4rem');
+const minLineHeight = (0, css_calipers_1.m)(1.2, 'rem');
+const maxLineHeight = (0, css_calipers_1.m)(1.8, 'rem');
+let clampedLineHeight;
+if ((0, css_calipers_1.isMeasurement)(baseLineHeight)) {
+    // Here TypeScript knows `baseLineHeight` is an IMeasurement, so you can use
+    // unit-aware helpers before emitting.
+    const clamped = baseLineHeight.clamp(minLineHeight, maxLineHeight);
+    clampedLineHeight = clamped.css();
+}
+else {
+    // Keywords or CSS variables bypass CSS-Calipers and stay as-is.
+    clampedLineHeight = baseLineHeight.css();
+}

package/dist/examples/mediaQueries-multipleInstances.example.js

@@ -0,0 +1,127 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It shows how a page layout and a grid component can use different
+ * media query configs (and different breakpoints) in the same codebase.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_calipers_1 = require("css-calipers");
+const mediaQueries_1 = require("css-calipers/mediaQueries");
+// Simple helper: grid component uses its own breakpoints and column labels.
+// This helper uses the default builder, which includes all modules.
+const gridBreakpoints = {
+    columns_four: { maxWidth: (0, css_calipers_1.m)(1200) },
+    columns_three: { maxWidth: (0, css_calipers_1.m)(1024) },
+    columns_two: { maxWidth: (0, css_calipers_1.m)(768) },
+    columns_one: { maxWidth: (0, css_calipers_1.m)(520) },
+};
+const gridMediaSimple = (0, mediaQueries_1.makeMediaQueryStyle)(gridBreakpoints);
+const gridStylesSimple = {
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    ...gridMediaSimple({
+        columns_four: { gridTemplateColumns: "repeat(4, 1fr)" },
+        columns_three: { gridTemplateColumns: "repeat(3, 1fr)" },
+        columns_two: { gridTemplateColumns: "repeat(2, 1fr)" },
+        columns_one: { gridTemplateColumns: "1fr" },
+    }),
+};
+// Multiple instances: page layout and grid component use different configs.
+// Layout uses the standard mobile/tablet/desktop breakpoints and defaults.
+// The default keeps all modules enabled, if you want to limit modules, you
+// can specify what moduels to load explicitely
+const layoutMedia = (0, mediaQueries_1.mediaQueryFactory)({
+    queries: {
+        mobile: { maxWidth: (0, css_calipers_1.m)(639) },
+        tablet: { minWidth: (0, css_calipers_1.m)(640), maxWidth: (0, css_calipers_1.m)(1023) },
+        desktop: { minWidth: (0, css_calipers_1.m)(1024) },
+    },
+    config: { label: "layout" },
+});
+// Grid uses a custom breakpoint map and custom error handling for iteration.
+// Note "core" is explicit here and no other modules will be loaded.
+const gridMedia = (0, mediaQueries_1.mediaQueryFactory)({
+    queries: gridBreakpoints,
+    config: {
+        label: "product-grid",
+        modules: ["core"],
+        errorHandling: {
+            invalidValueMode: "log",
+            lintingMode: "log",
+        },
+    },
+});
+const pageStyles = {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    ...layoutMedia({
+        mobile: { gridTemplateColumns: "1fr" },
+        tablet: { gridTemplateColumns: "repeat(2, 1fr)" },
+        desktop: { gridTemplateColumns: "repeat(4, 1fr)" },
+    }),
+};
+const gridStyles = {
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    ...gridMedia({
+        columns_four: { gridTemplateColumns: "repeat(4, 1fr)" },
+        columns_three: { gridTemplateColumns: "repeat(3, 1fr)" },
+        columns_two: { gridTemplateColumns: "repeat(2, 1fr)" },
+        columns_one: { gridTemplateColumns: "1fr" },
+    }),
+};
+// Advanced example: any-hover with custom validation + linting.
+// Note
+const interactionMedia = (0, mediaQueries_1.mediaQueryFactory)({
+    queries: {
+        hoverReady: {
+            anyHover: "hover",
+            anyPointer: "fine",
+            reducedMotion: "no-preference",
+        },
+        hoverDisabled: {
+            anyHover: "none",
+            anyPointer: "coarse",
+            reducedMotion: "reduce",
+        },
+    },
+    config: {
+        label: "interaction",
+        modules: ["interaction", "preferences"],
+        errorHandling: {
+            invalidValueMode: "throw",
+            lintingMode: "log",
+        },
+        output: (media) => ({
+            label: "interaction",
+            media,
+            note: "Custom output for advanced example",
+        }),
+        custom: {
+            key: "any-hover-guard",
+            validator: (props) => {
+                if (props.anyHover && !props.anyPointer) {
+                    return "anyHover should be paired with anyPointer for clarity";
+                }
+                return true;
+            },
+            linter: (props) => {
+                if (props.anyHover === "none" && props.anyPointer === "fine") {
+                    return "anyHover none rarely pairs with anyPointer fine";
+                }
+                return true;
+            },
+        },
+    },
+});
+const interactionResult = interactionMedia({
+    hoverReady: { cursor: "pointer", transitionDuration: "160ms" },
+    hoverDisabled: { cursor: "default", transitionDuration: "0ms" },
+});
+const interactionStyles = {
+    ...interactionResult.media,
+};

package/dist/examples/mixedQueries.example.js

@@ -0,0 +1,60 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It shows how to nest media + container query outputs, including
+ * optional vanilla-extract helpers.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_calipers_1 = require("css-calipers");
+const mediaQueries_1 = require("css-calipers/mediaQueries");
+const containerQueries_1 = require("css-calipers/containerQueries");
+const comparisons_1 = require("../src/comparisons");
+const media = (0, mediaQueries_1.makeMediaQueryStyle)({
+    desktop: {
+        minWidth: (0, css_calipers_1.m)(1024),
+        aspectRatio: (0, css_calipers_1.r)(16, 9),
+    },
+});
+const media2 = (0, mediaQueries_1.makeMediaQueryStyle)({
+    queryA: {
+        minWidth: (0, css_calipers_1.m)(1024),
+        maxWidth: (0, css_calipers_1.m)(2024),
+        and: {
+            minResolution: (0, css_calipers_1.m)(2, "dppx"),
+            not: {
+                aspectRatio: (0, css_calipers_1.r)(16, 9),
+            },
+        },
+    },
+});
+const container = (0, containerQueries_1.makeContainerQueryStyle)({
+    wideCard: {
+        inlineSize: comparisons_1.compare.gte((0, css_calipers_1.m)(28, "rem")),
+        and: {
+            aspectRatio: (0, css_calipers_1.r)(4, 3),
+        },
+    },
+});
+const nestedStyles = media({
+    desktop: container({
+        wideCard: {
+            gridTemplateColumns: "1fr 2fr",
+            gridTemplateRows: "none",
+            alignItems: "stretch",
+        },
+    }),
+});
+// const vanillaExtractStyles = mediaQueryOutputVanillaExtract(
+//   media({
+//     desktop: containerQueryOutputVanillaExtract(
+//       container({
+//         wideCard: {
+//           gridTemplateColumns: "1fr 2fr",
+//           gridTemplateRows: "none",
+//         },
+//       }),
+//     ),
+//   }),
+// );

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compare = void 0;
+exports.compare = {
+    eq: (value) => ({
+        operator: "=",
+        value,
+    }),
+    lt: (value) => ({
+        operator: "<",
+        value,
+    }),
+    lte: (value) => ({
+        operator: "<=",
+        value,
+    }),
+    gt: (value) => ({
+        operator: ">",
+        value,
+    }),
+    gte: (value) => ({
+        operator: ">=",
+        value,
+    }),
+};

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

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeContainerQueryStyle = exports.buildContainerConditionString = exports.buildContainerQueryString = exports.emitCoreFeatures = exports.createEmitCoreFeatures = void 0;
+const modules_1 = require("./modules");
+const linting_1 = require("./linting");
+const core_1 = require("./linting/core");
+const validation_1 = require("./validation");
+const helpers_1 = require("./helpers");
+const createEmitCoreFeatures = (validation) => (props, helpers) => {
+    const { runContainerQueryValidation, validateMinMaxWidth, validateWidthValuesPositive, validateMinMaxHeight, validateHeightValuesPositive, } = validation;
+    if (!runContainerQueryValidation(props, helpers, validateMinMaxWidth, "core", "minWidth must be less than or equal to maxWidth")) {
+        return;
+    }
+    if (!runContainerQueryValidation(props, helpers, validateMinMaxHeight, "core", "minHeight must be less than or equal to maxHeight")) {
+        return;
+    }
+    if (!runContainerQueryValidation(props, helpers, validateWidthValuesPositive, "core", "width values must be greater than 0")) {
+        return;
+    }
+    if (!runContainerQueryValidation(props, helpers, validateHeightValuesPositive, "core", "height values must be greater than 0")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, core_1.lintWidthExactRedundancy, "minWidth should not be combined with maxWidth when both are equal")) {
+        return;
+    }
+    if (!(0, linting_1.runContainerQueryLint)(props, helpers, core_1.lintHeightExactRedundancy, "minHeight should not be combined with maxHeight when both are equal")) {
+        return;
+    }
+    const { addFeature } = helpers;
+    if (props.minWidth) {
+        addFeature("min-width", props.minWidth);
+    }
+    if (props.maxWidth) {
+        addFeature("max-width", props.maxWidth);
+    }
+    if (props.minHeight) {
+        addFeature("min-height", props.minHeight);
+    }
+    if (props.maxHeight) {
+        addFeature("max-height", props.maxHeight);
+    }
+};
+exports.createEmitCoreFeatures = createEmitCoreFeatures;
+exports.emitCoreFeatures = (0, exports.createEmitCoreFeatures)(validation_1.defaultContainerQueryValidation);
+const emitBaseFeatures = (props, helpers) => {
+    (0, exports.emitCoreFeatures)(props, helpers);
+    (0, modules_1.emitAspectRatioFeatures)(props, helpers);
+    (0, modules_1.emitInlineSizeFeatures)(props, helpers);
+    (0, modules_1.emitBlockSizeFeatures)(props, helpers);
+    (0, modules_1.emitStyleFeatures)(props, helpers);
+    (0, modules_1.emitCustomFeatures)(props, helpers);
+};
+exports.buildContainerQueryString = (0, helpers_1.createContainerQueryBuilder)({
+    emitBase: emitBaseFeatures,
+});
+const wrapContainerCondition = (value) => {
+    const trimmed = value.trim();
+    if (trimmed.includes(" and ") ||
+        trimmed.includes(" or ") ||
+        trimmed.startsWith("not ")) {
+        return `(${trimmed})`;
+    }
+    return trimmed;
+};
+const buildContainerConditionString = (condition) => {
+    if ("and" in condition) {
+        return condition.and
+            .map((entry) => wrapContainerCondition((0, exports.buildContainerConditionString)(entry)))
+            .join(" and ");
+    }
+    if ("or" in condition) {
+        return condition.or
+            .map((entry) => wrapContainerCondition((0, exports.buildContainerConditionString)(entry)))
+            .join(" or ");
+    }
+    if ("not" in condition) {
+        return `not ${wrapContainerCondition((0, exports.buildContainerConditionString)(condition.not))}`;
+    }
+    return (0, exports.buildContainerQueryString)(condition);
+};
+exports.buildContainerConditionString = buildContainerConditionString;
+const makeContainerQueryStyle = (queries) => (stylesByQuery) => {
+    const result = {};
+    Object.keys(stylesByQuery).forEach((key) => {
+        const styles = stylesByQuery[key];
+        const props = queries[key];
+        if (!styles || !props)
+            return;
+        result[(0, exports.buildContainerQueryString)(props)] = styles;
+    });
+    const containerQuery = {
+        "@container": result,
+    };
+    return containerQuery;
+};
+exports.makeContainerQueryStyle = makeContainerQueryStyle;

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

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.containerQueryFactory = exports.createContainerQueryFactory = void 0;
+const containerQueries_1 = require("./containerQueries");
+const ALL_CONTAINER_QUERY_MODULES = [
+    "core",
+    "inline",
+    "block",
+    "aspectRatio",
+    "style",
+    "custom",
+];
+const MODULE_KEYS = {
+    core: ["minWidth", "maxWidth", "minHeight", "maxHeight"],
+    inline: ["inlineSize", "inlineSizeRange"],
+    block: ["blockSize", "blockSizeRange"],
+    aspectRatio: ["aspectRatio", "minAspectRatio", "maxAspectRatio"],
+    style: ["style"],
+    custom: ["customFeatures"],
+};
+const KEY_TO_MODULE = Object.fromEntries(Object.keys(MODULE_KEYS).flatMap((moduleId) => MODULE_KEYS[moduleId].map((key) => [key, moduleId])));
+const collectConditionKeys = (condition, keys) => {
+    if ("and" in condition) {
+        condition.and.forEach((entry) => collectConditionKeys(entry, keys));
+        return;
+    }
+    if ("or" in condition) {
+        condition.or.forEach((entry) => collectConditionKeys(entry, keys));
+        return;
+    }
+    if ("not" in condition) {
+        collectConditionKeys(condition.not, keys);
+        return;
+    }
+    Object.keys(condition).forEach((key) => keys.add(key));
+};
+const collectAndConditionKeys = (condition, keys) => {
+    if ("and" in condition) {
+        condition.and.forEach((entry) => collectAndConditionKeys(entry, keys));
+        return;
+    }
+    if ("or" in condition || "not" in condition) {
+        return;
+    }
+    Object.keys(condition).forEach((key) => keys.push(key));
+};
+const guardUnsupportedCondition = (condition, modules, config, label) => {
+    const allowed = new Set();
+    modules.forEach((moduleId) => {
+        MODULE_KEYS[moduleId].forEach((key) => {
+            allowed.add(key);
+        });
+    });
+    const conditionKeys = new Set();
+    collectConditionKeys(condition, conditionKeys);
+    conditionKeys.forEach((key) => {
+        var _a, _b;
+        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 = `Container query factory "${label}" received unsupported feature "${key}".${moduleSuffix}`;
+        if (mode === "log") {
+            console.warn(message);
+            return;
+        }
+        if (mode === "allow")
+            return;
+        throw new Error(message);
+    });
+};
+const guardDuplicateConditions = (condition, config, label) => {
+    var _a, _b;
+    const keys = [];
+    collectAndConditionKeys(condition, keys);
+    const seen = new Set();
+    const duplicates = new Set();
+    keys.forEach((key) => {
+        if (seen.has(key)) {
+            duplicates.add(key);
+            return;
+        }
+        seen.add(key);
+    });
+    if (!duplicates.size)
+        return;
+    const mode = (_b = (_a = config.errorHandling) === null || _a === void 0 ? void 0 : _a.invalidValueMode) !== null && _b !== void 0 ? _b : "throw";
+    const message = `Container query factory "${label}" received duplicate condition "${Array.from(duplicates).join('", "')}".`;
+    if (mode === "log") {
+        console.warn(message);
+        return;
+    }
+    if (mode === "allow")
+        return;
+    throw new Error(message);
+};
+const createContainerQueryFactory = () => (options) => {
+    var _a;
+    const modules = (_a = options.config.modules) !== null && _a !== void 0 ? _a : ALL_CONTAINER_QUERY_MODULES;
+    return (stylesByQuery) => {
+        const result = {};
+        Object.keys(stylesByQuery).forEach((key) => {
+            const styles = stylesByQuery[key];
+            const rule = options.queries[key];
+            if (!styles || !(rule === null || rule === void 0 ? void 0 : rule.query))
+                return;
+            guardUnsupportedCondition(rule.query.condition, modules, options.config, options.config.label);
+            guardDuplicateConditions(rule.query.condition, options.config, options.config.label);
+            result[(0, containerQueries_1.buildContainerConditionString)(rule.query.condition)] = styles;
+        });
+        const containerQuery = {
+            "@container": result,
+        };
+        return options.config.output
+            ? options.config.output(containerQuery)
+            : containerQuery;
+    };
+};
+exports.createContainerQueryFactory = createContainerQueryFactory;
+exports.containerQueryFactory = (0, exports.createContainerQueryFactory)();