Validation

validation is performed using mdn-data. the validation level can be configured using the validation option. possible values are boolean or ValidationLevel:

• true or ValidationLevel.All: validates all nodes
• false or ValidationLevel.None: no validation
• ValidationLevel.Selector: validates only selectors
• ValidationLevel.AtRule: validates only at-rules
• ValidationLevel.Declaration: validates only declarations
• ValidationLevel.Default: validates selectors and at-rules

import {transform, TransformOptions, ValidationLevel} from "@tbela99/css-parser";

const options: TransformOptions = {

    validation: ValidationLevel.All,
    beautify: true,
    removeDuplicateDeclarations: 'height'
};

const css = `

@supports(height: 30pti) {

    .foo {

            height: calc(100px * 2/ 15);
            height: 'new';
            height: auto;
    }
}
`;

const result = await transform(css, options);
console.debug(result.code);

// @supports (height:30pti) {
// .foo {
//         height: calc(40px/3);
//         height: auto
//     }
// }
Copy

Lenient validation

the parser is lenient. this means that invalid nodes are kept in the ast but they are not rendered. this behavior can be changed using the lenient option.

Validation Errors

validation errors are returned with parse result or transform result. check the typescript definition of ErrorDescription for more details.

console.debug(result.errors);
Copy

Invalid tokens handling

bad tokens are thrown out during parsing. visitor functions can be used to catch and fix invalid tokens.

import {EnumToken, transform, TransformOptions, ValidationLevel} from "@tbela99/css-parser";
const options: TransformOptions = {

    validation: ValidationLevel.All,
    beautify: true,
    removeDuplicateDeclarations: 'height',
    visitor: {
        InvalidRuleTokenType(node) {

            console.debug(`> found '${EnumToken[node.typ]}'`);
        },
        InvalidAtRuleTokenType(node) {
            console.debug(`> found '${EnumToken[node.typ]}' in '${node.loc.src}' at ${node.loc.sta.lin}:${node.loc.sta.col}`);
        },
        InvalidDeclarationNodeType(node) {
            console.debug(`> found '${EnumToken[node.typ]}' in '${node.loc.src}' at ${node.loc.sta.lin}:${node.loc.sta.col}`);
        },
        InvalidClassSelectorTokenType(node) {
            console.debug(`> found '${EnumToken[node.typ]}' in '${node.loc.src}' at ${node.loc.sta.lin}:${node.loc.sta.col}`);
        },
        InvalidAttrTokenType(node) {
            console.debug(`> found '${EnumToken[node.typ]}' in '${node.loc.src}' at ${node.loc.sta.lin}:${node.loc.sta.col}`);
        },
        InvalidAtRuleNodeType(node) {
            console.debug(`> found '${EnumToken[node.typ]}' in '${node.loc.src}' at ${node.loc.sta.lin}:${node.loc.sta.col}`);
        }
    }
};

const css = `

@supports(height: 30pti) {

    .foo {

            height: calc(100px * 2/ 15);
            height: 'new';
            height: auto;
    }
}

@supports(height: 30pti);
`;

const result = await transform(css, options);

//> found 'InvalidDeclarationNodeType' in '' at 8:13
//> found 'InvalidAtRuleTokenType' in '' at 13:1

Copy