@dazl/shorthands-opener 4.2.0

package/src/shorthands/openers/grid-template-shorthand.ts

@@ -0,0 +1,176 @@
+import type {
+    EvaluatedAst,
+    OpenedShorthand,
+    SimpleOpenedShorthand,
+    SimpleShorthandOpener,
+    SimpleShorthandOpenerInner,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    ShorthandCloser,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { valueTextNode } from '../../tokenizers/index.js';
+import { type GridTemplates, GRID_TEMPLATE_KEYWORD_VALUE_MAP } from '../shorthand-css-data.js';
+import {
+    trackSizePredicate,
+    gridTemplateAreasDataType,
+    gridTemplateRowsDataType,
+    gridTemplateColumnsDataType,
+    gridTemplateSingleValueDataType,
+} from '../../css-data-types/index.js';
+import {
+    isOpenedInitial,
+    singleKeywordShorthandOpener,
+    createShorthandOpener,
+    getOpenedNode,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+    fixAstNodesPositions,
+} from '../shorthand-parser-utils.js';
+import { CannotCloseGridTemplateError } from '../shorthand-parser-errors.js';
+
+type OpenedGridTemplates<V> = OpenedShorthand<V, GridTemplates>;
+type GridTemplateShorthandCloser<V> = ShorthandCloser<V, GridTemplates, OpenedGridTemplates<V>>;
+
+export const getGridTemplateShorthandParts = <V>() =>
+    [
+        { prop: 'grid-template-areas', dataType: gridTemplateAreasDataType, multipleItems: true },
+        { prop: 'grid-template-rows', dataType: gridTemplateRowsDataType, multipleItems: true },
+        { prop: 'grid-template-columns', dataType: gridTemplateColumnsDataType, multipleItems: true },
+    ] as ShorthandPart<V, GridTemplates>[];
+
+function isNamedLineStart<V>({ value }: EvaluatedAst<V>) {
+    return value.type === 'text' && value.text.startsWith('[');
+}
+
+function isNamedLineEnd<V>({ value }: EvaluatedAst<V>) {
+    return value.type === 'text' && value.text.endsWith(']');
+}
+
+function isGridAreasString<V>({ value }: EvaluatedAst<V>) {
+    return value.type === 'string';
+}
+
+export function gridTemplateShorthandOpener<V>(
+    valueAst: EvaluatedAst<V>[],
+): OpenedShorthand<V, 'grid-template-rows' | 'grid-template-columns' | 'grid-template-areas'> {
+    const delimiterIndex = valueAst.findIndex((node) => node.value.type === '/');
+
+    const rowAndAreaNodes = delimiterIndex === -1 ? [...valueAst] : valueAst.slice(0, delimiterIndex);
+    const columnNodes = delimiterIndex === -1 ? [] : valueAst.slice(delimiterIndex + 1);
+
+    const hasAreas = rowAndAreaNodes.some((node) => node.value.type === 'string');
+    if (!hasAreas) {
+        if (columnNodes.length === 0) throw new Error('Invalid definition. grid-template should have columns defined.');
+
+        return {
+            'grid-template-areas': [{ value: valueTextNode('none') }],
+            'grid-template-rows': rowAndAreaNodes,
+            'grid-template-columns': columnNodes,
+        };
+    }
+
+    const rowNodes: EvaluatedAst<V>[] = [];
+    const areaNodes: EvaluatedAst<V>[] = [];
+    while (rowAndAreaNodes.length) {
+        const node = rowAndAreaNodes.shift();
+        if (!node) break;
+
+        if (isNamedLineStart(node)) {
+            let namedLine: EvaluatedAst<V> | undefined = node;
+            rowNodes.push(namedLine);
+            while (!isNamedLineEnd(namedLine)) {
+                namedLine = rowAndAreaNodes.shift();
+                if (!namedLine) throw new Error('Invalid definition. Named lines should be closed with ].');
+                rowNodes.push(namedLine);
+            }
+        } else if (isGridAreasString(node)) {
+            areaNodes.push(node);
+
+            const nextNode = rowAndAreaNodes[0];
+            if (nextNode && !isNamedLineStart(nextNode) && !isGridAreasString(nextNode)) {
+                // right after grid areas string should follow a row track
+                rowNodes.push(rowAndAreaNodes.shift()!);
+            } else {
+                // It is `auto` by default, if not defined explicitly
+                rowNodes.push({ value: valueTextNode('auto') });
+            }
+        } else {
+            throw new Error('Invalid definition. Grid row track should follow right after grid area.');
+        }
+    }
+
+    return {
+        'grid-template-rows': rowNodes,
+        'grid-template-areas': areaNodes,
+        'grid-template-columns': columnNodes.length ? columnNodes : [{ value: valueTextNode('none') }],
+    };
+}
+
+// grid-template
+export const openGridTemplateShorthand: GetSimpleShorthandOpener<GridTemplates> = <V>() =>
+    createShorthandOpener({
+        prop: 'grid-template',
+        singleKeywordPart: {
+            prop: 'grid-template',
+            dataType: gridTemplateSingleValueDataType,
+            partOpener: singleKeywordShorthandOpener(
+                GRID_TEMPLATE_KEYWORD_VALUE_MAP,
+                true,
+            ) as SimpleShorthandOpenerInner<V, GridTemplates>,
+        },
+        parts: getGridTemplateShorthandParts(),
+        shorthandOpener: gridTemplateShorthandOpener,
+    }) as SimpleShorthandOpener<V, GridTemplates>;
+
+const closeGridTemplateShorthandRowsColumnsSyntax: GetShorthandCloser<GridTemplates> = <V>() =>
+    createShorthandCloser<V, GridTemplates>(
+        shorthandCloserTemplate<GridTemplates>`${'grid-template-rows'} / ${'grid-template-columns'}`,
+    );
+
+const closeGridTemplateShorthandAreasSyntax =
+    <V>(): GridTemplateShorthandCloser<V> =>
+    (opened, api, detachExpression) => {
+        const openedAreas = opened['grid-template-areas'] as EvaluatedAst<V>[];
+        const openedRows = opened['grid-template-rows'] as EvaluatedAst<V>[];
+
+        const areasList = [...openedAreas];
+        const splicedAreasRows = openedRows.reduce((splicedAreasRows, value) => {
+            const valueList = [value];
+            if (trackSizePredicate(value.value)) {
+                const currArea = areasList.shift();
+                if (!currArea) {
+                    throw new CannotCloseGridTemplateError();
+                }
+
+                valueList.unshift(currArea);
+            }
+            return splicedAreasRows.concat(valueList);
+        }, [] as EvaluatedAst<V>[]);
+        if (areasList.length > 0) {
+            throw new CannotCloseGridTemplateError();
+        }
+
+        return getOpenedNode(splicedAreasRows, api, detachExpression);
+    };
+
+export const closeGridTemplateShorthand =
+    <V>(): GridTemplateShorthandCloser<V> =>
+    (opened, api, detachExpression) => {
+        if (isOpenedInitial(opened, 'grid-template-areas', gridTemplateAreasDataType)) {
+            return closeGridTemplateShorthandRowsColumnsSyntax<V>()(
+                opened as SimpleOpenedShorthand<V, GridTemplates>,
+                api,
+                detachExpression,
+            );
+        }
+
+        const closedAst = closeGridTemplateShorthandAreasSyntax<V>()(opened, api, detachExpression);
+        return fixAstNodesPositions(
+            closedAst
+                .concat({ ...valueTextNode('/'), type: '/' })
+                .concat(getOpenedNode(opened['grid-template-columns'], api, detachExpression)),
+            api,
+        );
+    };

package/src/shorthands/openers/index.ts

@@ -0,0 +1,21 @@
+export * from './margin-shorthand.js';
+export * from './padding-shorthand.js';
+export * from './border-radius-shorthand.js';
+export * from './border-shorthand.js';
+export * from './outline-shorthand.js';
+export * from './border-image-shorthand.js';
+export * from './background-shorthand.js';
+export * from './background-position-shorthand.js';
+export * from './font-shorthand.js';
+export * from './place-content-shorthand.js';
+export * from './place-items-shorthand.js';
+export * from './flex-shorthand.js';
+export * from './flex-flow-shorthand.js';
+export * from './gap-shorthand.js';
+export * from './grid-gap-shorthand.js';
+export * from './grid-axis-shorthand.js';
+export * from './grid-template-shorthand.js';
+export * from './grid-shorthand.js';
+export * from './overflow-shorthand.js';
+export * from './text-decoration-shorthand.js';
+export * from './list-style-shorthand.js';

package/src/shorthands/openers/list-style-shorthand.ts

@@ -0,0 +1,33 @@
+import type { ListStyles } from '../shorthand-css-data.js';
+import type { SimpleShorthandOpener, GetSimpleShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import {
+    imageSourceDataType,
+    listStyleSingleValueDataType,
+    listStylePositionDataType,
+    listStyleTypeDataType,
+} from '../../css-data-types/index.js';
+import {
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+// list-style
+export const openListStyleShorthand: GetSimpleShorthandOpener<ListStyles> = <V>() =>
+    createShorthandOpener({
+        prop: 'list-style',
+        singleKeywordPart: { prop: 'list-style', dataType: listStyleSingleValueDataType },
+        parts: [
+            { prop: 'list-style-type', dataType: listStyleTypeDataType },
+            { prop: 'list-style-image', dataType: imageSourceDataType },
+            { prop: 'list-style-position', dataType: listStylePositionDataType },
+        ],
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, ListStyles>;
+
+export const closeListStyleShorthand: GetShorthandCloser<ListStyles> = <V>() =>
+    createShorthandCloser<V, ListStyles>(
+        shorthandCloserTemplate<ListStyles>`${'list-style-type'} ${'list-style-image'} ${'list-style-position'}`,
+    );

package/src/shorthands/openers/margin-shorthand.ts

@@ -0,0 +1,20 @@
+import type { Margins } from '../shorthand-css-data.js';
+import type { GetSimpleShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import {
+    edgesShorthandOpener,
+    createShorthandOpenerFromPart,
+    edgesShorthandCloser,
+} from '../shorthand-parser-utils.js';
+import { ALWAYS_DATA_TYPE } from '../../css-data-types/index.js';
+
+// margin
+export const openMarginShorthand: GetSimpleShorthandOpener<Margins> = <V>() =>
+    createShorthandOpenerFromPart<V, Margins>({
+        prop: 'margin',
+        dataType: ALWAYS_DATA_TYPE,
+        partOpener: edgesShorthandOpener('margin'),
+        openedProps: ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+    });
+
+export const closeMarginShorthand: GetShorthandCloser<Margins> = <V>() => edgesShorthandCloser<V, Margins>('margin');

package/src/shorthands/openers/outline-shorthand.ts

@@ -0,0 +1,27 @@
+import type { Outlines } from '../shorthand-css-data.js';
+import type { SimpleShorthandOpener, GetSimpleShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import { outlineStyleDataType, lineWidthDataType, outlineColorDataType } from '../../css-data-types/index.js';
+import {
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+// outline
+export const openOutlineShorthand: GetSimpleShorthandOpener<Outlines> = <V>() =>
+    createShorthandOpener({
+        prop: 'outline',
+        parts: [
+            { prop: 'outline-style', dataType: outlineStyleDataType },
+            { prop: 'outline-width', dataType: lineWidthDataType },
+            { prop: 'outline-color', dataType: outlineColorDataType },
+        ],
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, Outlines>;
+
+export const closeOutlineShorthand: GetShorthandCloser<Outlines> = <V>() =>
+    createShorthandCloser<V, Outlines>(
+        shorthandCloserTemplate<Outlines>`${'outline-style'} ${'outline-width'} ${'outline-color'}`,
+    );

package/src/shorthands/openers/overflow-shorthand.ts

@@ -0,0 +1,40 @@
+import type { Overflows } from '../shorthand-css-data.js';
+import type {
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { overflowDataType } from '../../css-data-types/index.js';
+import {
+    splitSimpleShorthandOpener,
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    createShorthandCloserTemplateFromParts,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+const getOverflowShorthandParts = <V>() =>
+    [
+        {
+            prop: 'overflow-x',
+            dataType: overflowDataType,
+            partOpener: splitSimpleShorthandOpener(['overflow-x', 'overflow-y']),
+        },
+        {
+            prop: 'overflow-y',
+            dataType: overflowDataType,
+        },
+    ] as ShorthandPart<V, Overflows>[];
+
+// overflow
+export const openOverflowShorthand: GetSimpleShorthandOpener<Overflows> = <V>() =>
+    createShorthandOpener({
+        prop: 'overflow',
+        parts: getOverflowShorthandParts(),
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, Overflows>;
+
+export const closeOverflowShorthand: GetShorthandCloser<Overflows> = <V>() =>
+    createShorthandCloser<V, Overflows>(createShorthandCloserTemplateFromParts(getOverflowShorthandParts()));

package/src/shorthands/openers/padding-shorthand.ts

@@ -0,0 +1,21 @@
+import type { Paddings } from '../shorthand-css-data.js';
+import type { GetSimpleShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import {
+    edgesShorthandOpener,
+    createShorthandOpenerFromPart,
+    edgesShorthandCloser,
+} from '../shorthand-parser-utils.js';
+import { ALWAYS_DATA_TYPE } from '../../css-data-types/index.js';
+
+// padding
+export const openPaddingShorthand: GetSimpleShorthandOpener<Paddings> = <V>() =>
+    createShorthandOpenerFromPart<V, Paddings>({
+        prop: 'padding',
+        dataType: ALWAYS_DATA_TYPE,
+        partOpener: edgesShorthandOpener('padding'),
+        openedProps: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+    });
+
+export const closePaddingShorthand: GetShorthandCloser<Paddings> = <V>() =>
+    edgesShorthandCloser<V, Paddings>('padding');

package/src/shorthands/openers/place-content-shorthand.ts

@@ -0,0 +1,49 @@
+import type { PlaceContents } from '../shorthand-css-data.js';
+import type {
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { alignContentDataType, justifyContentDataType } from '../../css-data-types/index.js';
+import {
+    intersectionBeforeOpenerCheck,
+    splitSimpleShorthandOpener,
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    createShorthandCloserTemplateFromParts,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+const getPlaceContentShorthandParts = <V>() =>
+    [
+        {
+            prop: 'align-content',
+            dataType: alignContentDataType,
+            beforeOpenerCheck: intersectionBeforeOpenerCheck('place-content', [
+                alignContentDataType,
+                justifyContentDataType,
+            ]),
+            partOpener: splitSimpleShorthandOpener(['align-content', 'justify-content']),
+        },
+        {
+            prop: 'justify-content',
+            dataType: justifyContentDataType,
+            beforeOpenerCheck: intersectionBeforeOpenerCheck('place-content', [
+                alignContentDataType,
+                justifyContentDataType,
+            ]),
+        },
+    ] as ShorthandPart<V, PlaceContents>[];
+
+// place-content
+export const openPlaceContentShorthand: GetSimpleShorthandOpener<PlaceContents> = <V>() =>
+    createShorthandOpener({
+        prop: 'place-content',
+        parts: getPlaceContentShorthandParts(),
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, PlaceContents>;
+
+export const closePlaceContentShorthand: GetShorthandCloser<PlaceContents> = <V>() =>
+    createShorthandCloser<V, PlaceContents>(createShorthandCloserTemplateFromParts(getPlaceContentShorthandParts()));

package/src/shorthands/openers/place-items-shorthand.ts

@@ -0,0 +1,43 @@
+import type { PlaceItems } from '../shorthand-css-data.js';
+import type {
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { alignItemsDataType, justifyItemsDataType } from '../../css-data-types/index.js';
+import {
+    intersectionBeforeOpenerCheck,
+    splitSimpleShorthandOpener,
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    createShorthandCloserTemplateFromParts,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+const getPlaceItemsShorthandParts = <V>() =>
+    [
+        {
+            prop: 'align-items',
+            dataType: alignItemsDataType,
+            beforeOpenerCheck: intersectionBeforeOpenerCheck('place-items', [alignItemsDataType, justifyItemsDataType]),
+            partOpener: splitSimpleShorthandOpener(['align-items', 'justify-items']),
+        },
+        {
+            prop: 'justify-items',
+            dataType: justifyItemsDataType,
+            beforeOpenerCheck: intersectionBeforeOpenerCheck('place-items', [alignItemsDataType, justifyItemsDataType]),
+        },
+    ] as ShorthandPart<V, PlaceItems>[];
+
+// place-items
+export const openPlaceItemsShorthand: GetSimpleShorthandOpener<PlaceItems> = <V>() =>
+    createShorthandOpener({
+        prop: 'place-items',
+        parts: getPlaceItemsShorthandParts(),
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, PlaceItems>;
+
+export const closePlaceItemsShorthand: GetShorthandCloser<PlaceItems> = <V>() =>
+    createShorthandCloser<V, PlaceItems>(createShorthandCloserTemplateFromParts(getPlaceItemsShorthandParts()));

package/src/shorthands/openers/text-decoration-shorthand.ts

@@ -0,0 +1,27 @@
+import type { TextDecorations } from '../shorthand-css-data.js';
+import type { SimpleShorthandOpener, GetSimpleShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import { colorDataType, textDecorationLineDataType, textDecorationStyleDataType } from '../../css-data-types/index.js';
+import {
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+// text-decoration
+export const openTextDecorationShorthand: GetSimpleShorthandOpener<TextDecorations> = <V>() =>
+    createShorthandOpener({
+        prop: 'text-decoration',
+        parts: [
+            { prop: 'text-decoration-color', dataType: colorDataType },
+            { prop: 'text-decoration-line', dataType: textDecorationLineDataType },
+            { prop: 'text-decoration-style', dataType: textDecorationStyleDataType },
+        ],
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, TextDecorations>;
+
+export const closeTextDecorationShorthand: GetShorthandCloser<TextDecorations> = <V>() =>
+    createShorthandCloser<V, TextDecorations>(
+        shorthandCloserTemplate<TextDecorations>`${'text-decoration-color'} ${'text-decoration-line'} ${'text-decoration-style'}`,
+    );

package/src/shorthands/shorthand-css-data.ts

@@ -0,0 +1,210 @@
+import type { EvaluatedAst } from './shorthand-types.js';
+import {
+    INITIAL_FLEX_GROW,
+    AUTO_FLEX_GROW,
+    INITIAL_FLEX_SHRINK,
+    NONE_FLEX_SHRINK,
+    AUTO_FLEX_BASIS,
+    INITIAL_GRID_TEMPLATE_AREAS,
+    INITIAL_GRID_TEMPLATE_AXIS,
+    INITIAL_GRID_AUTO_FLOW,
+    INITIAL_GRID_AUTO_AXIS,
+} from '../css-data-types/index.js';
+
+export type Margins = 'margin-top' | 'margin-right' | 'margin-bottom' | 'margin-left';
+
+export type Paddings = 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left';
+
+export type BorderRadiuses =
+    | 'border-top-left-radius'
+    | 'border-top-right-radius'
+    | 'border-bottom-right-radius'
+    | 'border-bottom-left-radius';
+export type OpenedBorderRadiusShorthand<V> = Array<Record<BorderRadiuses, EvaluatedAst<V>>>;
+
+export type BorderStyles = 'border-top-style' | 'border-right-style' | 'border-bottom-style' | 'border-left-style';
+export type BorderWidths = 'border-top-width' | 'border-right-width' | 'border-bottom-width' | 'border-left-width';
+export type BorderColors = 'border-top-color' | 'border-right-color' | 'border-bottom-color' | 'border-left-color';
+export type BordersShallow = 'border-style' | 'border-width' | 'border-color';
+export type Borders = BorderStyles | BorderWidths | BorderColors;
+export type BordersTop = 'border-top-style' | 'border-top-width' | 'border-top-color';
+export type BordersRight = 'border-right-style' | 'border-right-width' | 'border-right-color';
+export type BordersBottom = 'border-bottom-style' | 'border-bottom-width' | 'border-bottom-color';
+export type BordersLeft = 'border-left-style' | 'border-left-width' | 'border-left-color';
+
+export type Outlines = 'outline-style' | 'outline-width' | 'outline-color';
+
+export type BorderImages =
+    | 'border-image-source'
+    | 'border-image-slice'
+    | 'border-image-width'
+    | 'border-image-outset'
+    | 'border-image-repeat';
+export type OpenedBorderImageShorthand<V> = {
+    'border-image-source': EvaluatedAst<V>;
+    'border-image-slice': EvaluatedAst<V>[];
+    'border-image-width': EvaluatedAst<V>[];
+    'border-image-outset': EvaluatedAst<V>[];
+    'border-image-repeat': EvaluatedAst<V>[];
+};
+
+export type Backgrounds =
+    | 'background-attachment'
+    | 'background-clip'
+    | 'background-color'
+    | 'background-image'
+    | 'background-origin'
+    | 'background-position'
+    | 'background-repeat'
+    | 'background-size';
+export type BackgroundLayer<V> = {
+    'background-attachment': EvaluatedAst<V>;
+    'background-clip': EvaluatedAst<V>;
+    'background-image': EvaluatedAst<V>;
+    'background-origin': EvaluatedAst<V>;
+    'background-position': EvaluatedAst<V>[];
+    'background-repeat': EvaluatedAst<V>[];
+    'background-size': EvaluatedAst<V>[];
+};
+export interface OpenedBackgroundShorthand<V> {
+    layers: BackgroundLayer<V>[];
+    color: EvaluatedAst<V>;
+}
+
+export type BackgroundPositionLonghand = 'background-position-x' | 'background-position-y';
+
+export interface OpenedBackgroundPositionShorthand<V> {
+    'background-position-x': EvaluatedAst<V>[];
+    'background-position-y': EvaluatedAst<V>[];
+}
+
+export type FontPrefixes = 'font-style' | 'font-variant' | 'font-weight' | 'font-stretch';
+export type FontSuffixes = 'font-size' | 'line-height' | 'font-family';
+export type Fonts = FontPrefixes | FontSuffixes | 'font';
+export type OpenedFontShorthand<V> = {
+    'font-style': EvaluatedAst<V>[];
+    'font-variant': EvaluatedAst<V>;
+    'font-weight': EvaluatedAst<V>;
+    'font-stretch': EvaluatedAst<V>;
+    'font-size': EvaluatedAst<V>;
+    'line-height': EvaluatedAst<V>;
+    'font-family': EvaluatedAst<V>[];
+    font: EvaluatedAst<V>;
+};
+
+export type PlaceContents = 'align-content' | 'justify-content';
+export type PlaceItems = 'align-items' | 'justify-items';
+
+export type Flexes = 'flex-grow' | 'flex-shrink' | 'flex-basis';
+
+export type FlexFlows = 'flex-direction' | 'flex-wrap';
+
+export type Gaps = 'row-gap' | 'column-gap';
+export type GridGaps = 'grid-row-gap' | 'grid-column-gap';
+export type GridRows = 'grid-row-start' | 'grid-row-end';
+export type GridColumns = 'grid-column-start' | 'grid-column-end';
+export type GridAxis = 'row' | 'column';
+export type GridAxisLonghands<A extends GridAxis> = A extends 'row' ? GridRows : GridColumns;
+
+export type GridTemplates = 'grid-template-areas' | 'grid-template-rows' | 'grid-template-columns';
+export type Grids = GridTemplates | 'grid-auto-flow' | 'grid-auto-rows' | 'grid-auto-columns';
+
+export type Overflows = 'overflow-x' | 'overflow-y';
+
+export type TextDecorations = 'text-decoration-color' | 'text-decoration-line' | 'text-decoration-style';
+
+export type ListStyles = 'list-style-type' | 'list-style-image' | 'list-style-position';
+
+export type ShorthandsTypeMap = {
+    background: Backgrounds;
+    'background-position': BackgroundPositionLonghand;
+    'border-radius': BorderRadiuses;
+    border: Borders;
+    'border-top': BordersTop;
+    'border-right': BordersRight;
+    'border-bottom': BordersBottom;
+    'border-left': BordersLeft;
+    'border-style': BorderStyles;
+    'border-width': BorderWidths;
+    'border-color': BorderColors;
+    outline: Outlines;
+    'border-image': BorderImages;
+    font: Fonts;
+    'place-content': PlaceContents;
+    'place-items': PlaceItems;
+    flex: Flexes;
+    'flex-flow': FlexFlows;
+    gap: Gaps;
+    'grid-gap': GridGaps;
+    'grid-row': GridRows;
+    'grid-column': GridColumns;
+    'grid-template': GridTemplates;
+    grid: Grids;
+    margin: Margins;
+    padding: Paddings;
+    overflow: Overflows;
+    'text-decoration': TextDecorations;
+    'list-style': ListStyles;
+};
+
+export type ShorthandsSpecialReturnTypeMap<V> = {
+    background: OpenedBackgroundShorthand<V>;
+    'background-position': OpenedBackgroundPositionShorthand<V>;
+    'border-radius': OpenedBorderRadiusShorthand<V>;
+    font: OpenedFontShorthand<V>;
+    'border-image': OpenedBorderImageShorthand<V>;
+};
+
+export type CssEdge = 'top' | 'right' | 'bottom' | 'left';
+export type CssCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export const CSS_PROPERTY_DELIMITER = '-';
+export const EDGE_SHORTHAND_EDGES = ['top', 'right', 'bottom', 'left'] as const satisfies CssEdge[];
+export const CORNER_SHORTHAND_CORNERS = [
+    'top-left',
+    'top-right',
+    'bottom-right',
+    'bottom-left',
+] as const satisfies CssCorner[];
+export const EDGE_SHORTHAND_INDICES_BY_LENGTH = [
+    [0, 0, 0, 0],
+    [0, 1, 0, 1],
+    [0, 1, 2, 1],
+    [0, 1, 2, 3],
+] as const satisfies number[][];
+
+export type FlexKeyword = 'initial' | 'auto' | 'none';
+export const FLEX_KEYWORD_VALUE_MAP: Record<FlexKeyword, Record<Flexes, string>> = {
+    initial: {
+        'flex-grow': INITIAL_FLEX_GROW,
+        'flex-shrink': INITIAL_FLEX_SHRINK,
+        'flex-basis': AUTO_FLEX_BASIS,
+    },
+    auto: {
+        'flex-grow': AUTO_FLEX_GROW,
+        'flex-shrink': INITIAL_FLEX_SHRINK,
+        'flex-basis': AUTO_FLEX_BASIS,
+    },
+    none: {
+        'flex-grow': INITIAL_FLEX_GROW,
+        'flex-shrink': NONE_FLEX_SHRINK,
+        'flex-basis': AUTO_FLEX_BASIS,
+    },
+};
+
+export type GridKeyword = 'none';
+export const GRID_TEMPLATE_KEYWORD_VALUE_MAP: Record<GridKeyword, Record<GridTemplates, string>> = {
+    none: {
+        'grid-template-areas': INITIAL_GRID_TEMPLATE_AREAS,
+        'grid-template-rows': INITIAL_GRID_TEMPLATE_AXIS,
+        'grid-template-columns': INITIAL_GRID_TEMPLATE_AXIS,
+    },
+};
+
+export const GRID_KEYWORD_VALUE_MAP: Record<GridKeyword, Record<Grids, string>> = {
+    none: {
+        ...GRID_TEMPLATE_KEYWORD_VALUE_MAP.none,
+        'grid-auto-flow': INITIAL_GRID_AUTO_FLOW,
+        'grid-auto-rows': INITIAL_GRID_AUTO_AXIS,
+        'grid-auto-columns': INITIAL_GRID_AUTO_AXIS,
+    },
+};