@navita/engine 0.0.9 → 0.0.11

package/cache.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+class Cache {
+    constructor(_idGenerator){
+        this._idGenerator = _idGenerator;
+        this._items = {};
+    }
+    getOrStore(value) {
+        const cacheKey = JSON.stringify(value);
+        if (this._items[cacheKey]) {
+            return this._items[cacheKey];
+        }
+        return this._items[cacheKey] = {
+            id: this._idGenerator.next(value),
+            ...value
+        };
+    }
+    items(ids = undefined) {
+        const items = Object.values(this._items);
+        if (ids === undefined) {
+            return items;
+        }
+        return items.filter((item)=>ids.includes(item.id));
+    }
+}
+
+exports.Cache = Cache;

package/cache.mjs

@@ -0,0 +1,25 @@
+class Cache {
+    constructor(_idGenerator){
+        this._idGenerator = _idGenerator;
+        this._items = {};
+    }
+    getOrStore(value) {
+        const cacheKey = JSON.stringify(value);
+        if (this._items[cacheKey]) {
+            return this._items[cacheKey];
+        }
+        return this._items[cacheKey] = {
+            id: this._idGenerator.next(value),
+            ...value
+        };
+    }
+    items(ids = undefined) {
+        const items = Object.values(this._items);
+        if (ids === undefined) {
+            return items;
+        }
+        return items.filter((item)=>ids.includes(item.id));
+    }
+}
+
+export { Cache };

package/helpers/declarationsToBlock.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var helpers_hypenateProperty = require('./hypenateProperty.cjs');
+
+// https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/css.ts#L36
+function declarationsToBlock(style) {
+    let css = "";
+    for(const prop in style){
+        const val = style[prop];
+        if (typeof val === "string" || typeof val === "number") {
+            css += `${helpers_hypenateProperty.hyphenateProperty(prop)}:${val};`;
+        }
+    }
+    return css.slice(0, -1);
+}
+
+exports.declarationsToBlock = declarationsToBlock;

package/helpers/declarationsToBlock.mjs

@@ -0,0 +1,15 @@
+import { hyphenateProperty } from './hypenateProperty.mjs';
+
+// https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/css.ts#L36
+function declarationsToBlock(style) {
+    let css = "";
+    for(const prop in style){
+        const val = style[prop];
+        if (typeof val === "string" || typeof val === "number") {
+            css += `${hyphenateProperty(prop)}:${val};`;
+        }
+    }
+    return css.slice(0, -1);
+}
+
+export { declarationsToBlock };

package/helpers/generateCombinedAtRules.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+function generateCombinedAtRules(currentMediaQuery, nestedMediaQuery) {
+    if (currentMediaQuery.length === 0) {
+        return nestedMediaQuery;
+    }
+    return `${currentMediaQuery} and ${nestedMediaQuery}`;
+}
+
+exports.generateCombinedAtRules = generateCombinedAtRules;

package/helpers/generateCombinedAtRules.mjs

@@ -0,0 +1,8 @@
+function generateCombinedAtRules(currentMediaQuery, nestedMediaQuery) {
+    if (currentMediaQuery.length === 0) {
+        return nestedMediaQuery;
+    }
+    return `${currentMediaQuery} and ${nestedMediaQuery}`;
+}
+
+export { generateCombinedAtRules };

package/helpers/getPropertyPriority.cjs

@@ -0,0 +1,262 @@
+'use strict';
+
+/**
+ * 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;
+
+exports.getPropertyPriority = getPropertyPriority;

package/helpers/getPropertyPriority.mjs

@@ -0,0 +1,260 @@
+/**
+ * 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;
+
+export { getPropertyPriority };

package/helpers/hypenateProperty.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+// https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+function hyphenateProperty(property) {
+    return property in cache ? cache[property] : cache[property] = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
+}
+
+exports.hyphenateProperty = hyphenateProperty;

package/helpers/hypenateProperty.mjs

@@ -0,0 +1,9 @@
+// https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+function hyphenateProperty(property) {
+    return property in cache ? cache[property] : cache[property] = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
+}
+
+export { hyphenateProperty };

package/helpers/isMediaQuery.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+function isMediaQuery(property) {
+    return property.startsWith('@media');
+}
+
+exports.isMediaQuery = isMediaQuery;

package/helpers/isMediaQuery.mjs

@@ -0,0 +1,5 @@
+function isMediaQuery(property) {
+    return property.startsWith('@media');
+}
+
+export { isMediaQuery };

package/helpers/isNestedSelector.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+const regex = /^([:\[>&])/;
+function isNestedSelector(property) {
+    return regex.test(property);
+}
+
+exports.isNestedSelector = isNestedSelector;

package/helpers/isNestedSelector.mjs

@@ -0,0 +1,6 @@
+const regex = /^([:\[>&])/;
+function isNestedSelector(property) {
+    return regex.test(property);
+}
+
+export { isNestedSelector };

package/helpers/isObject.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+function isObject(val) {
+    return val != null && typeof val === 'object' && Array.isArray(val) === false;
+}
+
+exports.isObject = isObject;