@navita/engine 0.0.10 → 0.0.11

package/index.mjs

@@ -1,682 +1,32 @@
 import path from 'node:path';
 import hash from '@emotion/hash';
-import { SourceMapGenerator } from 'source-map';
-import createSort from 'sort-css-media-queries/lib/create-sort.js';
-
-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));
-    }
-}
-
-function isObject(val) {
-    return val != null && typeof val === 'object' && Array.isArray(val) === false;
-}
-
-function splitStyleBlocks(blocks) {
-    const atRules = [];
-    const rules = [];
-    for (const block of blocks){
-        if (block.media || block.support) {
-            atRules.push(block);
-        } else {
-            rules.push(block);
-        }
-    }
-    return {
-        atRules,
-        rules
-    };
-}
-
-class IDGenerator {
-    counter = 1;
-    next() {
-        return this.counter++;
-    }
-}
-
-const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
-const charLength = chars.length;
-class AlphaIDGenerator {
-    constructor(blacklist = [
-        'ad'
-    ]){
-        this.blacklist = blacklist;
-        this.counter = 1;
-    }
-    next() {
-        const nextString = (id, className = '')=>{
-            if (id <= charLength) {
-                return chars[id - 1] + className;
-            }
-            return nextString(id / charLength | 0, chars[(id - 1) % charLength] + className);
-        };
-        let className;
-        do {
-            className = nextString(this.counter++);
-        }while (this.blacklist.includes(className.toLowerCase()))
-        return className;
-    }
-}
-
-class PropertyValueIDGenerator {
-    property = new AlphaIDGenerator();
-    cache = {};
-    next({ property , media ='' , support ='' , pseudo ='' , value  }) {
-        const propertyKey = `${media}${support}${pseudo}${property}`;
-        if (this.cache[propertyKey] === undefined) {
-            this.cache[propertyKey] = {
-                key: this.property.next(),
-                cache: {}
-            };
-        }
-        const entry = this.cache[propertyKey];
-        if (entry.cache[value] === undefined) {
-            entry.cache[value] = Object.keys(entry.cache).length + 1;
-        }
-        return `${entry.key}${entry.cache[value]}`;
-    }
-}
-
-// 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-");
-}
-
-// 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);
-}
-
-function printFontFaces(blocks) {
-    let fontFaces = '';
-    for (const block of blocks){
-        for (const rule of block.rule){
-            fontFaces += `@font-face{font-family:${block.id};${declarationsToBlock(rule)}}`;
-        }
-    }
-    return fontFaces;
-}
-
-// https://github.com/styletron/styletron/blob/master/packages/styletron-engine-atomic/src/css.ts#L48
-function keyframesToBlock(keyframes) {
-    let result = "";
-    for(const animationState in keyframes){
-        result += `${animationState}{${declarationsToBlock(keyframes[animationState])}}`;
-    }
-    return result;
-}
-function printKeyFrames(blocks) {
-    let keyframes = '';
-    for (const block of blocks){
-        keyframes += `@keyframes ${block.id}{${keyframesToBlock(block.rule)}}`;
-    }
-    return keyframes;
-}
-
-function printSourceMap(sourceMapReferences, content) {
-    if (content.length === 0) {
-        return content;
-    }
-    const entries = Object.entries(sourceMapReferences);
-    if (entries.length === 0) {
-        return content;
-    }
-    const sourceMap = new SourceMapGenerator({
-        file: "navita.css",
-        skipValidation: true
-    });
-    const references = entries.flatMap(([filePath, references])=>references.map((reference)=>({
-                filePath,
-                ...reference
-            })));
-    for (const reference of references){
-        const { filePath , selector , line , column  } = reference;
-        const generatedColumn = content.length - 1;
-        content += `${selector}{/* Only used for sourceMap */}`;
-        sourceMap.addMapping({
-            source: filePath,
-            original: {
-                line,
-                column
-            },
-            generated: {
-                line: 1,
-                column: generatedColumn
-            }
-        });
-    }
-    const sourceMapContent = Buffer.from(sourceMap.toString()).toString('base64');
-    content += `\n/*# sourceMappingURL=data:application/json;base64,${sourceMapContent} */`;
-    return content;
-}
-
-/**
- * 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;
-
-function printStyleBlocks(blocks) {
-    let stylesheet = '';
-    let previousStyle;
-    for (const style of blocks){
-        if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support)) {
-            stylesheet += '}';
-        }
-        // Close support queries:
-        // 1. When the current style is not a support query, and the previous style was support query
-        // 2. When the current style is a support query and the previous style was a support query with a different support query
-        if (previousStyle && previousStyle.support && (!style.support || style.support !== previousStyle.support)) {
-            stylesheet += '}';
-        }
-        // Close media queries:
-        // 1. When the current style is not a media query, and the previous style was media query
-        // 2. When the current style is a media query and the previous style was a media query with a different media query
-        if (previousStyle && previousStyle.media && (!style.media || style.media !== previousStyle.media)) {
-            stylesheet += '}';
-        }
-        // Only add media queries if the previous style was not the same media query
-        if (style.media && previousStyle?.media !== style.media) {
-            stylesheet += `@media ${style.media}{`;
-        }
-        // Only add support queries if the previous style was not the same support query
-        if (style.support && previousStyle?.support !== style.support) {
-            stylesheet += `@supports ${style.support}{`;
-        }
-        if (style.type === 'rule') {
-            const className = `.${style.id}`.repeat(getPropertyPriority(style.property));
-            stylesheet += `${className}${style.pseudo}{`;
-        } else if (style.type === 'static' && (previousStyle?.selector !== style.selector || previousStyle?.pseudo !== style.pseudo || previousStyle?.media !== style.media || previousStyle?.support !== style.support)) {
-            // If static, we don't add pseudo selectors currently
-            stylesheet += `${style.selector}${style.pseudo}{`;
-        }
-        stylesheet += `${style.property}:${style.value}`;
-        if (style.type === 'static') {
-            stylesheet += ';';
-        }
-        if (style.type === 'rule') {
-            stylesheet += '}';
-        }
-        previousStyle = style;
-    }
-    if (previousStyle?.support) {
-        stylesheet += '}';
-    }
-    if (previousStyle?.media) {
-        stylesheet += '}';
-    }
-    if (previousStyle?.type === 'static') {
-        stylesheet += '}';
-    }
-    return stylesheet;
-}
-
-const sortCSSMediaQueries = createSort();
-function sortAtRules(blocks) {
-    return blocks.sort((a, b)=>sortCSSMediaQueries(a.media, b.media) || a.support.localeCompare(b.support));
-}
-
-function generateCombinedAtRules(currentMediaQuery, nestedMediaQuery) {
-    if (currentMediaQuery.length === 0) {
-        return nestedMediaQuery;
-    }
-    return `${currentMediaQuery} and ${nestedMediaQuery}`;
-}
-
-function isMediaQuery(property) {
-    return property.startsWith('@media');
-}
-
-const regex$1 = /^([:\[>&])/;
-function isNestedSelector(property) {
-    return regex$1.test(property);
-}
-
-function isSupportsQuery(property) {
-    return property.startsWith("@supports");
-}
-
-const regex = /var\(([^,]+).*\)/;
-function normalizeCSSVarsProperty(property) {
-    if (!property.startsWith('var(')) {
-        return property;
-    }
-    const matches = property.match(regex);
-    if (!matches) {
-        return property;
-    }
-    return matches[1];
-}
-
-function normalizeNestedProperty(nestedProperty) {
-    if (nestedProperty.charAt(0) === '&') {
-        return nestedProperty.slice(1);
-    }
-    return nestedProperty;
-}
-
-const UNITLESS = {
-    animationIterationCount: true,
-    borderImage: true,
-    borderImageOutset: true,
-    borderImageSlice: true,
-    borderImageWidth: true,
-    boxFlex: true,
-    boxFlexGroup: true,
-    columnCount: true,
-    columns: true,
-    flex: true,
-    flexGrow: true,
-    flexShrink: true,
-    fontWeight: true,
-    gridArea: true,
-    gridColumn: true,
-    gridColumnEnd: true,
-    gridColumnStart: true,
-    gridRow: true,
-    gridRowEnd: true,
-    gridRowStart: true,
-    initialLetter: true,
-    lineClamp: true,
-    lineHeight: true,
-    maxLines: true,
-    opacity: true,
-    order: true,
-    orphans: true,
-    scale: true,
-    tabSize: true,
-    WebkitLineClamp: true,
-    widows: true,
-    zIndex: true,
-    zoom: true,
-    // svg properties
-    fillOpacity: true,
-    floodOpacity: true,
-    maskBorder: true,
-    maskBorderOutset: true,
-    maskBorderSlice: true,
-    maskBorderWidth: true,
-    shapeImageThreshold: true,
-    stopOpacity: true,
-    strokeDashoffset: true,
-    strokeMiterlimit: true,
-    strokeOpacity: true,
-    strokeWidth: true
-};
-function pixelifyProperties(property, value) {
-    if (value !== 0 && !UNITLESS[property]) {
-        return `${value}px`;
-    }
-    return value;
-}
-
-// https://github.com/vanilla-extract-css/vanilla-extract/blob/40d7e72c041989a4dc847dc66b94a4c680b5536e/packages/css/src/transformCss.ts#L277
-function transformContentProperty(value) {
-    return value && (value.includes('"') || value.includes("'") || /^([A-Za-z\-]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)(\s|$)/.test(value)) ? value : `"${value}"`;
-}
-
-const transformValuePropertyMap = {
-    content: transformContentProperty
-};
-function processStyles({ cache , type  }) {
-    return function process({ styles , pseudo ="" , media ="" , support ="" , selector =""  }) {
-        const result = [];
-        for (const [property, value] of Object.entries(styles)){
-            if (isObject(value)) {
-                if (isMediaQuery(property)) {
-                    const combinedMedia = generateCombinedAtRules(media, property.slice(6).trim());
-                    result.push(...process({
-                        styles: value,
-                        pseudo,
-                        media: combinedMedia,
-                        support,
-                        selector
-                    }));
-                } else if (isSupportsQuery(property)) {
-                    const combinedSupport = generateCombinedAtRules(support, property.slice(9).trim());
-                    result.push(...process({
-                        styles: value,
-                        pseudo,
-                        media,
-                        support: combinedSupport,
-                        selector
-                    }));
-                } else if (isNestedSelector(property)) {
-                    // This is only allowed in simple pseudos currently.
-                    const copies = property.split(',').map((p)=>p.trim());
-                    for (const copy of copies){
-                        result.push(...process({
-                            styles: value,
-                            pseudo: pseudo + normalizeNestedProperty(copy),
-                            media,
-                            support,
-                            selector
-                        }));
-                    }
-                } else {
-                    console.warn("Unknown property", property);
-                }
-            } else {
-                let newProperty = normalizeCSSVarsProperty(property);
-                let newValue = value;
-                if (typeof value === "string") {
-                    newValue = value.trim().replace(/;[\n\s]*$/, "");
-                }
-                // Check if value starts with --, if so, wrap in var()
-                if (typeof newValue === "string" && newValue.startsWith("--")) {
-                    newValue = `var(${value})`;
-                }
-                if (typeof value === "number") {
-                    newValue = pixelifyProperties(newProperty, value);
-                }
-                if (transformValuePropertyMap[newProperty]) {
-                    newValue = transformValuePropertyMap[newProperty](value);
-                }
-                newProperty = hyphenateProperty(newProperty);
-                // Remove trailing semicolon and new lines with regex
-                result.push(cache.getOrStore({
-                    type,
-                    selector,
-                    property: newProperty,
-                    value: newValue,
-                    pseudo,
-                    media,
-                    support
-                }));
-            }
-        }
-        return result;
-    };
-}
-
-class ClassList extends String {
-}
-
-class Static {
-}
+import { Cache } from './cache.mjs';
+import { isObject } from './helpers/isObject.mjs';
+import { splitStyleBlocks } from './helpers/splitStyleBlocks.mjs';
+import { IDGenerator } from './identifiers/IDGenerator.mjs';
+import { AlphaIDGenerator } from './identifiers/alphaIDGenerator.mjs';
+import { PropertyValueIDGenerator } from './identifiers/propertyValueIDGenerator.mjs';
+import { printFontFaces } from './printers/printFontFaces.mjs';
+import { printKeyFrames } from './printers/printKeyFrames.mjs';
+import { printSourceMap } from './printers/printSourceMap.mjs';
+import { printStyleBlocks } from './printers/printStyleBlocks.mjs';
+import { sortAtRules } from './printers/sortAtRules.mjs';
+import { processStyles } from './processStyles.mjs';
+import { ClassList } from './wrappers/classList.mjs';
+import { Static } from './wrappers/static.mjs';
+import './helpers/declarationsToBlock.mjs';
+import './helpers/hypenateProperty.mjs';
+import 'source-map';
+import './helpers/getPropertyPriority.mjs';
+import 'sort-css-media-queries/lib/create-sort.js';
+import './helpers/generateCombinedAtRules.mjs';
+import './helpers/isMediaQuery.mjs';
+import './helpers/isNestedSelector.mjs';
+import './helpers/isSupportsQuery.mjs';
+import './helpers/normalizeCSSVarsProperty.mjs';
+import './helpers/normalizeNestedProperty.mjs';
+import './helpers/pixelifyProperties.mjs';
+import './helpers/transformContentProperty.mjs';
 
 const defaultOptions = {
     enableSourceMaps: false,