@dazl/shorthands-opener 4.2.0

package/src/shorthands/openers/flex-flow-shorthand.ts

@@ -0,0 +1,24 @@
+import type { FlexFlows } from '../shorthand-css-data.js';
+import type { SimpleShorthandOpener, GetSimpleShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import { flexDirectionDataType, flexWrapDataType } from '../../css-data-types/index.js';
+import {
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+// flex-flow
+export const openFlexFlowShorthand: GetSimpleShorthandOpener<FlexFlows> = <V>() =>
+    createShorthandOpener({
+        prop: 'flex-flow',
+        parts: [
+            { prop: 'flex-direction', dataType: flexDirectionDataType },
+            { prop: 'flex-wrap', dataType: flexWrapDataType },
+        ],
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, FlexFlows>;
+
+export const closeFlexFlowShorthand: GetShorthandCloser<FlexFlows> = <V>() =>
+    createShorthandCloser<V, FlexFlows>(shorthandCloserTemplate<FlexFlows>`${'flex-direction'} ${'flex-wrap'}`);

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

@@ -0,0 +1,79 @@
+import type {
+    OpenedShorthand,
+    SimpleShorthandOpener,
+    SimpleShorthandOpenerInner,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { type Flexes, FLEX_KEYWORD_VALUE_MAP } from '../shorthand-css-data.js';
+import {
+    flexSingleValueDataType,
+    flexGrowDataType,
+    flexShrinkDataType,
+    flexBasisDataType,
+} from '../../css-data-types/index.js';
+import {
+    matchDataType,
+    singleKeywordShorthandOpener,
+    createShorthandOpener,
+    createShorthandCloserTemplateFromParts,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+import { NoMandatoryPartMatchError } from '../shorthand-parser-errors.js';
+
+const getFlexShorthandParts = <V>() =>
+    [
+        { prop: 'flex-grow', dataType: flexGrowDataType, mandatory: true },
+        { prop: 'flex-shrink', dataType: flexShrinkDataType },
+        { prop: 'flex-basis', dataType: flexBasisDataType },
+    ] as ShorthandPart<V, Flexes>[];
+
+// flex
+export const openFlexShorthand: GetSimpleShorthandOpener<Flexes> = <V>() =>
+    createShorthandOpener({
+        prop: 'flex',
+        singleKeywordPart: {
+            prop: 'flex',
+            dataType: flexSingleValueDataType,
+            partOpener: singleKeywordShorthandOpener(FLEX_KEYWORD_VALUE_MAP) as SimpleShorthandOpenerInner<V, Flexes>,
+        },
+        parts: getFlexShorthandParts(),
+        shorthandOpener: (astNodes) => {
+            const opened: OpenedShorthand<V> = {};
+
+            if (matchDataType(flexGrowDataType, astNodes, 0)) {
+                opened['flex-grow'] = astNodes[0]!;
+
+                if (astNodes.length > 1) {
+                    if (matchDataType(flexShrinkDataType, astNodes, 1)) {
+                        opened['flex-shrink'] = astNodes[1]!;
+
+                        if (astNodes.length > 2) {
+                            if (matchDataType(flexBasisDataType, astNodes, 2)) {
+                                opened['flex-basis'] = astNodes[2]!;
+                            } else {
+                                throw new NoMandatoryPartMatchError('flex', 'flex-basis');
+                            }
+                        }
+                    } else if (matchDataType(flexBasisDataType, astNodes, 1)) {
+                        if (astNodes.length < 3) {
+                            opened['flex-basis'] = astNodes[1]!;
+                        } else {
+                            throw new NoMandatoryPartMatchError('flex', 'flex-shrink');
+                        }
+                    } else {
+                        throw new NoMandatoryPartMatchError('flex', `${'flex-shrink'}, ${'flex-basis'}`);
+                    }
+                }
+            } else {
+                throw new NoMandatoryPartMatchError('flex', 'flex-grow');
+            }
+
+            return opened;
+        },
+    }) as SimpleShorthandOpener<V, Flexes>;
+
+export const closeFlexShorthand: GetShorthandCloser<Flexes> = <V>() =>
+    createShorthandCloser<V, Flexes>(createShorthandCloserTemplateFromParts(getFlexShorthandParts()));

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

@@ -0,0 +1,85 @@
+import type { FontPrefixes, FontSuffixes, Fonts, OpenedFontShorthand } from '../shorthand-css-data.js';
+import type { OpenedShorthand, ShorthandOpener, ShorthandPart } from '../shorthand-types.js';
+
+import {
+    fontSingleValueDataType,
+    fontStyleDataType,
+    fontVariantDataType,
+    fontWeightDataType,
+    fontStretchDataType,
+    fontSizeDataType,
+    lineHeightDataType,
+    fontFamilyDataType,
+    COMMON_FONT_PREFIX_NORMAL,
+} from '../../css-data-types/index.js';
+import {
+    matchDataType,
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+import { NoMandatoryPartMatchError } from '../shorthand-parser-errors.js';
+
+// TODO: Though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values.
+// font
+export const openFontShorthand = <V>(): ShorthandOpener<V, Fonts, OpenedFontShorthand<V>> => {
+    const fontPrefixShorthandParts: ShorthandPart<V>[] = [
+        { prop: 'font-style', dataType: fontStyleDataType, multipleItems: true },
+        { prop: 'font-variant', dataType: fontVariantDataType },
+        { prop: 'font-weight', dataType: fontWeightDataType },
+        { prop: 'font-stretch', dataType: fontStretchDataType },
+    ];
+    const fontSizeShorthandPart: ShorthandPart<V> = {
+        prop: 'font-size',
+        dataType: fontSizeDataType,
+        mandatory: true,
+    };
+    const fontSuffixShorthandParts: ShorthandPart<V>[] = [
+        fontSizeShorthandPart,
+        { prop: 'line-height', dataType: lineHeightDataType },
+        {
+            prop: 'font-family',
+            dataType: fontFamilyDataType,
+            multipleItems: true,
+            mandatory: true,
+        },
+    ];
+    const openFontShorthandPrefixInner = unorderedListShorthandOpener<V, FontPrefixes>(fontPrefixShorthandParts, {
+        commonValue: COMMON_FONT_PREFIX_NORMAL,
+    });
+    const openFontShorthandSuffixInner = unorderedListShorthandOpener<V, FontSuffixes>(fontSuffixShorthandParts);
+
+    return createShorthandOpener({
+        prop: 'font',
+        singleKeywordPart: { prop: 'font', dataType: fontSingleValueDataType },
+        parts: fontPrefixShorthandParts.concat(fontSuffixShorthandParts) as ShorthandPart<V, Fonts>[],
+        shorthandOpener: (astNodes, api) => {
+            let opened: OpenedShorthand<V> = {};
+
+            const prefixEndPart = fontSizeShorthandPart;
+            let prefixEndIndex = -1;
+            for (let i = 0; i < astNodes.length; i++) {
+                if (matchDataType(prefixEndPart.dataType, astNodes, i)) {
+                    prefixEndIndex = i;
+                    break;
+                }
+            }
+            if (prefixEndIndex !== -1) {
+                opened = {
+                    ...openFontShorthandPrefixInner(astNodes.slice(0, prefixEndIndex), api),
+                    ...openFontShorthandSuffixInner(astNodes.slice(prefixEndIndex), api),
+                };
+            } else {
+                throw new NoMandatoryPartMatchError('font', prefixEndPart.prop);
+            }
+
+            return opened;
+        },
+    }) as ShorthandOpener<V, Fonts, OpenedFontShorthand<V>>;
+};
+
+export const closeFontShorthand = <V>() =>
+    createShorthandCloser<V, Fonts, OpenedFontShorthand<V>>(
+        shorthandCloserTemplate<Fonts>`${'font-style'} ${'font-variant'} ${'font-weight'} ${'font-stretch'} ${'font-size'} / ${'line-height'} ${'font-family'}`,
+    );

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

@@ -0,0 +1,47 @@
+import type { Gaps } from '../shorthand-css-data.js';
+import type {
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+    EvaluatedAst,
+    OpenedShorthand,
+} from '../shorthand-types.js';
+
+import { lengthPercentageDataType } from '../../css-data-types/index.js';
+import {
+    createShorthandOpener,
+    createShorthandCloserTemplateFromParts,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+const getGapShorthandParts = <V>() =>
+    [
+        {
+            prop: 'row-gap',
+            dataType: lengthPercentageDataType,
+        },
+        {
+            prop: 'column-gap',
+            dataType: lengthPercentageDataType,
+        },
+    ] as ShorthandPart<V, Gaps>[];
+
+function gapOpener<V>(nodes: EvaluatedAst<V>[]): OpenedShorthand<V, 'row-gap' | 'column-gap'> {
+    if (nodes.length === 0 || nodes.length > 2) throw new Error('gap shorthand can only have 1 or 2 values');
+    return {
+        'row-gap': nodes[0]!,
+        'column-gap': nodes[1] ?? nodes[0]!,
+    };
+}
+
+// gap
+export const openGapShorthand: GetSimpleShorthandOpener<Gaps> = <V>() =>
+    createShorthandOpener({
+        prop: 'gap',
+        parts: getGapShorthandParts(),
+        shorthandOpener: gapOpener,
+    }) as SimpleShorthandOpener<V, Gaps>;
+
+export const closeGapShorthand: GetShorthandCloser<Gaps> = <V>() =>
+    createShorthandCloser<V, Gaps>(createShorthandCloserTemplateFromParts(getGapShorthandParts()));

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

@@ -0,0 +1,61 @@
+import type { GridAxis, GridAxisLonghands } from '../shorthand-css-data.js';
+import { gridLineDataType, gridLineEndDataType } from '../../css-data-types/index.js';
+import type {
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+    EvaluatedAst,
+    OpenedShorthand,
+} from '../shorthand-types.js';
+import { createShorthandOpener, createShorthandCloser, shorthandCloserTemplate } from '../shorthand-parser-utils.js';
+
+const getGridAxisShorthandParts = <V, A extends GridAxis>(axis: A) =>
+    [
+        {
+            prop: `grid-${axis}-start`,
+            dataType: gridLineDataType,
+            multipleItems: true,
+        },
+        {
+            prop: `grid-${axis}-end`,
+            dataType: gridLineEndDataType,
+            multipleItems: true,
+        },
+    ] as ShorthandPart<V, GridAxisLonghands<A>>[];
+
+function openGridAxisShorthand<Axis extends 'row' | 'column', V>(
+    axis: Axis,
+    valueAst: EvaluatedAst<V>[],
+): OpenedShorthand<V, GridAxisLonghands<Axis>> {
+    const delimiterIndex = valueAst.findIndex((node) => node.value.type === '/');
+    const startNodes = delimiterIndex === -1 ? valueAst : valueAst.slice(0, delimiterIndex);
+    const endNodes = delimiterIndex === -1 ? [...startNodes] : valueAst.slice(delimiterIndex + 1);
+
+    return {
+        [`grid-${axis}-start`]: startNodes,
+        [`grid-${axis}-end`]: endNodes,
+    } as OpenedShorthand<V, GridAxisLonghands<Axis>>;
+}
+
+const createGridAxisShorthandOpener: <A extends GridAxis>(axis: A) => GetSimpleShorthandOpener<GridAxisLonghands<A>> =
+    (axis) =>
+    <V>() =>
+        createShorthandOpener({
+            prop: `grid-${axis}`,
+            parts: getGridAxisShorthandParts(axis),
+            shorthandOpener: (astNodes) => openGridAxisShorthand(axis, astNodes),
+        }) as SimpleShorthandOpener<V>;
+
+const createGridAxisShorthandCloser: <A extends GridAxis>(axis: A) => GetShorthandCloser<GridAxisLonghands<A>> =
+    (axis) =>
+    <V>() =>
+        createShorthandCloser<V>(shorthandCloserTemplate`${`grid-${axis}-start`} / ${`grid-${axis}-end`}`);
+
+// grid-row
+export const openGridRowShorthand = createGridAxisShorthandOpener('row');
+export const closeGridRowShorthand = createGridAxisShorthandCloser('row');
+
+// grid-column
+export const openGridColumnShorthand = createGridAxisShorthandOpener('column');
+export const closeGridColumnShorthand = createGridAxisShorthandCloser('column');

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

@@ -0,0 +1,40 @@
+import type { GridGaps } from '../shorthand-css-data.js';
+import type {
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { lengthPercentageDataType } from '../../css-data-types/index.js';
+import {
+    splitSimpleShorthandOpener,
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    createShorthandCloserTemplateFromParts,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+const getGridGapShorthandParts = <V>() =>
+    [
+        {
+            prop: 'grid-row-gap',
+            dataType: lengthPercentageDataType,
+            partOpener: splitSimpleShorthandOpener(['grid-row-gap', 'grid-column-gap']),
+        },
+        {
+            prop: 'grid-column-gap',
+            dataType: lengthPercentageDataType,
+        },
+    ] as ShorthandPart<V, GridGaps>[];
+
+// grid-gap
+export const openGridGapShorthand: GetSimpleShorthandOpener<GridGaps> = <V>() =>
+    createShorthandOpener({
+        prop: 'grid-gap',
+        parts: getGridGapShorthandParts(),
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as SimpleShorthandOpener<V, GridGaps>;
+
+export const closeGridGapShorthand: GetShorthandCloser<GridGaps> = <V>() =>
+    createShorthandCloser<V, GridGaps>(createShorthandCloserTemplateFromParts(getGridGapShorthandParts()));

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

@@ -0,0 +1,260 @@
+import type {
+    CSSAstNode,
+    EvaluatedAst,
+    OpenedShorthand,
+    SimpleShorthandOpener,
+    SimpleShorthandOpenerInner,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    ShorthandCloser,
+} from '../shorthand-types.js';
+
+import { type SlashNode, createCssValueAST, valueTextNode } from '../../tokenizers/index.js';
+import { codeToEvaluatedAst } from '../shorthands-ast-evaluation.js';
+import { type GridAxis, type Grids, GRID_KEYWORD_VALUE_MAP } from '../shorthand-css-data.js';
+import {
+    DataTypeType,
+    type PredicateIndexMatch,
+    asteriskPredicate,
+    findPredicateIndexMatch,
+    seperatorPredicate,
+    trackSizePredicate,
+    gridAutoFlowPredicate,
+    gridTemplateAreasDataType,
+    gridTemplateRowsDataType,
+    gridTemplateColumnsDataType,
+    gridAutoFlowDataType,
+    gridAutoRowsDataType,
+    gridAutoColumnsDataType,
+    gridSingleValueDataType,
+    GRID_AUTO_FLOW_KEYWORD,
+    GRID_AUTO_FLOW_ROW_KEYWORD,
+    GRID_AUTO_FLOW_COLUMN_KEYWORD,
+    GRID_AUTO_FLOW_DENSE_KEYWORD,
+} from '../../css-data-types/index.js';
+import {
+    matchDataType,
+    isOpenedInitial,
+    singleKeywordShorthandOpener,
+    createShorthandOpener,
+    getOpenedNode,
+    fixAstNodesPositions,
+} from '../shorthand-parser-utils.js';
+import {
+    getGridTemplateShorthandParts,
+    gridTemplateShorthandOpener,
+    closeGridTemplateShorthand,
+} from './grid-template-shorthand.js';
+import { NoMandatoryPartMatchError, CannotCloseGridError } from '../shorthand-parser-errors.js';
+
+interface AutoFlow {
+    axis: GridAxis;
+    dense: boolean;
+}
+
+type OpenedGrids<V> = OpenedShorthand<V, Grids>;
+type GridSingleKeywordShorthandOpener<V> = SimpleShorthandOpenerInner<V, Grids>;
+type GridShorthandCloser<V> = ShorthandCloser<V, Grids, OpenedGrids<V>>;
+
+const getGridShorthandParts = <V>() =>
+    [
+        ...getGridTemplateShorthandParts<V>(),
+        { prop: 'grid-auto-flow', dataType: gridAutoFlowDataType, multipleItems: true },
+        { prop: 'grid-auto-rows', dataType: gridAutoRowsDataType, multipleItems: true },
+        { prop: 'grid-auto-columns', dataType: gridAutoColumnsDataType, multipleItems: true },
+    ] as ShorthandPart<V, Grids>[];
+
+const isSeperator = <V>(astNodes: EvaluatedAst<V>[], index: number) => seperatorPredicate()(astNodes[index]!.value);
+
+const getTrackSizeLength = <V>(astNodes: EvaluatedAst<V>[], index: number) =>
+    astNodes.length > index
+        ? Number(asteriskPredicate(trackSizePredicate)(astNodes[index]!.value, index, astNodes))
+        : 0;
+
+const getAutoFlowText = (axis: GridAxis, dense = false) =>
+    (axis === 'row' ? GRID_AUTO_FLOW_ROW_KEYWORD : GRID_AUTO_FLOW_COLUMN_KEYWORD) +
+    (dense ? ` ${GRID_AUTO_FLOW_DENSE_KEYWORD}` : '');
+
+const openGridShorthandAutoFlow = <V>(
+    axis: GridAxis,
+    astNodes: EvaluatedAst<V>[],
+    autoFlowMatch: PredicateIndexMatch,
+    trackSizeLength: number,
+    rowsLength?: number,
+) => {
+    const { index: autoFlowIndex, length: autoFlowLength } = autoFlowMatch;
+
+    const opened: Partial<OpenedGrids<V>> = {};
+    if (axis === 'row') {
+        opened['grid-template-columns'] = astNodes.slice(autoFlowLength + trackSizeLength + 1);
+        if (trackSizeLength > 0) {
+            opened['grid-auto-rows'] = astNodes.slice(autoFlowLength, autoFlowLength + trackSizeLength);
+        }
+    } else {
+        opened['grid-template-rows'] = astNodes.slice(0, rowsLength);
+        if (trackSizeLength > 0) {
+            opened['grid-auto-columns'] = astNodes.slice(autoFlowIndex + autoFlowLength);
+        }
+    }
+    opened['grid-auto-flow'] = codeToEvaluatedAst(createCssValueAST(getAutoFlowText(axis, autoFlowLength === 2)));
+    return opened;
+};
+
+const openGridShorthandTemplateRowsSyntax = <V>(astNodes: EvaluatedAst<V>[], autoFlowMatch: PredicateIndexMatch) => {
+    const { index: autoFlowIndex, length: autoFlowLength } = autoFlowMatch;
+
+    if (autoFlowIndex <= 1 || !isSeperator(astNodes, autoFlowIndex - 1)) {
+        throw new NoMandatoryPartMatchError('grid', 'grid-auto-flow');
+    }
+
+    const rowsMatch = matchDataType(gridTemplateRowsDataType, astNodes, 0);
+    if (!rowsMatch || Number(rowsMatch) !== autoFlowIndex - 1) {
+        throw new NoMandatoryPartMatchError('grid', 'grid-template-rows');
+    }
+
+    const trackSizeLength = getTrackSizeLength(astNodes, autoFlowIndex + autoFlowLength);
+    if (trackSizeLength !== astNodes.length - autoFlowIndex - autoFlowLength) {
+        throw new NoMandatoryPartMatchError('grid', 'grid-auto-flow');
+    }
+
+    return openGridShorthandAutoFlow('column', astNodes, autoFlowMatch, trackSizeLength, Number(rowsMatch));
+};
+
+const openGridShorthandTemplateColumnsSyntax = <V>(astNodes: EvaluatedAst<V>[], autoFlowMatch: PredicateIndexMatch) => {
+    const { length: autoFlowLength } = autoFlowMatch;
+
+    const trackSizeLength = getTrackSizeLength(astNodes, autoFlowLength);
+    if (!isSeperator(astNodes, autoFlowLength + trackSizeLength)) {
+        throw new NoMandatoryPartMatchError('grid', 'grid-auto-flow');
+    }
+
+    const columnsMatch = matchDataType(
+        gridTemplateColumnsDataType,
+        astNodes,
+        autoFlowLength + trackSizeLength,
+        DataTypeType.GridTemplateRows,
+    );
+    if (!columnsMatch || Number(columnsMatch) !== astNodes.length - autoFlowLength - trackSizeLength) {
+        throw new NoMandatoryPartMatchError('grid', 'grid-template-columns');
+    }
+
+    return openGridShorthandAutoFlow('row', astNodes, autoFlowMatch, trackSizeLength);
+};
+
+// grid
+export const openGridShorthand: GetSimpleShorthandOpener<Grids> = <V>() =>
+    createShorthandOpener({
+        prop: 'grid',
+        singleKeywordPart: {
+            prop: 'grid',
+            dataType: gridSingleValueDataType,
+            partOpener: singleKeywordShorthandOpener(
+                GRID_KEYWORD_VALUE_MAP,
+                true,
+            ) as GridSingleKeywordShorthandOpener<V>,
+        },
+        parts: getGridShorthandParts(),
+        shorthandOpener: (astNodes) => {
+            const autoFlowMatch = findPredicateIndexMatch(astNodes, gridAutoFlowPredicate);
+
+            return (
+                autoFlowMatch
+                    ? autoFlowMatch.index > 0
+                        ? openGridShorthandTemplateRowsSyntax(astNodes, autoFlowMatch)
+                        : openGridShorthandTemplateColumnsSyntax(astNodes, autoFlowMatch)
+                    : gridTemplateShorthandOpener<V>(astNodes)
+            ) as OpenedGrids<V>;
+        },
+    }) as SimpleShorthandOpener<V, Grids>;
+
+const getParsedOpenedAutoFlow = <V>(opened: OpenedGrids<V>): AutoFlow => {
+    const openedAutoFlow = opened['grid-auto-flow'];
+    const openedAutoArray = Array.isArray(openedAutoFlow) ? openedAutoFlow : [openedAutoFlow];
+    if (!isOpenedInitial(opened, 'grid-template-areas', gridTemplateAreasDataType) || openedAutoArray.length < 1) {
+        throw new CannotCloseGridError();
+    }
+
+    const parsedAutoFlow = openedAutoArray.reduce((autoFlow, { value }) => {
+        switch (value.text) {
+            case GRID_AUTO_FLOW_ROW_KEYWORD:
+                if (autoFlow.axis === undefined) {
+                    autoFlow.axis = 'row';
+                    return autoFlow;
+                }
+                break;
+            case GRID_AUTO_FLOW_COLUMN_KEYWORD:
+                if (autoFlow.axis === undefined) {
+                    autoFlow.axis = 'column';
+                    return autoFlow;
+                }
+                break;
+            case GRID_AUTO_FLOW_DENSE_KEYWORD:
+                if (autoFlow.dense === undefined) {
+                    autoFlow.dense = true;
+                    return autoFlow;
+                }
+                break;
+        }
+        throw new CannotCloseGridError();
+    }, {} as Partial<AutoFlow>);
+    if (parsedAutoFlow.axis === undefined && parsedAutoFlow.dense === undefined) {
+        throw new CannotCloseGridError();
+    }
+
+    return { axis: parsedAutoFlow.axis ?? 'row', dense: !!parsedAutoFlow.dense };
+};
+
+const closeGridShorthandAutoFlowSyntax =
+    <V>(autoFlow: AutoFlow, isAutoRowsInitial: boolean, isAutoColumnsInitial: boolean): GridShorthandCloser<V> =>
+    (opened, api, detachExpression) => {
+        const { axis, dense } = autoFlow;
+
+        if (
+            (axis === 'row' &&
+                (!isOpenedInitial(opened, 'grid-template-rows', gridTemplateRowsDataType) || !isAutoColumnsInitial)) ||
+            (axis === 'column' &&
+                (!isOpenedInitial(opened, 'grid-template-columns', gridTemplateColumnsDataType) || !isAutoRowsInitial))
+        ) {
+            throw new CannotCloseGridError();
+        }
+
+        return [valueTextNode(GRID_AUTO_FLOW_KEYWORD) as CSSAstNode<V>]
+            .concat(dense ? [valueTextNode(GRID_AUTO_FLOW_DENSE_KEYWORD)] : [])
+            .concat(
+                getOpenedNode(opened[axis === 'row' ? 'grid-auto-rows' : 'grid-auto-columns'], api, detachExpression),
+            );
+    };
+
+export const closeGridShorthand =
+    <V>(): GridShorthandCloser<V> =>
+    (opened, api, detachExpression) => {
+        const isAutoRowsInitial = isOpenedInitial(opened, 'grid-auto-rows', gridAutoRowsDataType);
+        const isAutoColumnsInitial = isOpenedInitial(opened, 'grid-auto-columns', gridAutoColumnsDataType);
+        if (
+            isOpenedInitial(opened, 'grid-auto-flow', gridAutoFlowDataType) &&
+            isAutoRowsInitial &&
+            isAutoColumnsInitial
+        ) {
+            return closeGridTemplateShorthand<V>()(opened, api, detachExpression);
+        }
+
+        const autoFlow = getParsedOpenedAutoFlow(opened);
+
+        const closedAutoFlowAst = closeGridShorthandAutoFlowSyntax<V>(
+            autoFlow,
+            isAutoRowsInitial,
+            isAutoColumnsInitial,
+        )(opened, api, detachExpression);
+        const closedTemplateAxisAst = getOpenedNode(
+            opened[autoFlow.axis === 'row' ? 'grid-template-columns' : 'grid-template-rows'],
+            api,
+            detachExpression,
+        );
+        const slashNode = { ...valueTextNode('/'), type: '/' } as SlashNode;
+        return fixAstNodesPositions(
+            autoFlow.axis === 'row'
+                ? closedAutoFlowAst.concat(slashNode).concat(closedTemplateAxisAst)
+                : closedTemplateAxisAst.concat(slashNode).concat(closedAutoFlowAst),
+            api,
+        );
+    };