@dazl/shorthands-opener 4.2.0

package/src/shorthands/index.ts

@@ -0,0 +1,7 @@
+export * from './shorthand-css-data.js';
+export * from './shorthand-types.js';
+export * from './shorthand-parser-errors.js';
+export * from './shorthands-ast-evaluation.js';
+export * from './shorthand-parser-utils.js';
+export * from './shorthand-mapper.js';
+export * from './openers/index.js';

package/src/shorthands/openers/background-position-shorthand.ts

@@ -0,0 +1,180 @@
+import type { EvaluatedAst, ShorthandCloser, ShorthandOpener } from '../shorthand-types.js';
+import {
+    BG_POSITION_CENTER_KEYWORD,
+    BG_POSITION_HORIZONTAL_KEYWORDS_MAP,
+    BG_POSITION_VERTICAL_KEYWORDS_MAP,
+    lengthPercentageDataType,
+    universalDataType,
+    unorderedListPredicate,
+} from '../../css-data-types/index.js';
+import { createCssValueAST } from '../../tokenizers/index.js';
+import { NoDataTypeMatchError } from '../shorthand-parser-errors.js';
+import { evaluateAst } from '../shorthands-ast-evaluation.js';
+import type { BackgroundPositionLonghand, OpenedBackgroundPositionShorthand } from '../shorthand-css-data.js';
+import { createShorthandCloser, shorthandCloserTemplate } from '../shorthand-parser-utils.js';
+
+const centerKeyword = unorderedListPredicate(BG_POSITION_CENTER_KEYWORD);
+const xKeyword = unorderedListPredicate(BG_POSITION_HORIZONTAL_KEYWORDS_MAP);
+const yKeyword = unorderedListPredicate(BG_POSITION_VERTICAL_KEYWORDS_MAP);
+const lengthPercentageValue = lengthPercentageDataType.predicate;
+const universalValue = universalDataType.predicate;
+
+function backgroundPositionOpener<V>(nodes: EvaluatedAst<V>[]): OpenedBackgroundPositionShorthand<V> {
+    if (nodes.some((node) => node.value.type === ',')) {
+        throw new Error('background-position value with a single layer should be provided.');
+    }
+
+    // 1-value syntax
+    if (nodes.length === 1) {
+        const node = nodes[0]!;
+        if (centerKeyword(node.value) || universalValue(node.value)) {
+            return {
+                'background-position-x': [node],
+                'background-position-y': [node],
+            };
+        } else if (xKeyword(node.value) || lengthPercentageValue(node.value)) {
+            return {
+                'background-position-x': [node],
+                'background-position-y': [{ value: createCssValueAST('center')[0]!, isImplicit: true }],
+            };
+        } else if (yKeyword(node.value)) {
+            return {
+                'background-position-x': [{ value: createCssValueAST('center')[0]!, isImplicit: true }],
+                'background-position-y': [node],
+            };
+        } else {
+            throw new NoDataTypeMatchError(node.value.text);
+        }
+    }
+
+    // 2-value syntax
+    if (nodes.length === 2) {
+        const [node1, node2] = nodes as [EvaluatedAst<V>, EvaluatedAst<V>];
+        if (centerKeyword(node1.value)) {
+            if (centerKeyword(node2.value) || yKeyword(node2.value) || lengthPercentageValue(node2.value)) {
+                return {
+                    'background-position-x': [node1],
+                    'background-position-y': [node2],
+                };
+            } else if (xKeyword(node2.value)) {
+                return {
+                    'background-position-x': [node2],
+                    'background-position-y': [node1],
+                };
+            } else {
+                throw new NoDataTypeMatchError(node2.value.text);
+            }
+        } else if (xKeyword(node1.value) || lengthPercentageValue(node1.value)) {
+            if (centerKeyword(node2.value) || yKeyword(node2.value) || lengthPercentageValue(node2.value)) {
+                return {
+                    'background-position-x': [node1],
+                    'background-position-y': [node2],
+                };
+            } else {
+                throw new NoDataTypeMatchError(node2.value.text);
+            }
+        } else if (yKeyword(node1.value)) {
+            if (centerKeyword(node2.value) || xKeyword(node2.value) || lengthPercentageValue(node2.value)) {
+                return {
+                    'background-position-x': [node2],
+                    'background-position-y': [node1],
+                };
+            } else {
+                throw new NoDataTypeMatchError(node2.value.text);
+            }
+        } else {
+            throw new NoDataTypeMatchError(node1.value.text);
+        }
+    }
+
+    // 3-value syntax
+    if (nodes.length === 3) {
+        const [node1, node2, node3] = nodes as [EvaluatedAst<V>, EvaluatedAst<V>, EvaluatedAst<V>];
+        if (centerKeyword(node1.value)) {
+            if (xKeyword(node2.value) && lengthPercentageValue(node3.value)) {
+                return {
+                    'background-position-x': [node2, node3],
+                    'background-position-y': [node1],
+                };
+            } else if (yKeyword(node2.value) && lengthPercentageValue(node3.value)) {
+                return {
+                    'background-position-x': [node1],
+                    'background-position-y': [node2, node3],
+                };
+            } else {
+                throw new Error('Invalid data types of the second and third values.');
+            }
+        } else if (xKeyword(node1.value)) {
+            if (yKeyword(node2.value) && lengthPercentageValue(node3.value)) {
+                return {
+                    'background-position-x': [node1],
+                    'background-position-y': [node2, node3],
+                };
+            } else if (lengthPercentageValue(node2.value) && (yKeyword(node3.value) || centerKeyword(node3.value))) {
+                return {
+                    'background-position-x': [node1, node2],
+                    'background-position-y': [node3],
+                };
+            } else {
+                throw new Error('Invalid data types of the second and third values.');
+            }
+        } else if (yKeyword(node1.value)) {
+            if (xKeyword(node2.value) && lengthPercentageValue(node3.value)) {
+                return {
+                    'background-position-x': [node2, node3],
+                    'background-position-y': [node1],
+                };
+            } else if (lengthPercentageValue(node2.value) && (xKeyword(node3.value) || centerKeyword(node3.value))) {
+                return {
+                    'background-position-x': [node3],
+                    'background-position-y': [node1, node2],
+                };
+            } else {
+                throw new Error('Invalid data types of the second and third values.');
+            }
+        } else {
+            throw new NoDataTypeMatchError(node1.value.text);
+        }
+    }
+
+    // 4-value syntax
+    if (nodes.length === 4) {
+        const [node1, node2, node3, node4] = nodes as [
+            EvaluatedAst<V>,
+            EvaluatedAst<V>,
+            EvaluatedAst<V>,
+            EvaluatedAst<V>,
+        ];
+        if (!lengthPercentageValue(node2.value) || !lengthPercentageValue(node4.value)) {
+            throw new Error('The second and fourth values are not <length-percentage>.');
+        }
+        if (xKeyword(node1.value) && yKeyword(node3.value)) {
+            return {
+                'background-position-x': [node1, node2],
+                'background-position-y': [node3, node4],
+            };
+        } else if (yKeyword(node1.value) && xKeyword(node3.value)) {
+            return {
+                'background-position-x': [node3, node4],
+                'background-position-y': [node1, node2],
+            };
+        } else {
+            throw new Error('Invalid data types of the first and third values.');
+        }
+    }
+
+    throw new Error('Invalid shorthand syntax: 0 or more than 4 values.');
+}
+
+export const openBackgroundPositionShorthand =
+    <V>(): ShorthandOpener<V, BackgroundPositionLonghand, OpenedBackgroundPositionShorthand<V>> =>
+    (shortHand, api) => {
+        const astNodes = evaluateAst(shortHand, api);
+        return backgroundPositionOpener(astNodes);
+    };
+
+export const closeBackgroundPositionShorthand = <V>(): ShorthandCloser<
+    V,
+    BackgroundPositionLonghand,
+    OpenedBackgroundPositionShorthand<V>
+> => createShorthandCloser(shorthandCloserTemplate`${'background-position-x'} ${'background-position-y'}`);

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

