@dazl/shorthands-opener 4.2.0

package/src/css-data-types/data-types-utils.ts

@@ -0,0 +1,258 @@
+import type { Descriptors, Delimiters } from '../tokenizers/index.js';
+import type {
+    AstItem,
+    PredicateMatch,
+    PredicateIndexMatch,
+    DataTypePredicate,
+    PredicatePrefix,
+    DataType,
+} from './data-types-types.js';
+import {
+    DataTypeType,
+    type KeywordsMap,
+    INTERNAL_VALUE_SEPERATOR,
+    DATA_TYPES_MAP,
+    getInitialValue,
+} from './data-types-consts.js';
+
+export interface Dimension {
+    number: number;
+    unit: string;
+}
+
+export interface DimensionPredicateOptions {
+    units?: string | KeywordsMap;
+    min?: number;
+    max?: number;
+    nonZero?: boolean;
+    integer?: boolean;
+}
+
+const DIMENSION_REGEX = /^[+-]?(\d+|\d*\.\d+|\d*\.?\d+[eE][+-]?\d+)(\D*$)/;
+const DIMENSION_REGEX_UNIT_INDEX = 2;
+// TODO: support unicode and escaped characters
+const IDENTIFIER_REGEX = /^-?[A-Za-z_]([A-Za-z0-9_-])*/;
+const HEX_COLOR_REGEX = /^#([a-fA-F\d]{3,4}|[a-fA-F\d]{6}|[a-fA-F\d]{8})$/;
+const EMPTY_UNIT = '';
+export const EMPTY_DIMENSION: Dimension = { number: 0, unit: EMPTY_UNIT };
+
+/** Checks if map has a key in a case-insensitive manner using `toLowerCase()`. */
+function mapHasKeyCaseInsensitive(map: Map<string, unknown>, key: string) {
+    return [...map.keys()].map((key) => key.toLowerCase()).includes(key.toLowerCase());
+}
+
+export const parseDimension = (text: string): Dimension | undefined => {
+    const number = parseFloat(text);
+    if (!isNaN(number)) {
+        const dimensionMatch = DIMENSION_REGEX.exec(text);
+        return dimensionMatch ? { number, unit: dimensionMatch[DIMENSION_REGEX_UNIT_INDEX] || EMPTY_UNIT } : undefined;
+    }
+    return;
+};
+
+export const unorderedListPredicate =
+    (keywords: string | KeywordsMap): DataTypePredicate =>
+    (ast) =>
+        ast.type === 'text' &&
+        (typeof keywords === 'string'
+            ? ast.text.toLowerCase() === keywords.toLowerCase()
+            : mapHasKeyCaseInsensitive(keywords, ast.text));
+
+export const functionPredicate =
+    (functions: string | KeywordsMap): DataTypePredicate =>
+    (ast) =>
+        ast.type === 'call' &&
+        (typeof functions === 'string'
+            ? ast.name.toLowerCase() === functions.toLowerCase()
+            : mapHasKeyCaseInsensitive(functions, ast.name));
+
+// <hex-color>
+export const hexColorPredicate = (): DataTypePredicate => (ast) =>
+    ast.type === 'text' && HEX_COLOR_REGEX.test(ast.text);
+
+// <string>
+export const stringPredicate = (): DataTypePredicate => (ast) => ast.type === 'string';
+
+export const dimensionPredicate =
+    ({ units, min, max, nonZero = false, integer = false }: DimensionPredicateOptions = {}): DataTypePredicate =>
+    (ast) => {
+        if (ast.type === 'text') {
+            const dimension = parseDimension(ast.text);
+            if (
+                !dimension ||
+                (min !== undefined && dimension.number < min) ||
+                (max !== undefined && dimension.number > max)
+            ) {
+                return false;
+            }
+            if (nonZero && dimension.number === 0) {
+                return false;
+            }
+            if (integer) {
+                return dimension.number % 1 === 0;
+            }
+            if (min === undefined && max === undefined && dimension.number === 0) {
+                return true;
+            }
+            if (typeof units === 'string') {
+                return dimension.unit.toLowerCase() === units.toLowerCase();
+            }
+            return units ? mapHasKeyCaseInsensitive(units, dimension.unit) : !dimension.unit;
+        }
+
+        return false;
+    };
+
+export const customIdentPredicate =
+    (forbiddenKeywords?: string | KeywordsMap): DataTypePredicate =>
+    (ast) =>
+        ast.type === 'text' &&
+        !(forbiddenKeywords && unorderedListPredicate(forbiddenKeywords)(ast)) &&
+        IDENTIFIER_REGEX.test(ast.text);
+
+export const typePredicate =
+    (typeList: Array<'string' | 'call' | 'text' | ',' | '/'>): DataTypePredicate =>
+    (ast, index, items) => {
+        const startIndex = index ?? 0;
+        const astItems = items ?? [{ value: ast }];
+
+        let item: AstItem | undefined;
+        let i = startIndex;
+        let matchAmount = 0;
+        while ((item = astItems[i++])) {
+            const itemType = item.value.type;
+            if (typeList.every((typeItem) => itemType !== typeItem)) {
+                break;
+            }
+            matchAmount++;
+        }
+
+        return matchAmount;
+    };
+
+export const curlyBracesPredicate =
+    (predicates: DataTypePredicate[], min: number, max: number): DataTypePredicate =>
+    (ast, index, items) => {
+        const startIndex = index ?? 0;
+        const astItems = items ?? [{ value: ast }];
+
+        let item: AstItem | undefined;
+        let i = startIndex;
+        let matchAmount = 0;
+        while ((item = astItems[i++])) {
+            let match: PredicateMatch | undefined = undefined;
+            for (const predicate of predicates) {
+                const predicateMatch = predicate(item.value, i - 1, items);
+                if (predicateMatch) {
+                    match = predicateMatch;
+                    break;
+                }
+            }
+            if (!match || ++matchAmount === max) {
+                break;
+            }
+        }
+
+        return matchAmount >= min ? matchAmount : false;
+    };
+
+export const asteriskPredicate =
+    (predicate: DataTypePredicate): DataTypePredicate =>
+    (ast, index, items) => {
+        const startIndex = index ?? 0;
+        const astItems = items ?? [{ value: ast }];
+
+        let item: AstItem | undefined;
+        let i = startIndex;
+        let matchAmount = 0;
+        while ((item = astItems[i])) {
+            if (!predicate(item.value, i++, astItems)) {
+                break;
+            }
+            matchAmount++;
+        }
+
+        return matchAmount;
+    };
+
+export const seperatorPredicate = (): DataTypePredicate => (ast) =>
+    ast.type === '/' && ast.text === INTERNAL_VALUE_SEPERATOR;
+
+export const seperatorPrefix = (dataType: DataTypeType): PredicatePrefix => ({
+    dataType,
+    prefixChar: INTERNAL_VALUE_SEPERATOR,
+});
+
+export const predicateUnion =
+    (predicates: DataTypePredicate[]): DataTypePredicate =>
+    (ast, index, items, prev) => {
+        for (const predicate of predicates) {
+            const predicateMatch = predicate(ast, index, items, prev);
+            if (predicateMatch) {
+                return predicateMatch;
+            }
+        }
+        return false;
+    };
+
+export const findPredicateIndexMatch = (
+    items: AstItem[],
+    predicate: DataTypePredicate,
+): PredicateIndexMatch | undefined => {
+    let item: AstItem | undefined;
+    let i = 0;
+    while ((item = items[i])) {
+        const predicateMatch = predicate(item.value, i, items);
+        if (predicateMatch) {
+            return { index: i, length: Number(predicateMatch) };
+        }
+        i++;
+    }
+
+    return undefined;
+};
+
+export const createDataType = (dataType: DataTypeType, predicates: DataTypePredicate[]): DataType => {
+    const dataTypeData = DATA_TYPES_MAP.get(dataType);
+    const prefix = dataTypeData?.prefix ? seperatorPrefix(dataTypeData.prefix) : undefined;
+
+    return {
+        dataType,
+        initial: getInitialValue(dataType),
+        prefix,
+        predicate: (ast, index, items, prev) => {
+            let predicateAst = ast;
+            let predicateIndex = index;
+            if (prefix) {
+                if (index === undefined || !items || prev !== prefix.dataType) {
+                    return false;
+                }
+                const prefixType: Descriptors | Delimiters =
+                    prefix.prefixChar === INTERNAL_VALUE_SEPERATOR ? '/' : 'text';
+                if (ast.type !== prefixType || ast.text !== prefix.prefixChar) {
+                    return false;
+                }
+                predicateIndex = index + 1;
+                if (!items[predicateIndex]) {
+                    return false;
+                }
+                predicateAst = items[predicateIndex]!.value;
+            }
+            const predicateMatch = predicateUnion(predicates)(predicateAst, predicateIndex, items, prev);
+            if (predicateMatch) {
+                return !prefix ? predicateMatch : Number(predicateMatch) + 1;
+            }
+            return false;
+        },
+    };
+};
+
+export const createUnorderedListDataType = (dataType: DataTypeType): DataType => {
+    const dataTypeData = DATA_TYPES_MAP.get(dataType);
+
+    return {
+        dataType,
+        initial: getInitialValue(dataType),
+        predicate: dataTypeData?.keywords ? unorderedListPredicate(dataTypeData.keywords) : () => false,
+    };
+};

