@navita/engine 0.2.2 → 3.0.0-next.0

package/helpers/getPropertyPriority.mjs

@@ -1,260 +1,225 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/getPropertyPriority.ts
+const longhands = Object.values({
+	animation: [
+		"animation-name",
+		"animation-duration",
+		"animation-timing-function",
+		"animation-delay",
+		"animation-iteration-count",
+		"animation-direction",
+		"animation-fill-mode",
+		"animation-play-state"
+	],
+	background: [
+		"background-attachment",
+		"background-clip",
+		"background-color",
+		"background-image",
+		"background-origin",
+		"background-position",
+		"background-repeat",
+		"background-size"
+	],
+	border: [
+		"border-color",
+		"border-style",
+		"border-width"
+	],
+	"border-block-end": [
+		"border-block-end-color",
+		"border-block-end-style",
+		"border-block-end-width"
+	],
+	"border-block-start": [
+		"border-block-start-color",
+		"border-block-start-style",
+		"border-block-start-width"
+	],
+	"border-bottom": [
+		"border-bottom-color",
+		"border-bottom-style",
+		"border-bottom-width"
+	],
+	"border-color": [
+		"border-bottom-color",
+		"border-left-color",
+		"border-right-color",
+		"border-top-color"
+	],
+	"border-image": [
+		"border-image-outset",
+		"border-image-repeat",
+		"border-image-slice",
+		"border-image-source",
+		"border-image-width"
+	],
+	"border-inline-end": [
+		"border-inline-end-color",
+		"border-inline-end-style",
+		"border-inline-end-width"
+	],
+	"border-inline-start": [
+		"border-inline-start-color",
+		"border-inline-start-style",
+		"border-inline-start-width"
+	],
+	"border-left": [
+		"border-left-color",
+		"border-left-style",
+		"border-left-width"
+	],
+	"border-radius": [
+		"border-top-left-radius",
+		"border-top-right-radius",
+		"border-bottom-right-radius",
+		"border-bottom-left-radius"
+	],
+	"border-right": [
+		"border-right-color",
+		"border-right-style",
+		"border-right-width"
+	],
+	"border-style": [
+		"border-bottom-style",
+		"border-left-style",
+		"border-right-style",
+		"border-top-style"
+	],
+	"border-top": [
+		"border-top-color",
+		"border-top-style",
+		"border-top-width"
+	],
+	"border-width": [
+		"border-bottom-width",
+		"border-left-width",
+		"border-right-width",
+		"border-top-width"
+	],
+	"column-rule": [
+		"column-rule-width",
+		"column-rule-style",
+		"column-rule-color"
+	],
+	columns: ["column-count", "column-width"],
+	flex: [
+		"flex-grow",
+		"flex-shrink",
+		"flex-basis"
+	],
+	"flex-flow": ["flex-direction", "flex-wrap"],
+	font: [
+		"font-family",
+		"font-size",
+		"font-stretch",
+		"font-style",
+		"font-variant",
+		"font-weight",
+		"line-height"
+	],
+	gap: ["row-gap", "column-gap"],
+	grid: [
+		"grid-auto-columns",
+		"grid-auto-flow",
+		"grid-auto-rows",
+		"grid-template-areas",
+		"grid-template-columns",
+		"grid-template-rows"
+	],
+	"grid-area": [
+		"grid-row-start",
+		"grid-column-start",
+		"grid-row-end",
+		"grid-column-end"
+	],
+	"grid-column": ["grid-column-end", "grid-column-start"],
+	"grid-row": ["grid-row-end", "grid-row-start"],
+	"grid-template": [
+		"grid-template-areas",
+		"grid-template-columns",
+		"grid-template-rows"
+	],
+	"list-style": [
+		"list-style-image",
+		"list-style-position",
+		"list-style-type"
+	],
+	margin: [
+		"margin-bottom",
+		"margin-left",
+		"margin-right",
+		"margin-top"
+	],
+	mask: [
+		"mask-clip",
+		"mask-composite",
+		"mask-image",
+		"mask-mode",
+		"mask-origin",
+		"mask-position",
+		"mask-repeat",
+		"mask-size"
+	],
+	offset: [
+		"offset-anchor",
+		"offset-distance",
+		"offset-path",
+		"offset-position",
+		"offset-rotate"
+	],
+	outline: [
+		"outline-color",
+		"outline-style",
+		"outline-width"
+	],
+	overflow: ["overflow-x", "overflow-y"],
+	padding: [
+		"padding-bottom",
+		"padding-left",
+		"padding-right",
+		"padding-top"
+	],
+	"place-content": ["align-content", "justify-content"],
+	"place-items": ["align-items", "justify-items"],
+	"place-self": ["align-self", "justify-self"],
+	"scroll-margin": [
+		"scroll-margin-bottom",
+		"scroll-margin-left",
+		"scroll-margin-right",
+		"scroll-margin-top"
+	],
+	"scroll-padding": [
+		"scroll-padding-bottom",
+		"scroll-padding-left",
+		"scroll-padding-right",
+		"scroll-padding-top"
+	],
+	"text-decoration": [
+		"text-decoration-color",
+		"text-decoration-line",
+		"text-decoration-style",
+		"text-decoration-thickness"
+	],
+	"text-emphasis": ["text-emphasis-color", "text-emphasis-style"],
+	transition: [
+		"transition-delay",
+		"transition-duration",
+		"transition-property",
+		"transition-timing-function"
+	]
+}).reduce((a, b) => [...a, ...b], []);
 /**
- * This list comes from:
- * https://github.com/callstack/linaria/blob/master/packages/atomic/src/processors/helpers/propertyPriority.ts
- */ const shorthandProperties = {
-    // The `all` property resets everything, and should effectively have priority zero.
-    // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be
-    // 'all': []
-    animation: [
-        'animation-name',
-        'animation-duration',
-        'animation-timing-function',
-        'animation-delay',
-        'animation-iteration-count',
-        'animation-direction',
-        'animation-fill-mode',
-        'animation-play-state'
-    ],
-    background: [
-        'background-attachment',
-        'background-clip',
-        'background-color',
-        'background-image',
-        'background-origin',
-        'background-position',
-        'background-repeat',
-        'background-size'
-    ],
-    border: [
-        'border-color',
-        'border-style',
-        'border-width'
-    ],
-    'border-block-end': [
-        'border-block-end-color',
-        'border-block-end-style',
-        'border-block-end-width'
-    ],
-    'border-block-start': [
-        'border-block-start-color',
-        'border-block-start-style',
-        'border-block-start-width'
-    ],
-    'border-bottom': [
-        'border-bottom-color',
-        'border-bottom-style',
-        'border-bottom-width'
-    ],
-    'border-color': [
-        'border-bottom-color',
-        'border-left-color',
-        'border-right-color',
-        'border-top-color'
-    ],
-    'border-image': [
-        'border-image-outset',
-        'border-image-repeat',
-        'border-image-slice',
-        'border-image-source',
-        'border-image-width'
-    ],
-    'border-inline-end': [
-        'border-inline-end-color',
-        'border-inline-end-style',
-        'border-inline-end-width'
-    ],
-    'border-inline-start': [
-        'border-inline-start-color',
-        'border-inline-start-style',
-        'border-inline-start-width'
-    ],
-    'border-left': [
-        'border-left-color',
-        'border-left-style',
-        'border-left-width'
-    ],
-    'border-radius': [
-        'border-top-left-radius',
-        'border-top-right-radius',
-        'border-bottom-right-radius',
-        'border-bottom-left-radius'
-    ],
-    'border-right': [
-        'border-right-color',
-        'border-right-style',
-        'border-right-width'
-    ],
-    'border-style': [
-        'border-bottom-style',
-        'border-left-style',
-        'border-right-style',
-        'border-top-style'
-    ],
-    'border-top': [
-        'border-top-color',
-        'border-top-style',
-        'border-top-width'
-    ],
-    'border-width': [
-        'border-bottom-width',
-        'border-left-width',
-        'border-right-width',
-        'border-top-width'
-    ],
-    'column-rule': [
-        'column-rule-width',
-        'column-rule-style',
-        'column-rule-color'
-    ],
-    columns: [
-        'column-count',
-        'column-width'
-    ],
-    flex: [
-        'flex-grow',
-        'flex-shrink',
-        'flex-basis'
-    ],
-    'flex-flow': [
-        'flex-direction',
-        'flex-wrap'
-    ],
-    font: [
-        'font-family',
-        'font-size',
-        'font-stretch',
-        'font-style',
-        'font-variant',
-        'font-weight',
-        'line-height'
-    ],
-    gap: [
-        'row-gap',
-        'column-gap'
-    ],
-    grid: [
-        'grid-auto-columns',
-        'grid-auto-flow',
-        'grid-auto-rows',
-        'grid-template-areas',
-        'grid-template-columns',
-        'grid-template-rows'
-    ],
-    'grid-area': [
-        'grid-row-start',
-        'grid-column-start',
-        'grid-row-end',
-        'grid-column-end'
-    ],
-    'grid-column': [
-        'grid-column-end',
-        'grid-column-start'
-    ],
-    'grid-row': [
-        'grid-row-end',
-        'grid-row-start'
-    ],
-    'grid-template': [
-        'grid-template-areas',
-        'grid-template-columns',
-        'grid-template-rows'
-    ],
-    'list-style': [
-        'list-style-image',
-        'list-style-position',
-        'list-style-type'
-    ],
-    margin: [
-        'margin-bottom',
-        'margin-left',
-        'margin-right',
-        'margin-top'
-    ],
-    mask: [
-        'mask-clip',
-        'mask-composite',
-        'mask-image',
-        'mask-mode',
-        'mask-origin',
-        'mask-position',
-        'mask-repeat',
-        'mask-size'
-    ],
-    offset: [
-        'offset-anchor',
-        'offset-distance',
-        'offset-path',
-        'offset-position',
-        'offset-rotate'
-    ],
-    outline: [
-        'outline-color',
-        'outline-style',
-        'outline-width'
-    ],
-    overflow: [
-        'overflow-x',
-        'overflow-y'
-    ],
-    padding: [
-        'padding-bottom',
-        'padding-left',
-        'padding-right',
-        'padding-top'
-    ],
-    'place-content': [
-        'align-content',
-        'justify-content'
-    ],
-    'place-items': [
-        'align-items',
-        'justify-items'
-    ],
-    'place-self': [
-        'align-self',
-        'justify-self'
-    ],
-    'scroll-margin': [
-        'scroll-margin-bottom',
-        'scroll-margin-left',
-        'scroll-margin-right',
-        'scroll-margin-top'
-    ],
-    'scroll-padding': [
-        'scroll-padding-bottom',
-        'scroll-padding-left',
-        'scroll-padding-right',
-        'scroll-padding-top'
-    ],
-    'text-decoration': [
-        'text-decoration-color',
-        'text-decoration-line',
-        'text-decoration-style',
-        'text-decoration-thickness'
-    ],
-    'text-emphasis': [
-        'text-emphasis-color',
-        'text-emphasis-style'
-    ],
-    transition: [
-        'transition-delay',
-        'transition-duration',
-        'transition-property',
-        'transition-timing-function'
-    ]
-};
-const longhands = Object.values(shorthandProperties).reduce((a, b)=>[
-        ...a,
-        ...b
-    ], []);
-/**
- * The concept here is that shorthand properties, such as "border" gets
- * a priority of one, while longhand properties, such as "border-color" gets
- * a priority of 2.
- *
- * Read more:
- * @see https://weser.io/blog/the-shorthand-longhand-problem-in-atomic-css
- * @see https://www.w3.org/TR/selectors-3/#specificity
- */ const getPropertyPriority = (property)=>longhands.includes(property) ? 2 : 1;
-
+* The concept here is that shorthand properties, such as "border" gets
+* a priority of one, while longhand properties, such as "border-color" gets
+* a priority of 2.
+*
+* Read more:
+* @see https://weser.io/blog/the-shorthand-longhand-problem-in-atomic-css
+* @see https://www.w3.org/TR/selectors-3/#specificity
+*/
+const getPropertyPriority = (property) => longhands.includes(property) ? 2 : 1;
+//#endregion
 export { getPropertyPriority };