@@ -0,0 +1,161 @@
+import type { Backgrounds, BackgroundLayer, OpenedBackgroundShorthand } from '../shorthand-css-data.js';
+import type {
+    CSSAstNode,
+    EvaluatedAst,
+    OpenedShorthand,
+    ShorthandOpener,
+    ShorthandPart,
+    ShorthandCloser,
+    OpenedShorthandValue,
+} from '../shorthand-types.js';
+
+import {
+    imageSourceDataType,
+    bgPositionDataType,
+    bgSizeDataType,
+    repeatStyleDataType,
+    attachmentDataType,
+    backgroundOriginDataType,
+    backgroundClipDataType,
+    backgroundColorDataType,
+} from '../../css-data-types/index.js';
+import { valueTextNode } from '../../tokenizers/index.js';
+import {
+    splitSimpleShorthandOpener,
+    unorderedListShorthandOpener,
+    getOpenedLayer,
+    layersShorthandOpener,
+    createShorthandOpener,
+    getOpenedNode,
+    shorthandCloserTemplate,
+    fixAstNodesPositions,
+} from '../shorthand-parser-utils.js';
+
+// background
+export const openBackgroundShorthand = <V>(): ShorthandOpener<V, Backgrounds, OpenedBackgroundShorthand<V>> => {
+    const bgLayerShorthandParts: ShorthandPart<V>[] = [
+        { prop: 'background-image', dataType: imageSourceDataType },
+        { prop: 'background-position', dataType: bgPositionDataType, multipleItems: true },
+        { prop: 'background-size', dataType: bgSizeDataType, multipleItems: true },
+        { prop: 'background-repeat', dataType: repeatStyleDataType, multipleItems: true },
+        { prop: 'background-attachment', dataType: attachmentDataType },
+        {
+            prop: 'background-origin',
+            dataType: backgroundOriginDataType,
+            partOpener: splitSimpleShorthandOpener(['background-origin', 'background-clip']),
+        },
+        { prop: 'background-clip', dataType: backgroundClipDataType },
+    ];
+    const lastBgLayerShorthandParts: ShorthandPart<V>[] = [
+        {
+            prop: 'background-color',
+            dataType: backgroundColorDataType,
+        },
+    ].concat(bgLayerShorthandParts);
+    const openBackgroundShorthandLayerInner = unorderedListShorthandOpener<V, Backgrounds>(bgLayerShorthandParts);
+    const openBackgroundShorthandLastLayerInner = unorderedListShorthandOpener<V, Backgrounds>(
+        lastBgLayerShorthandParts,
+    );
+
+    const backgroundShorthandOpener = createShorthandOpener({
+        prop: 'background',
+        parts: lastBgLayerShorthandParts as ShorthandPart<V, Backgrounds>[],
+        shorthandOpener: (astNodes, api) =>
+            layersShorthandOpener(
+                'background',
+                openBackgroundShorthandLayerInner,
+                bgLayerShorthandParts,
+                openBackgroundShorthandLastLayerInner,
+                lastBgLayerShorthandParts,
+            )(astNodes, api),
+    });
+
+    const multipleItemProps = bgLayerShorthandParts
+        .filter((part) => part.multipleItems)
+        .map((part) => part.prop as Backgrounds);
+
+    return (shortHand, api) => {
+        const openedShorthand = backgroundShorthandOpener(shortHand, api);
+
+        const layers: OpenedShorthand<V>[] = [];
+        let currLayer: OpenedShorthand<V> | undefined;
+        for (let i = 0; (currLayer = getOpenedLayer(openedShorthand, i, multipleItemProps)) !== undefined; i++) {
+            layers.push(currLayer);
+        }
+
+        const color = layers[0]!['background-color'] as EvaluatedAst<V>;
+        for (const layer of layers) {
+            delete layer['background-color'];
+        }
+
+        return {
+            layers: layers as BackgroundLayer<V>[],
+            color,
+        };
+    };
+};
+
+export const closeBackgroundShorthand =
+    <V>(): ShorthandCloser<V, Backgrounds, OpenedBackgroundShorthand<V>> =>
+    (opened, api, detachExpression) => {
+        const layerTemplate = shorthandCloserTemplate<
+            keyof BackgroundLayer<V>
+        >`${'background-image'} ${'background-position'} / ${'background-size'} ${'background-repeat'} ${'background-attachment'} ${'background-origin'} ${'background-clip'}`;
+
+        const backgroundLayerCloser: ShorthandCloser<V, keyof BackgroundLayer<V>, BackgroundLayer<V>> = (
+            opened,
+            api,
+            detachExpressions = false,
+        ) => {
+            const multiExpressions: string[] = [];
+
+            // Background shorthand syntax allows an arbitrary order of sub-properties. So, in most
+            // cases, it's safe to omit implicit values. One exception is  background-position: it
+            // cannot be skipped if there is an explicitly specified background-size. Also, we can
+            // omit unnecessary duplicates: when background-origin and background-clip are equal,
+            // we can omit background-clip and keep a single value for both.
+            function isSafeToOmit<V>(propName: string, value: OpenedShorthandValue<V>): boolean {
+                if (propName === 'background-position' && opened['background-size'].some((n) => !n.isImplicit)) {
+                    return false;
+                }
+
+                const isImplicit = Array.isArray(value) ? value.every((n) => n.isImplicit) : value.isImplicit;
+
+                const unnecessaryBackgroundClip =
+                    propName === 'background-clip' &&
+                    opened['background-clip'].value.text === opened['background-origin'].value.text;
+
+                return isImplicit || unnecessaryBackgroundClip;
+            }
+
+            return fixAstNodesPositions(
+                (layerTemplate.strings as string[]).reduce((nodes, currString, index) => {
+                    const currKey = layerTemplate.keys[index];
+
+                    if (currKey === undefined || isSafeToOmit(currKey, opened[currKey])) {
+                        return nodes;
+                    }
+
+                    return nodes.concat(
+                        valueTextNode(currString),
+                        getOpenedNode(opened[currKey], api, detachExpressions, multiExpressions),
+                    );
+                }, [] as CSSAstNode<V>[]),
+                api,
+            );
+        };
+
+        let nonColorLayers: CSSAstNode<V>[] = [];
+        opened.layers.forEach((layer) => {
+            nonColorLayers = nonColorLayers.concat(backgroundLayerCloser(layer, api, detachExpression));
+            nonColorLayers.push({ ...valueTextNode(','), type: ',' });
+        });
+        nonColorLayers.pop();
+
+        return fixAstNodesPositions(
+            opened.color.isImplicit
+                ? nonColorLayers
+                : nonColorLayers.concat(getOpenedNode(opened.color, api, detachExpression)),
+            api,
+        );
+    };