package/src/css-data-types/data-types.ts

@@ -0,0 +1,435 @@
+import type { DataType } from './data-types-types.js';
+
+import {
+    DataTypeType,
+    DEFAULT_DIMENSION,
+    LINE_WIDTH_KEYWORDS,
+    COLOR_FUNCTIONS,
+    INITIAL_BACKGROUND_COLOR,
+    OUTLINE_COLOR_INVERT_KEYWORD,
+    BORDER_IMAGE_REPEAT_MULTIPLE_KEYWORDS,
+    GRADIENT_FUNCTIONS,
+    IMAGE_FUNCTIONS,
+    IMAGE_SOURCE_NONE_KEYWORD,
+    BG_SIZE_KEYWORDS,
+    REPEAT_STYLE_SINGLE_KEYWORDS,
+    REPEAT_STYLE_MULTIPLE_KEYWORDS,
+    INITIAL_BACKGROUND_ORIGIN,
+    INITIAL_BACKGROUND_CLIP,
+    FONT_STYLE_KEYWORDS,
+    FONT_WEIGHT_KEYWORDS,
+    FONT_WEIGHT_NUMBER_RANGE_MIN,
+    FONT_WEIGHT_NUMBER_RANGE_MAX,
+    FONT_SIZE_KEYWORDS,
+    LINE_HEIGHT_KEYWORD,
+    CONTENT_DISTRIBUTION_KEYWORDS,
+    CONTENT_POSITION_KEYWORDS,
+    ALIGN_CONTENT_KEYWORDS,
+    JUSTIFY_CONTENT_KEYWORDS,
+    SELF_POSITION_KEYWORDS,
+    ALIGN_ITEMS_KEYWORDS,
+    JUSTIFY_ITEMS_KEYWORDS,
+    FLEX_BASIS_KEYWORDS,
+    GRID_LINE_AUTO_KEYWORD,
+    GRID_TEMPLATE_AXIS_NONE_KEYWORD,
+    INITIAL_GRID_TEMPLATE_AREAS,
+    TEXT_DECORATION_LINE_NONE_KEYWORD,
+    LIST_STYLE_TYPE_KEYWORDS,
+    CURRENT_COLOR_KEYWORD,
+    SYSTEM_COLOR_KEYWORDS,
+    TRANSPARENT_COLOR_KEYWORD,
+    NAMED_COLOR_KEYWORDS,
+} from './data-types-consts.js';
+import {
+    unorderedListPredicate,
+    functionPredicate,
+    hexColorPredicate,
+    stringPredicate,
+    dimensionPredicate,
+    curlyBracesPredicate,
+    asteriskPredicate,
+    createDataType,
+    createUnorderedListDataType,
+} from './data-types-utils.js';
+import {
+    numberPredicate,
+    lengthPredicate,
+    lengthPercentagePredicate,
+    autoKeywordPredicate,
+    fontStylePredicate,
+    fontFamilyStringPredicate,
+    textDecorationLinePredicate,
+    borderImageSlicePredicate,
+    gridLinePredicate,
+    trackSizePredicate,
+    trackListPredicate,
+    explicitTrackListPredicate,
+    autoTrackListPredicate,
+    gridTemplateAreasStringPredicate,
+    gridAutoFlowPredicate,
+    basicMathFunctionPredicate,
+} from './data-types-predicates.js';
+import { stateMachineDataTypeMatch, bgPositionStateMachine } from './data-types-state-machines.js';
+
+export const ALWAYS_DATA_TYPE: DataType = {
+    dataType: DataTypeType.Unknown,
+    predicate: () => true,
+    initial: DEFAULT_DIMENSION,
+};
+
+// <universal>
+// syntax: inherit | initial | unset | revert
+export const universalDataType = createUnorderedListDataType(DataTypeType.Universal);
+
+// <length>
+export const lengthDataType = createDataType(DataTypeType.Length, [lengthPredicate, basicMathFunctionPredicate]);
+
+// <length-percentage>
+export const lengthPercentageDataType = createDataType(DataTypeType.LengthPercentage, [
+    lengthPercentagePredicate,
+    basicMathFunctionPredicate,
+]);
+
+// <width>
+export const widthDataType = createDataType(DataTypeType.Width, [
+    lengthPercentageDataType.predicate,
+    autoKeywordPredicate,
+]);
+
+// <line-style>
+// syntax: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
+export const lineStyleDataType = createUnorderedListDataType(DataTypeType.LineStyle);
+
+// <'outline-style'>
+// syntax: auto | <'border-style'>
+export const outlineStyleDataType = createDataType(DataTypeType.OutlineStyle, [
+    autoKeywordPredicate,
+    lineStyleDataType.predicate,
+]);
+
+// <line-width>
+// syntax: <length> | thin | medium | thick
+export const lineWidthDataType = createDataType(DataTypeType.LineWidth, [
+    lengthDataType.predicate,
+    unorderedListPredicate(LINE_WIDTH_KEYWORDS),
+]);
+
+// <color-base>
+const colorBasePredicates = [
+    hexColorPredicate(),
+    functionPredicate(COLOR_FUNCTIONS),
+    unorderedListPredicate(NAMED_COLOR_KEYWORDS),
+    functionPredicate('color-mix'),
+    unorderedListPredicate(TRANSPARENT_COLOR_KEYWORD),
+];
+
+// <color>
+export const colorDataType = createDataType(DataTypeType.Color, [
+    ...colorBasePredicates,
+    unorderedListPredicate(CURRENT_COLOR_KEYWORD),
+    unorderedListPredicate(SYSTEM_COLOR_KEYWORDS),
+    functionPredicate('contrast-color'),
+    functionPredicate('device-cmyk'),
+    functionPredicate('light-dark'),
+]);
+
+export const backgroundColorDataType: DataType = {
+    ...colorDataType,
+    initial: INITIAL_BACKGROUND_COLOR,
+};
+
+// <'outline-color'>
+// syntax: <color> | invert
+export const outlineColorDataType = createDataType(DataTypeType.OutlineColor, [
+    colorDataType.predicate,
+    unorderedListPredicate(OUTLINE_COLOR_INVERT_KEYWORD),
+]);
+
+// <border-image-slice>
+// syntax: <number-percentage>{1,4} && fill?
+export const borderImageSliceDataType = createDataType(DataTypeType.BorderImageSlice, [borderImageSlicePredicate]);
+
+// <border-image-outset>
+// syntax: [ <length> | <number> ]{1,4}
+export const borderImageOutsetDataType = createDataType(DataTypeType.BorderImageOutset, [
+    curlyBracesPredicate([lengthDataType.predicate, numberPredicate], 1, 4),
+]);
+
+// <border-image-repeat>
+// syntax: [ stretch | repeat | round | space ]{1,2}
+export const borderImageRepeatDataType = createDataType(DataTypeType.BorderImageRepeat, [
+    curlyBracesPredicate([unorderedListPredicate(BORDER_IMAGE_REPEAT_MULTIPLE_KEYWORDS)], 1, 2),
+]);
+
+// <border-image-width>
+// syntax: [ <length-percentage> | <number> | auto ]{1,4}
+export const borderImageWidthDataType = createDataType(DataTypeType.BorderImageWidth, [
+    curlyBracesPredicate([lengthPercentageDataType.predicate, numberPredicate, autoKeywordPredicate], 1, 4),
+]);
+
+// <gradient>
+// syntax: <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>
+export const gradientDataType = createDataType(DataTypeType.Gradient, [functionPredicate(GRADIENT_FUNCTIONS)]);
+
+// <image>
+// syntax: <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
+export const imageDataType = createDataType(DataTypeType.Image, [
+    functionPredicate(IMAGE_FUNCTIONS),
+    gradientDataType.predicate,
+]);
+
+// <image-source>
+// syntax: none | <image>
+export const imageSourceDataType = createDataType(DataTypeType.ImageSource, [
+    unorderedListPredicate(IMAGE_SOURCE_NONE_KEYWORD),
+    imageDataType.predicate,
+]);
+
+// <bg-position>
+/*
+syntax: [
+  [ left | center | right | top | bottom | <length-percentage> ] |
+  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
+  [ center | [ left | right ] <length-percentage>? ]
+    && [ center | [ top | bottom] <length-percentage>? ]
+]
+*/
+export const bgPositionDataType = createDataType(DataTypeType.BgPosition, [
+    (ast, index, items) => {
+        if (ast.type !== 'text' || index === undefined || !items) {
+            return false;
+        }
+
+        return stateMachineDataTypeMatch(items, index, bgPositionStateMachine(lengthPercentageDataType.predicate));
+    },
+]);
+
+// <bg-size>
+// syntax: [ <length-percentage> | auto ]{1,2} | cover | contain
+export const bgSizeDataType = createDataType(DataTypeType.BgSize, [
+    curlyBracesPredicate([lengthPercentageDataType.predicate, autoKeywordPredicate], 1, 2),
+    unorderedListPredicate(BG_SIZE_KEYWORDS),
+]);
+
+// <repeat-style>
+// syntax: repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
+export const repeatStyleDataType = createDataType(DataTypeType.RepeatStyle, [
+    unorderedListPredicate(REPEAT_STYLE_SINGLE_KEYWORDS),
+    curlyBracesPredicate([unorderedListPredicate(REPEAT_STYLE_MULTIPLE_KEYWORDS)], 1, 2),
+]);
+
+// <attachment>
+// syntax: scroll | fixed | local
+export const attachmentDataType = createUnorderedListDataType(DataTypeType.Attachment);
+
+// <box>
+// syntax: border-box | padding-box | content-box
+export const boxDataType = createUnorderedListDataType(DataTypeType.Box);
+
+export const backgroundOriginDataType: DataType = {
+    ...boxDataType,
+    initial: INITIAL_BACKGROUND_ORIGIN,
+};
+
+export const backgroundClipDataType: DataType = {
+    ...boxDataType,
+    initial: INITIAL_BACKGROUND_CLIP,
+};
+
+// <font>
+// syntax: caption | icon | menu | message-box | small-caption | status-bar
+export const fontSingleValueDataType = createUnorderedListDataType(DataTypeType.Font);
+
+// <font-style>
+// syntax: normal | italic | oblique <angle>?
+export const fontStyleDataType = createDataType(DataTypeType.FontStyle, [
+    unorderedListPredicate(FONT_STYLE_KEYWORDS),
+    fontStylePredicate,
+]);
+
+// <font-variant>
+// syntax: normal | small-caps
+export const fontVariantDataType = createUnorderedListDataType(DataTypeType.FontVariant);
+
+// <font-weight>
+// syntax: <font-weight-absolute> | <font-weight-relative> | [1,1000]
+export const fontWeightDataType = createDataType(DataTypeType.FontWeight, [
+    unorderedListPredicate(FONT_WEIGHT_KEYWORDS),
+    dimensionPredicate({
+        min: FONT_WEIGHT_NUMBER_RANGE_MIN,
+        max: FONT_WEIGHT_NUMBER_RANGE_MAX,
+    }),
+]);
+
+// <font-stretch>
+// syntax: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
+export const fontStretchDataType = createUnorderedListDataType(DataTypeType.FontStretch);
+
+// <font-size>
+// syntax: <length-percentage> | <absolute-size> | <relative-size>
+export const fontSizeDataType = createDataType(DataTypeType.FontSize, [
+    lengthPercentageDataType.predicate,
+    unorderedListPredicate(FONT_SIZE_KEYWORDS),
+]);
+
+// <line-height>
+// syntax: <number> | <length-percentage> | normal
+export const lineHeightDataType = createDataType(DataTypeType.LineHeight, [
+    numberPredicate,
+    lengthPercentageDataType.predicate,
+    unorderedListPredicate(LINE_HEIGHT_KEYWORD),
+]);
+
+// <font-family>
+export const fontFamilyDataType = createDataType(DataTypeType.FontFamily, [fontFamilyStringPredicate]);
+
+// <align-content>
+// syntax: normal | baseline | <content-distribution> | <content-position>
+export const alignContentDataType = createDataType(DataTypeType.AlignContent, [
+    unorderedListPredicate(ALIGN_CONTENT_KEYWORDS),
+    unorderedListPredicate(CONTENT_DISTRIBUTION_KEYWORDS),
+    unorderedListPredicate(CONTENT_POSITION_KEYWORDS),
+]);
+
+// <justify-content>
+// syntax: normal | <content-distribution> | <content-position> | left | right
+export const justifyContentDataType = createDataType(DataTypeType.JustifyContent, [
+    unorderedListPredicate(JUSTIFY_CONTENT_KEYWORDS),
+    unorderedListPredicate(CONTENT_DISTRIBUTION_KEYWORDS),
+    unorderedListPredicate(CONTENT_POSITION_KEYWORDS),
+]);
+
+// <align-items>
+// syntax: normal | stretch | baseline | <self-position>
+export const alignItemsDataType = createDataType(DataTypeType.AlignItems, [
+    unorderedListPredicate(ALIGN_ITEMS_KEYWORDS),
+    unorderedListPredicate(SELF_POSITION_KEYWORDS),
+]);
+
+// justify-items
+// syntax: normal | stretch | baseline | <self-position> | legacy | left | right | center
+export const justifyItemsDataType = createDataType(DataTypeType.JustifyItems, [
+    alignItemsDataType.predicate,
+    unorderedListPredicate(JUSTIFY_ITEMS_KEYWORDS),
+]);
+
+// <'flex'>
+// syntax: initial | auto | none
+export const flexSingleValueDataType = createUnorderedListDataType(DataTypeType.Flex);
+
+// <flex-grow>
+// syntax: <number>
+export const flexGrowDataType = createDataType(DataTypeType.FlexGrow, [numberPredicate]);
+
+// <flex-shrink>
+// syntax: <number>
+export const flexShrinkDataType = createDataType(DataTypeType.FlexShrink, [numberPredicate]);
+
+// <flex-basis>
+// syntax: <width> | content | fill | max-content | min-content | fit-content
+export const flexBasisDataType = createDataType(DataTypeType.FlexBasis, [
+    widthDataType.predicate,
+    unorderedListPredicate(FLEX_BASIS_KEYWORDS),
+]);
+
+// <flex-direction>
+// syntax: row | row-reverse | column | column-reverse
+export const flexDirectionDataType = createUnorderedListDataType(DataTypeType.FlexDirection);
+
+// <flex-wrap>
+// syntax: nowrap | wrap | wrap-reverse
+export const flexWrapDataType = createUnorderedListDataType(DataTypeType.FlexWrap);
+
+// <grid-line>
+// syntax: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
+export const gridLineDataType = createDataType(DataTypeType.GridLine, [
+    unorderedListPredicate(GRID_LINE_AUTO_KEYWORD),
+    gridLinePredicate,
+]);
+
+// <grid-line-end>
+// syntax: <grid-line> [ / <grid-line> ]?
+export const gridLineEndDataType = createDataType(DataTypeType.GridLineEnd, [gridLineDataType.predicate]);
+
+// <grid-template-areas>
+// syntax: none | <string>+
+export const gridTemplateAreasDataType = createDataType(DataTypeType.GridTemplateAreas, [
+    unorderedListPredicate(INITIAL_GRID_TEMPLATE_AREAS),
+    gridTemplateAreasStringPredicate,
+]);
+
+// <grid-template-rows>
+// syntax: none | <track-list> | <auto-track-list>
+export const gridTemplateRowsDataType = createDataType(DataTypeType.GridTemplateRows, [
+    unorderedListPredicate(GRID_TEMPLATE_AXIS_NONE_KEYWORD),
+    autoTrackListPredicate,
+    trackListPredicate,
+]);
+
+// <grid-template-columns>
+// syntax: none | <track-list> | <auto-track-list>
+export const gridTemplateColumnsDataType = createDataType(DataTypeType.GridTemplateColumns, [
+    gridTemplateRowsDataType.predicate,
+]);
+
+// <explicit-track-list>
+// syntax: [ <line-names>? <track-size> ]+ <line-names>?
+export const explicitTrackListDataType = createDataType(DataTypeType.ExplicitTrackList, [explicitTrackListPredicate]);
+
+// <grid-template>
+// syntax: none
+export const gridTemplateSingleValueDataType = createUnorderedListDataType(DataTypeType.GridTemplate);
+
+// <grid-auto-flow>
+// syntax: auto-flow && dense?
+export const gridAutoFlowDataType = createDataType(DataTypeType.GridAutoFlow, [gridAutoFlowPredicate]);
+
+// <grid-auto-rows>
+// syntax: <track-size>+
+export const gridAutoRowsDataType = createDataType(DataTypeType.GridAutoRows, [asteriskPredicate(trackSizePredicate)]);
+
+// <grid-auto-columns>
+// syntax: <track-size>+
+export const gridAutoColumnsDataType = createDataType(DataTypeType.GridAutoColumns, [gridAutoRowsDataType.predicate]);
+
+// <grid>
+// syntax: none
+export const gridSingleValueDataType = createUnorderedListDataType(DataTypeType.Grid);
+
+// <overflow>
+// syntax: visible | hidden | clip | scroll | auto
+export const overflowDataType = createUnorderedListDataType(DataTypeType.Overflow);
+
+// <text-decoration-line>
+// syntax: none | [ underline || overline || line-through ]
+export const textDecorationLineDataType = createDataType(DataTypeType.TextDecorationLine, [
+    unorderedListPredicate(TEXT_DECORATION_LINE_NONE_KEYWORD),
+    textDecorationLinePredicate,
+]);
+
+// <text-decoration-style>
+// syntax: solid | double | dotted | dashed | wavy
+export const textDecorationStyleDataType = createUnorderedListDataType(DataTypeType.TextDecorationStyle);
+
+// <list-style>
+// syntax: none
+export const listStyleSingleValueDataType = createUnorderedListDataType(DataTypeType.ListStyle);
+
+// <list-style-position>
+// syntax: inside | outside
+export const listStylePositionDataType = createUnorderedListDataType(DataTypeType.ListStylePosition);
+
+// <list-style-type>
+// syntax: <counter-style> | <string> | none
+export const listStyleTypeDataType = createDataType(DataTypeType.ListStyleType, [
+    unorderedListPredicate(LIST_STYLE_TYPE_KEYWORDS),
+    stringPredicate(),
+]);
+
+// <inset>
+// syntax: inset
+export const insetDataType = createUnorderedListDataType(DataTypeType.Inset);
+
+// <shadow>
+// syntax: none
+export const shadowSingleValueDataType = createUnorderedListDataType(DataTypeType.Shadow);

package/src/css-data-types/index.ts

@@ -0,0 +1,6 @@
+export * from './data-types-consts.js';
+export * from './data-types.js';
+export * from './data-types-predicates.js';
+export * from './data-types-state-machines.js';
+export * from './data-types-types.js';
+export * from './data-types-utils.js';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './css-data-types/index.js';
+export * from './shorthands/index.js';
+export * from './compounds/index.js';
+export * from './tokenizers/index.js';