package/helpers/hyphenateProperty.cjs

@@ -1,16 +1,15 @@
-'use strict';
-
-// Modified from
-// https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/hyphenateProperty.ts
 const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
 const cssVarPattern = /^--/;
 const cache = {};
 function hyphenateProperty(property) {
-    if (cssVarPattern.test(property)) {
-        return property;
-    }
-    return property in cache ? cache[property] : cache[property] = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
+	if (cssVarPattern.test(property)) return property;
+	if (property in cache) return cache[property];
+	const hyphenated = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
+	cache[property] = hyphenated;
+	return hyphenated;
 }
-
+//#endregion
 exports.hyphenateProperty = hyphenateProperty;

package/helpers/hyphenateProperty.mjs

@@ -1,14 +1,17 @@
-// Modified from
-// https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/hyphenateProperty.ts
 const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
 const cssVarPattern = /^--/;
 const cache = {};
 function hyphenateProperty(property) {
-    if (cssVarPattern.test(property)) {
-        return property;
-    }
-    return property in cache ? cache[property] : cache[property] = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
+	if (cssVarPattern.test(property)) return property;
+	if (property in cache) return cache[property];
+	const hyphenated = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
+	cache[property] = hyphenated;
+	return hyphenated;
 }
-
+//#endregion
 export { hyphenateProperty };