package/src/shorthands/openers/border-image-shorthand.ts

@@ -0,0 +1,35 @@
+import type { BorderImages, OpenedBorderImageShorthand } from '../shorthand-css-data.js';
+import type { ShorthandOpener, GetShorthandCloser } from '../shorthand-types.js';
+
+import {
+    imageSourceDataType,
+    borderImageSliceDataType,
+    borderImageWidthDataType,
+    borderImageOutsetDataType,
+    borderImageRepeatDataType,
+} from '../../css-data-types/index.js';
+import {
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+
+// border-image
+export const openBorderImageShorthand = <V>(): ShorthandOpener<V, BorderImages, OpenedBorderImageShorthand<V>> =>
+    createShorthandOpener({
+        prop: 'border-image',
+        parts: [
+            { prop: 'border-image-source', dataType: imageSourceDataType },
+            { prop: 'border-image-slice', dataType: borderImageSliceDataType, multipleItems: true },
+            { prop: 'border-image-width', dataType: borderImageWidthDataType, multipleItems: true },
+            { prop: 'border-image-outset', dataType: borderImageOutsetDataType, multipleItems: true },
+            { prop: 'border-image-repeat', dataType: borderImageRepeatDataType, multipleItems: true },
+        ],
+        shorthandOpener: (astNodes, api, parts) => unorderedListShorthandOpener(parts)(astNodes, api),
+    }) as ShorthandOpener<V, BorderImages, OpenedBorderImageShorthand<V>>;
+
+export const closeBorderImageShorthand: GetShorthandCloser<BorderImages> = <V>() =>
+    createShorthandCloser<V, BorderImages>(
+        shorthandCloserTemplate<BorderImages>`${'border-image-source'} ${'border-image-slice'} / ${'border-image-width'} / ${'border-image-outset'} ${'border-image-repeat'}`,
+    );

package/src/shorthands/openers/border-radius-shorthand.ts

@@ -0,0 +1,93 @@
+import type { BorderRadiuses, OpenedBorderRadiusShorthand } from '../shorthand-css-data.js';
+import type {
+    CSSAstNode,
+    OpenedShorthand,
+    SimpleOpenedShorthand,
+    ShorthandOpener,
+    ShorthandCloser,
+} from '../shorthand-types.js';
+
+import { ALWAYS_DATA_TYPE, INTERNAL_VALUE_SEPERATOR } from '../../css-data-types/index.js';
+import { valueTextNode } from '../../tokenizers/index.js';
+import {
+    edgesShorthandOpener,
+    getShorthandLayers,
+    getOpenedLayer,
+    createShorthandOpener,
+    edgesShorthandCloser,
+    fixAstNodesPositions,
+} from '../shorthand-parser-utils.js';
+
+// border-radius
+export const openBorderRadiusShorthand = <V>(): ShorthandOpener<V, BorderRadiuses, OpenedBorderRadiusShorthand<V>> => {
+    const singleBorderRadiusShorthandOpenerInner = edgesShorthandOpener<V, BorderRadiuses>('border-radius', true);
+
+    const borderRadiusShorthandOpener = createShorthandOpener<V, BorderRadiuses>({
+        prop: 'border-radius',
+        parts: [
+            {
+                prop: 'border-radius',
+                dataType: ALWAYS_DATA_TYPE,
+                openedProps: [
+                    'border-top-left-radius',
+                    'border-top-right-radius',
+                    'border-bottom-right-radius',
+                    'border-bottom-left-radius',
+                ],
+            },
+        ],
+        shorthandOpener: (astNodes, api) => {
+            const [firstLayer, secondLayer] = getShorthandLayers(astNodes, INTERNAL_VALUE_SEPERATOR);
+            const firstOpened = singleBorderRadiusShorthandOpenerInner(firstLayer!, api);
+            const secondOpened =
+                secondLayer && secondLayer.length > 0
+                    ? singleBorderRadiusShorthandOpenerInner(secondLayer, api)
+                    : undefined;
+
+            const opened: OpenedShorthand<V> = {};
+            const props = Object.keys(firstOpened) as BorderRadiuses[];
+            for (const prop of props) {
+                opened[prop] = [firstOpened[prop]];
+                if (secondOpened) {
+                    opened[prop].push(secondOpened[prop]);
+                }
+            }
+            return opened;
+        },
+    });
+
+    return (shortHand, api) => {
+        const openedShorthand = borderRadiusShorthandOpener(shortHand, api);
+
+        const layers: SimpleOpenedShorthand<V, BorderRadiuses>[] = [];
+        let currLayer: SimpleOpenedShorthand<V, BorderRadiuses> | undefined;
+        for (
+            let i = 0;
+            (currLayer = getOpenedLayer(openedShorthand, i) as SimpleOpenedShorthand<V, BorderRadiuses> | undefined) !==
+            undefined;
+            i++
+        ) {
+            layers.push(currLayer);
+        }
+
+        return layers;
+    };
+};
+
+export const closeBorderRadiusShorthand =
+    <V>(): ShorthandCloser<V, BorderRadiuses, SimpleOpenedShorthand<V, BorderRadiuses>[]> =>
+    (opened, api, detachExpression) => {
+        if (!opened[0]) {
+            return [];
+        }
+        const borderRadiusLayerCloser = edgesShorthandCloser<V, BorderRadiuses>('border-radius', true);
+        let closedLayers: CSSAstNode<V>[] = [];
+        closedLayers = closedLayers.concat(borderRadiusLayerCloser(opened[0], api, detachExpression));
+        if (opened[1]) {
+            closedLayers = closedLayers.concat(
+                valueTextNode(INTERNAL_VALUE_SEPERATOR),
+                borderRadiusLayerCloser(opened[1], api, detachExpression),
+            );
+        }
+        return fixAstNodesPositions(closedLayers, api);
+    };

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

@@ -0,0 +1,198 @@
+import type {
+    BorderStyles,
+    BorderWidths,
+    BorderColors,
+    BordersShallow,
+    Borders,
+    BordersTop,
+    BordersRight,
+    BordersBottom,
+    BordersLeft,
+    CssEdge,
+} from '../shorthand-css-data.js';
+import type {
+    SimpleOpenedShorthand,
+    SimpleShorthandOpener,
+    ShorthandPart,
+    GetSimpleShorthandOpener,
+    ShorthandCloser,
+    GetShorthandCloser,
+} from '../shorthand-types.js';
+
+import { type DataType, lineStyleDataType, lineWidthDataType, colorDataType } from '../../css-data-types/index.js';
+import {
+    edgesShorthandOpener,
+    unorderedListShorthandOpener,
+    createShorthandOpener,
+    createShorthandOpenerFromPart,
+    getOpenedNodeValue,
+    edgesShorthandCloser,
+    shorthandCloserTemplate,
+    createShorthandCloser,
+} from '../shorthand-parser-utils.js';
+import { CannotCloseBorderError } from '../shorthand-parser-errors.js';
+
+const borderShorthandPart = <V, T extends string>(
+    prop: string,
+    dataType: DataType,
+    openedProps?: T[],
+): ShorthandPart<V, T> => ({
+    prop,
+    dataType,
+    partOpener: openedProps ? edgesShorthandOpener(prop) : undefined,
+    openedProps,
+});
+
+const getBorderStyleShorthandPart = <V>() =>
+    borderShorthandPart<V, BorderStyles>('border-style', lineStyleDataType, [
+        'border-top-style',
+        'border-right-style',
+        'border-bottom-style',
+        'border-left-style',
+    ]);
+const getBorderWidthShorthandPart = <V>() =>
+    borderShorthandPart<V, BorderWidths>('border-width', lineWidthDataType, [
+        'border-top-width',
+        'border-right-width',
+        'border-bottom-width',
+        'border-left-width',
+    ]);
+
+const getBorderColorShorthandPart = <V>() =>
+    borderShorthandPart<V, BorderColors>('border-color', colorDataType, [
+        'border-top-color',
+        'border-right-color',
+        'border-bottom-color',
+        'border-left-color',
+    ]);
+
+// border
+export const openBorderShorthand: GetSimpleShorthandOpener<Borders> = <V>() =>
+    createShorthandOpener({
+        prop: 'border',
+        parts: [
+            getBorderStyleShorthandPart(),
+            getBorderWidthShorthandPart(),
+            getBorderColorShorthandPart(),
+        ] as ShorthandPart<V, Borders>[],
+        shorthandOpener: (astNodes, api, parts, shallow) =>
+            unorderedListShorthandOpener(parts, { shallow })(astNodes, api),
+    }) as SimpleShorthandOpener<V, Borders>;
+
+export const openBorderShorthandShallow: GetSimpleShorthandOpener<BordersShallow> = <V>() => {
+    const borderShallowOpener: SimpleShorthandOpener<V, BordersShallow> = (shortHand, api) =>
+        openBorderShorthand<V>()(shortHand, api, true) as unknown as SimpleOpenedShorthand<V, BordersShallow>;
+    return borderShallowOpener;
+};
+
+export const closeBorderShorthand =
+    <V>(): ShorthandCloser<V, Borders> =>
+    (opened, api, detachExpression, shallow) => {
+        if (shallow) {
+            const borderShallowCloser = createShorthandCloser<V, BordersShallow>(
+                shorthandCloserTemplate<BordersShallow>`${'border-style'} ${'border-width'} ${'border-color'}`,
+            );
+            return borderShallowCloser(
+                opened as unknown as SimpleOpenedShorthand<V, BordersShallow>,
+                api,
+                detachExpression,
+            );
+        }
+
+        const borderClosedTop = closeBorderTopShorthand<V>()(opened, api, detachExpression);
+        const borderClosedTopValue = getOpenedNodeValue(borderClosedTop, api);
+        if (
+            getOpenedNodeValue(closeBorderRightShorthand<V>()(opened, api, detachExpression), api) !==
+                borderClosedTopValue ||
+            getOpenedNodeValue(closeBorderBottomShorthand<V>()(opened, api, detachExpression), api) !==
+                borderClosedTopValue ||
+            getOpenedNodeValue(closeBorderLeftShorthand<V>()(opened, api, detachExpression), api) !==
+                borderClosedTopValue
+        ) {
+            throw new CannotCloseBorderError();
+        }
+
+        return borderClosedTop;
+    };
+
+const borderEdgeProp = (edge: CssEdge, item: string) => `border-${edge}-${item}`;
+const borderEdgeShorthandOpener = <V, T extends string>(edge: CssEdge) =>
+    createShorthandOpener({
+        prop: `border-${edge}`,
+        parts: [
+            borderShorthandPart<V, BorderStyles>(borderEdgeProp(edge, 'style'), lineStyleDataType),
+            borderShorthandPart<V, BorderWidths>(borderEdgeProp(edge, 'width'), lineWidthDataType),
+            borderShorthandPart<V, BorderColors>(borderEdgeProp(edge, 'color'), colorDataType),
+        ] as ShorthandPart<V, T>[],
+        shorthandOpener: (astNodes, api, parts) =>
+            unorderedListShorthandOpener(parts, { shallow: true })(astNodes, api),
+    }) as SimpleShorthandOpener<V, T>;
+
+// border-top
+export const openBorderTopShorthand: GetSimpleShorthandOpener<BordersTop> = <V>() =>
+    borderEdgeShorthandOpener<V, BordersTop>('top');
+
+export const closeBorderTopShorthand: GetShorthandCloser<BordersTop> = <V>() =>
+    createShorthandCloser<V, BordersTop>(
+        shorthandCloserTemplate<BordersTop>`${borderEdgeProp('top', 'style')} ${borderEdgeProp(
+            'top',
+            'width',
+        )} ${borderEdgeProp('top', 'color')}`,
+    );
+
+// border-right
+export const openBorderRightShorthand: GetSimpleShorthandOpener<BordersRight> = <V>() =>
+    borderEdgeShorthandOpener<V, BordersRight>('right');
+
+export const closeBorderRightShorthand: GetShorthandCloser<BordersRight> = <V>() =>
+    createShorthandCloser<V, BordersRight>(
+        shorthandCloserTemplate<BordersRight>`${borderEdgeProp('right', 'style')} ${borderEdgeProp(
+            'right',
+            'width',
+        )} ${borderEdgeProp('right', 'color')}`,
+    );
+
+// border-bottom
+export const openBorderBottomShorthand: GetSimpleShorthandOpener<BordersBottom> = <V>() =>
+    borderEdgeShorthandOpener<V, BordersBottom>('bottom');
+
+export const closeBorderBottomShorthand: GetShorthandCloser<BordersBottom> = <V>() =>
+    createShorthandCloser<V, BordersBottom>(
+        shorthandCloserTemplate<BordersBottom>`${borderEdgeProp('bottom', 'style')} ${borderEdgeProp(
+            'bottom',
+            'width',
+        )} ${borderEdgeProp('bottom', 'color')}`,
+    );
+
+// border-left
+export const openBorderLeftShorthand: GetSimpleShorthandOpener<BordersLeft> = <V>() =>
+    borderEdgeShorthandOpener<V, BordersLeft>('left');
+
+export const closeBorderLeftShorthand: GetShorthandCloser<BordersLeft> = <V>() =>
+    createShorthandCloser<V, BordersLeft>(
+        shorthandCloserTemplate<BordersLeft>`${borderEdgeProp('left', 'style')} ${borderEdgeProp(
+            'left',
+            'width',
+        )} ${borderEdgeProp('left', 'color')}`,
+    );
+
+// border-style
+export const openBorderStyleShorthand: GetSimpleShorthandOpener<BorderStyles> = <V>() =>
+    createShorthandOpenerFromPart(getBorderStyleShorthandPart<V>());
+
+export const closeBorderStyleShorthand: GetShorthandCloser<BorderStyles> = <V>() =>
+    edgesShorthandCloser<V, BorderStyles>('border-style');
+
+// border-width
+export const openBorderWidthShorthand: GetSimpleShorthandOpener<BorderWidths> = <V>() =>
+    createShorthandOpenerFromPart(getBorderWidthShorthandPart<V>());
+
+export const closeBorderWidthShorthand: GetShorthandCloser<BorderWidths> = <V>() =>
+    edgesShorthandCloser<V, BorderWidths>('border-width');
+
+// border-color
+export const openBorderColorShorthand: GetSimpleShorthandOpener<BorderColors> = <V>() =>
+    createShorthandOpenerFromPart(getBorderColorShorthandPart<V>());
+
+export const closeBorderColorShorthand: GetShorthandCloser<BorderColors> = <V>() =>
+    edgesShorthandCloser<V, BorderColors>('border-color');