package/helpers/isContainerQuery.cjs

@@ -1,7 +1,7 @@
-'use strict';
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/isContainerQuery.ts
 function isContainerQuery(property) {
-    return property.startsWith("@container");
+	return property.startsWith("@container");
 }
-
+//#endregion
 exports.isContainerQuery = isContainerQuery;

package/helpers/isContainerQuery.mjs

@@ -1,5 +1,9 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/isContainerQuery.ts
 function isContainerQuery(property) {
-    return property.startsWith("@container");
+	return property.startsWith("@container");
 }
-
+//#endregion
 export { isContainerQuery };

package/helpers/isMediaQuery.cjs

@@ -1,7 +1,7 @@
-'use strict';
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/isMediaQuery.ts
 function isMediaQuery(property) {
-    return property.startsWith('@media');
+	return property.startsWith("@media");
 }
-
+//#endregion
 exports.isMediaQuery = isMediaQuery;

package/helpers/isMediaQuery.mjs

@@ -1,5 +1,9 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/isMediaQuery.ts
 function isMediaQuery(property) {
-    return property.startsWith('@media');
+	return property.startsWith("@media");
 }
-
+//#endregion
 export { isMediaQuery };

package/helpers/isNestedSelector.cjs

@@ -1,8 +1,8 @@
-'use strict';
-
-const regex = /^([:\[>&])/;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/isNestedSelector.ts
+const leadingCombinatorRegex = /^[:[>&+~\s]/;
 function isNestedSelector(property) {
-    return regex.test(property);
+	return leadingCombinatorRegex.test(property) || property.includes("&");
 }
-
+//#endregion
 exports.isNestedSelector = isNestedSelector;

package/helpers/isNestedSelector.mjs

@@ -1,6 +1,10 @@
-const regex = /^([:\[>&])/;
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/isNestedSelector.ts
+const leadingCombinatorRegex = /^[:[>&+~\s]/;
 function isNestedSelector(property) {
-    return regex.test(property);
+	return leadingCombinatorRegex.test(property) || property.includes("&");
 }
-
+//#endregion
 export { isNestedSelector };

package/helpers/isObject.cjs

@@ -1,7 +1,7 @@
-'use strict';
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/isObject.ts
 function isObject(val) {
-    return val != null && typeof val === 'object' && Array.isArray(val) === false;
+	return val != null && typeof val === "object" && Array.isArray(val) === false;
 }
-
+//#endregion
 exports.isObject = isObject;

package/helpers/isObject.mjs

@@ -1,5 +1,9 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/isObject.ts
 function isObject(val) {
-    return val != null && typeof val === 'object' && Array.isArray(val) === false;
+	return val != null && typeof val === "object" && Array.isArray(val) === false;
 }
-
+//#endregion
 export { isObject };

package/helpers/isSupportsQuery.cjs

@@ -1,7 +1,7 @@
-'use strict';
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/isSupportsQuery.ts
 function isSupportsQuery(property) {
-    return property.startsWith("@supports");
+	return property.startsWith("@supports");
 }
-
+//#endregion
 exports.isSupportsQuery = isSupportsQuery;

package/helpers/isSupportsQuery.mjs

@@ -1,5 +1,9 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/helpers/isSupportsQuery.ts
 function isSupportsQuery(property) {
-    return property.startsWith("@supports");
+	return property.startsWith("@supports");
 }
-
+//#endregion
 export { isSupportsQuery };

package/helpers/normalizeCSSVarsProperty.cjs

@@ -1,15 +1,11 @@
-'use strict';
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/helpers/normalizeCSSVarsProperty.ts
 const regex = /var\(([^,]+).*\)/;
 function normalizeCSSVarsProperty(property) {
-    if (!property.startsWith('var(')) {
-        return property;
-    }
-    const matches = property.match(regex);
-    if (!matches) {
-        return property;
-    }
-    return matches[1];
+	if (!property.startsWith("var(")) return property;
+	const matches = property.match(regex);
+	if (!matches) return property;
+	return matches[1];
 }
-
+//#endregion
 exports.normalizeCSSVarsProperty = normalizeCSSVarsProperty;