@tbela99/css-parser 0.0.1-rc1 → 0.0.1-rc3

package/dist/index.cjs

@@ -91,10 +91,7 @@ function isHash(name) {
     if (name.charAt(0) != '#') {
         return false;
     }
-    if (isIdent(name.charAt(1))) {
-        return true;
-    }
-    return true;
+    return isIdent(name.charAt(1));
 }
 function isNumber(name) {
     if (name.length == 0) {
@@ -1070,6 +1067,21 @@ var config$1 = {
 
 const getConfig = () => config$1;
 
+const funcList = ['clamp', 'calc'];
+function matchType(val, properties) {
+    if (val.typ == 'Iden' && properties.keywords.includes(val.val) ||
+        (properties.types.includes(val.typ))) {
+        return true;
+    }
+    if (val.typ == 'Number' && val.val == '0') {
+        return properties.types.some(type => type == 'Length' || type == 'Angle');
+    }
+    if (val.typ == 'Func' && funcList.includes(val.val)) {
+        return val.chi.every((t => ['Literal', 'Comma', 'Whitespace', 'Start-parens', 'End-parens'].includes(t.typ) || matchType(t, properties)));
+    }
+    return false;
+}
+
 // name to color
 const COLORS_NAMES = Object.seal({
     'aliceblue': '#f0f8ff',
@@ -1564,6 +1576,7 @@ function hsl2rgb(h, s, l, a = null) {
 }
 
 function render(data, opt = {}) {
+    const startTime = performance.now();
     const options = Object.assign(opt.minify ?? true ? {
         indent: '',
         newLine: '',
@@ -1582,7 +1595,9 @@ function render(data, opt = {}) {
         }
         return acc + renderToken(curr, options);
     }
-    return { code: doRender(data, options, reducer, 0) };
+    return { code: doRender(data, options, reducer, 0), stats: {
+            total: `${(performance.now() - startTime).toFixed(2)}ms`
+        } };
 }
 // @ts-ignore
 function doRender(data, options, reducer, level = 0, indents = []) {
@@ -1595,6 +1610,8 @@ function doRender(data, options, reducer, level = 0, indents = []) {
     const indent = indents[level];
     const indentSub = indents[level + 1];
     switch (data.typ) {
+        case 'Declaration':
+            return `${data.nam}:${options.indent}${data.val.reduce((acc, curr) => acc + renderToken(curr), '')}`;
         case 'Comment':
             return options.removeComments ? '' : data.val;
         case 'StyleSheet':
@@ -1611,7 +1628,7 @@ function doRender(data, options, reducer, level = 0, indents = []) {
         case 'AtRule':
         case 'Rule':
             if (data.typ == 'AtRule' && !('chi' in data)) {
-                return `${indent}@${data.nam} ${data.val};`;
+                return `${indent}@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val};`;
             }
             // @ts-ignore
             let children = data.chi.reduce((css, node) => {
@@ -1620,10 +1637,14 @@ function doRender(data, options, reducer, level = 0, indents = []) {
                     str = options.removeComments ? '' : node.val;
                 }
                 else if (node.typ == 'Declaration') {
+                    if (node.val.length == 0) {
+                        console.error(`invalid declaration`, node);
+                        return '';
+                    }
                     str = `${node.nam}:${options.indent}${node.val.reduce(reducer, '').trimEnd()};`;
                 }
                 else if (node.typ == 'AtRule' && !('chi' in node)) {
-                    str = `@${node.nam} ${node.val};`;
+                    str = `${data.val === '' ? '' : options.indent || ' '}${data.val};`;
                 }
                 else {
                     str = doRender(node, options, reducer, level + 1, indents);
@@ -1640,7 +1661,7 @@ function doRender(data, options, reducer, level = 0, indents = []) {
                 children = children.slice(0, -1);
             }
             if (data.typ == 'AtRule') {
-                return `@${data.nam}${data.val ? ' ' + data.val + options.indent : ''}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
+                return `@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val}${options.indent}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
             }
             return data.sel + `${options.indent}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
     }
@@ -1790,7 +1811,9 @@ function renderToken(token, options = {}) {
         case 'Delim':
             return /* options.minify && 'Pseudo-class' == token.typ && '::' == token.val.slice(0, 2) ? token.val.slice(1) :  */ token.val;
     }
-    throw new Error(`unexpected token ${JSON.stringify(token, null, 1)}`);
+    console.error(`unexpected token ${JSON.stringify(token, null, 1)}`);
+    // throw  new Error(`unexpected token ${JSON.stringify(token, null, 1)}`);
+    return '';
 }
 
 function eq(a, b) {
@@ -1996,17 +2019,6 @@ class PropertySet {
     }
 }
 
-function matchType(val, properties) {
-    if (val.typ == 'Iden' && properties.keywords.includes(val.val) ||
-        (properties.types.includes(val.typ))) {
-        return true;
-    }
-    if (val.typ == 'Number' && val.val == '0') {
-        return properties.types.some(type => type == 'Length' || type == 'Angle');
-    }
-    return false;
-}
-
 const propertiesConfig = getConfig();
 class PropertyMap {
     config;
@@ -2021,6 +2033,9 @@ class PropertyMap {
         this.pattern = config.pattern.split(/\s/);
     }
     add(declaration) {
+        for (const val of declaration.val) {
+            Object.defineProperty(val, 'propertyName', { enumerable: false, writable: true, value: declaration.nam });
+        }
         if (declaration.nam == this.config.shorthand) {
             this.declarations = new Map;
             this.declarations.set(declaration.nam, declaration);
@@ -2054,7 +2069,7 @@ class PropertyMap {
                                 i--;
                                 continue;
                             }
-                            if (matchType(acc[i], props)) {
+                            if (('propertyName' in acc[i] && acc[i].propertyName == property) || matchType(acc[i], props)) {
                                 if ('prefix' in props && props.previous != null && !(props.previous in tokens)) {
                                     return acc;
                                 }
@@ -2188,10 +2203,12 @@ class PropertyMap {
         }
         else {
             let count = 0;
+            let match;
             const separator = this.config.separator;
             const tokens = {};
             // @ts-ignore
-            /* const valid: string[] =*/ Object.entries(this.config.properties).reduce((acc, curr) => {
+            /* const valid: string[] =*/
+            Object.entries(this.config.properties).reduce((acc, curr) => {
                 if (!this.declarations.has(curr[0])) {
                     if (curr[1].required) {
                         acc.push(curr[0]);
@@ -2200,33 +2217,39 @@ class PropertyMap {
                 }
                 let current = 0;
                 const props = this.config.properties[curr[0]];
-                const declaration = this.declarations.get(curr[0]);
-                // @ts-ignore
-                for (const val of (declaration instanceof PropertySet ? [...declaration][0] : declaration).val) {
-                    if (separator != null && separator.typ == val.typ && eq(separator, val)) {
-                        current++;
-                        if (tokens[curr[0]].length == current) {
-                            tokens[curr[0]].push([]);
+                const properties = this.declarations.get(curr[0]);
+                for (const declaration of [(properties instanceof PropertySet ? [...properties][0] : properties)]) {
+                    // @ts-ignore
+                    for (const val of declaration.val) {
+                        if (separator != null && separator.typ == val.typ && eq(separator, val)) {
+                            current++;
+                            if (tokens[curr[0]].length == current) {
+                                tokens[curr[0]].push([]);
+                            }
+                            continue;
                         }
-                        continue;
-                    }
-                    if (val.typ == 'Whitespace' || val.typ == 'Comment') {
-                        continue;
-                    }
-                    if (props.multiple && props.separator != null && props.separator.typ == val.typ && eq(props.separator, val)) {
-                        continue;
-                    }
-                    if (matchType(val, curr[1])) {
-                        if (!(curr[0] in tokens)) {
-                            tokens[curr[0]] = [[]];
+                        if (val.typ == 'Whitespace' || val.typ == 'Comment') {
+                            continue;
+                        }
+                        if (props.multiple && props.separator != null && props.separator.typ == val.typ && eq(props.separator, val)) {
+                            continue;
+                        }
+                        match = matchType(val, curr[1]);
+                        if (isShorthand) {
+                            isShorthand = match;
+                        }
+                        if (('propertyName' in val && val.propertyName == property) || match) {
+                            if (!(curr[0] in tokens)) {
+                                tokens[curr[0]] = [[]];
+                            }
+                            // is default value
+                            tokens[curr[0]][current].push(val);
+                            // continue;
+                        }
+                        else {
+                            acc.push(curr[0]);
+                            break;
                         }
-                        // is default value
-                        tokens[curr[0]][current].push(val);
-                        // continue;
-                    }
-                    else {
-                        acc.push(curr[0]);
-                        break;
                     }
                 }
                 if (count == 0) {
@@ -2235,7 +2258,10 @@ class PropertyMap {
                 return acc;
             }, []);
             count++;
-            if (!Object.values(tokens).every(v => v.length == count)) {
+            if (!isShorthand || Object.entries(this.config.properties).some(entry => {
+                // missing required property
+                return entry[1].required && !(entry[0] in tokens);
+            }) || !Object.values(tokens).every(v => v.length == count)) {
                 // @ts-ignore
                 iterable = this.declarations.values();
             }
@@ -2579,7 +2605,7 @@ function minify(ast, options = {}, recursive = false) {
             // @ts-ignore
             return null;
         }
-        return { result, node1: exchanged ? node2 : node1, node2: exchanged ? node2 : node2 };
+        return { result, node1: exchanged ? node2 : node1, node2: exchanged ? node1 : node2 };
     }
     function matchSelectors(selector1, selector2, parentType) {
         let match = [[]];
@@ -2767,11 +2793,27 @@ function minify(ast, options = {}, recursive = false) {
             if (node.typ == 'AtRule' && node.nam == 'font-face') {
                 continue;
             }
-            if (node.typ == 'AtRule' && node.val == 'all') {
+            if (node.typ == 'AtRule') {
+                if (node.nam == 'media' && node.val == 'all') {
+                    // @ts-ignore
+                    ast.chi?.splice(i, 1, ...node.chi);
+                    i--;
+                    continue;
+                }
+                // console.debug({previous, node});
                 // @ts-ignore
-                ast.chi?.splice(i, 1, ...node.chi);
-                i--;
-                continue;
+                if (previous?.typ == 'AtRule' &&
+                    previous.nam == node.nam &&
+                    previous.val == node.val) {
+                    if ('chi' in node) {
+                        // @ts-ignore
+                        previous.chi.push(...node.chi);
+                    }
+                    // else {
+                    ast?.chi?.splice(i--, 1);
+                    continue;
+                    // }
+                }
             }
             // @ts-ignore
             if (node.typ == 'Rule') {
@@ -3286,10 +3328,11 @@ function* tokenize(iterator) {
         }
         buffer += quoteStr;
         while (value = peek()) {
-            if (ind >= iterator.length) {
-                yield pushToken(buffer, hasNewLine ? 'Bad-string' : 'Unclosed-string');
-                break;
-            }
+            // if (ind >= iterator.length) {
+            //
+            //     yield pushToken(buffer, hasNewLine ? 'Bad-string' : 'Unclosed-string');
+            //     break;
+            // }
             if (value == '\\') {
                 const sequence = peek(6);
                 let escapeSequence = '';
@@ -3312,7 +3355,7 @@ function* tokenize(iterator) {
                 // not hex or new line
                 // @ts-ignore
                 if (i == 1 && !isNewLine(codepoint)) {
-                    buffer += sequence[i];
+                    buffer += value + sequence[i];
                     next(2);
                     continue;
                 }
@@ -3332,11 +3375,12 @@ function* tokenize(iterator) {
                     continue;
                 }
                 // buffer += value;
-                if (ind >= iterator.length) {
-                    // drop '\\' at the end
-                    yield pushToken(buffer);
-                    break;
-                }
+                // if (ind >= iterator.length) {
+                //
+                //     // drop '\\' at the end
+                //     yield pushToken(buffer);
+                //     break;
+                // }
                 buffer += next(2);
                 continue;
             }
@@ -3505,7 +3549,7 @@ function* tokenize(iterator) {
                     buffer = '';
                     break;
                 }
-                buffer += value;
+                buffer += prev() + value;
                 break;
             case '"':
             case "'":
@@ -3707,6 +3751,7 @@ const funcLike = ['Start-parens', 'Func', 'UrlFunc', 'Pseudo-class-func'];
  * @param opt
  */
 async function parse$1(iterator, opt = {}) {
+    const startTime = performance.now();
     const errors = [];
     const options = {
         src: '',
@@ -3845,7 +3890,7 @@ async function parse$1(iterator, opt = {}) {
                                     src: options.resolve(url, options.src).absolute
                                 }));
                             });
-                            bytesIn += root.bytesIn;
+                            bytesIn += root.stats.bytesIn;
                             if (root.ast.chi.length > 0) {
                                 context.chi.push(...root.ast.chi);
                             }
@@ -3891,13 +3936,6 @@ async function parse$1(iterator, opt = {}) {
             // rule
             if (delim.typ == 'Block-start') {
                 const position = map.get(tokens[0]);
-                // if (context.typ == 'Rule') {
-                //
-                //     if (tokens[0]?.typ == 'Iden') {
-                //         errors.push({action: 'drop', message: 'invalid nesting rule', location: {src, ...position}});
-                //         return null;
-                //     }
-                // }
                 const uniq = new Map;
                 parseTokens(tokens, { minify: options.minify }).reduce((acc, curr, index, array) => {
                     if (curr.typ == 'Whitespace') {
@@ -4073,21 +4111,30 @@ async function parse$1(iterator, opt = {}) {
     if (tokens.length > 0) {
         await parseNode(tokens);
     }
+    const endParseTime = performance.now();
     if (options.minify) {
         if (ast.chi.length > 0) {
             minify(ast, options, true);
         }
     }
-    return { ast, errors, bytesIn };
+    const endTime = performance.now();
+    return {
+        ast, errors, stats: {
+            bytesIn,
+            parse: `${(endParseTime - startTime).toFixed(2)}ms`,
+            minify: `${(endTime - endParseTime).toFixed(2)}ms`,
+            total: `${(endTime - startTime).toFixed(2)}ms`
+        }
+    };
 }
 function parseString(src, options = { location: false }) {
-    return [...tokenize(src)].map(t => {
+    return parseTokens([...tokenize(src)].map(t => {
         const token = getTokenType(t.token, t.hint);
         if (options.location) {
             Object.assign(token, { loc: t.position });
         }
         return token;
-    });
+    }));
 }
 function getTokenType(val, hint) {
     if (val === '' && hint == null) {
@@ -4429,19 +4476,17 @@ function parseTokens(tokens, options = {}) {
 async function transform$1(css, options = {}) {
     options = { minify: true, removeEmpty: true, ...options };
     const startTime = performance.now();
-    const parseResult = await parse$1(css, options);
-    const renderTime = performance.now();
-    const rendered = render(parseResult.ast, options);
-    const endTime = performance.now();
-    return {
-        ...parseResult, ...rendered, stats: {
-            bytesIn: parseResult.bytesIn,
-            bytesOut: rendered.code.length,
-            parse: `${(renderTime - startTime).toFixed(2)}ms`,
-            render: `${(endTime - renderTime).toFixed(2)}ms`,
-            total: `${(endTime - startTime).toFixed(2)}ms`
-        }
-    };
+    return parse$1(css, options).then((parseResult) => {
+        const rendered = render(parseResult.ast, options);
+        return {
+            ...parseResult, ...rendered, stats: {
+                bytesOut: rendered.code.length,
+                ...parseResult.stats,
+                render: rendered.stats.total,
+                total: `${(performance.now() - startTime).toFixed(2)}ms`
+            }
+        };
+    });
 }
 
 const matchUrl = /^(https?:)?\/\//;
@@ -4586,6 +4631,7 @@ exports.isResolution = isResolution;
 exports.isTime = isTime;
 exports.isWhiteSpace = isWhiteSpace;
 exports.load = load;
+exports.matchType = matchType;
 exports.matchUrl = matchUrl;
 exports.minify = minify;
 exports.minifyRule = minifyRule;

package/dist/index.d.ts

@@ -173,6 +173,30 @@ interface AttrToken {
 }
 declare type Token = LiteralToken | IdentToken | CommaToken | ColonToken | SemiColonToken | NumberToken | AtRuleToken | PercentageToken | FunctionURLToken | FunctionToken | DimensionToken | LengthToken | AngleToken | StringToken | TimeToken | FrequencyToken | ResolutionToken | UnclosedStringToken | HashToken | BadStringToken | BlockStartToken | BlockEndToken | AttrStartToken | AttrEndToken | ParensStartToken | ParensEndToken | CDOCommentToken | BadCDOCommentToken | CommentToken | BadCommentToken | WhitespaceToken | IncludesToken | DashMatchToken | LessThanToken | GreaterThanToken | PseudoClassToken | PseudoClassFunctionToken | DelimToken | BadUrlToken | UrlToken | ImportantToken | ColorToken | AttrToken | EOFToken;
 
+interface PropertyMapType {
+    default: string[];
+    types: string[];
+    keywords: string[];
+    required?: boolean;
+    multiple?: boolean;
+    prefix?: {
+        typ: 'Literal';
+        val: string;
+    };
+    previous?: string;
+    separator?: {
+        typ: 'Comma';
+    };
+    constraints?: {
+        [key: string]: {
+            [key: string]: any;
+        };
+    };
+    mapping?: {
+        [key: string]: any;
+    };
+}
+
 interface PropertiesConfig {
     properties: PropertiesConfigProperties;
     map: Map;
@@ -487,11 +511,19 @@ interface TransformOptions extends ParserOptions, RenderOptions {
 interface ParseResult {
     ast: AstRuleStyleSheet;
     errors: ErrorDescription[];
-    bytesIn: number;
+    stats: {
+        bytesIn: number;
+        parse: string;
+        minify: string;
+        total: string;
+    }
 }
 
 interface RenderResult {
     code: string ;
+    stats: {
+        total: string;
+    }
 }
 
 interface TransformResult extends ParseResult, RenderResult {
@@ -500,6 +532,7 @@ interface TransformResult extends ParseResult, RenderResult {
         bytesIn: number;
         bytesOut: number;
         parse: string;
+        minify: string;
         render: string;
         total: string;
     }
@@ -620,6 +653,8 @@ declare function isWhiteSpace(codepoint: number): boolean;
 
 declare const getConfig: () => PropertiesConfig;
 
+declare function matchType(val: Token, properties: PropertyMapType): boolean;
+
 declare function render(data: AstNode, opt?: RenderOptions): RenderResult;
 declare function renderToken(token: Token, options?: RenderOptions): string;
 
@@ -652,4 +687,4 @@ declare function resolve(url: string, currentDirectory: string, cwd?: string): {
 declare function parse(iterator: string, opt?: ParserOptions): Promise<ParseResult>;
 declare function transform(css: string, options?: TransformOptions): Promise<TransformResult>;
 
-export { combinators, dirname, getConfig, hasDeclaration, isAngle, isAtKeyword, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isHexDigit, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, load, matchUrl, minify, minifyRule, parse, parseDimension, parseString, reduceSelector, render, renderToken, resolve, tokenize, transform, urlTokenMatcher, walk };
+export { combinators, dirname, getConfig, hasDeclaration, isAngle, isAtKeyword, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isHexDigit, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, load, matchType, matchUrl, minify, minifyRule, parse, parseDimension, parseString, reduceSelector, render, renderToken, resolve, tokenize, transform, urlTokenMatcher, walk };

package/dist/index.js

@@ -3,6 +3,7 @@ export { parseString, urlTokenMatcher } from './lib/parser/parse.js';
 export { tokenize } from './lib/parser/tokenize.js';
 export { isAngle, isAtKeyword, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isHexDigit, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, parseDimension } from './lib/parser/utils/syntax.js';
 export { getConfig } from './lib/parser/utils/config.js';
+export { matchType } from './lib/parser/utils/type.js';
 export { render, renderToken } from './lib/renderer/render.js';
 export { combinators, hasDeclaration, minify, minifyRule, reduceSelector } from './lib/ast/minify.js';
 export { walk } from './lib/ast/walk.js';

package/dist/lib/ast/minify.js

@@ -135,7 +135,7 @@ function minify(ast, options = {}, recursive = false) {
             // @ts-ignore
             return null;
         }
-        return { result, node1: exchanged ? node2 : node1, node2: exchanged ? node2 : node2 };
+        return { result, node1: exchanged ? node2 : node1, node2: exchanged ? node1 : node2 };
     }
     function matchSelectors(selector1, selector2, parentType) {
         let match = [[]];
@@ -323,11 +323,27 @@ function minify(ast, options = {}, recursive = false) {
             if (node.typ == 'AtRule' && node.nam == 'font-face') {
                 continue;
             }
-            if (node.typ == 'AtRule' && node.val == 'all') {
+            if (node.typ == 'AtRule') {
+                if (node.nam == 'media' && node.val == 'all') {
+                    // @ts-ignore
+                    ast.chi?.splice(i, 1, ...node.chi);
+                    i--;
+                    continue;
+                }
+                // console.debug({previous, node});
                 // @ts-ignore
-                ast.chi?.splice(i, 1, ...node.chi);
-                i--;
-                continue;
+                if (previous?.typ == 'AtRule' &&
+                    previous.nam == node.nam &&
+                    previous.val == node.val) {
+                    if ('chi' in node) {
+                        // @ts-ignore
+                        previous.chi.push(...node.chi);
+                    }
+                    // else {
+                    ast?.chi?.splice(i--, 1);
+                    continue;
+                    // }
+                }
             }
             // @ts-ignore
             if (node.typ == 'Rule') {

package/dist/lib/parser/declaration/map.js

@@ -1,7 +1,7 @@
 import { eq } from '../utils/eq.js';
 import { getConfig } from '../utils/config.js';
-import { renderToken } from '../../renderer/render.js';
 import { matchType } from '../utils/type.js';
+import { renderToken } from '../../renderer/render.js';
 import { parseString } from '../parse.js';
 import { PropertySet } from './set.js';
 
@@ -19,6 +19,9 @@ class PropertyMap {
         this.pattern = config.pattern.split(/\s/);
     }
     add(declaration) {
+        for (const val of declaration.val) {
+            Object.defineProperty(val, 'propertyName', { enumerable: false, writable: true, value: declaration.nam });
+        }
         if (declaration.nam == this.config.shorthand) {
             this.declarations = new Map;
             this.declarations.set(declaration.nam, declaration);
@@ -52,7 +55,7 @@ class PropertyMap {
                                 i--;
                                 continue;
                             }
-                            if (matchType(acc[i], props)) {
+                            if (('propertyName' in acc[i] && acc[i].propertyName == property) || matchType(acc[i], props)) {
                                 if ('prefix' in props && props.previous != null && !(props.previous in tokens)) {
                                     return acc;
                                 }
@@ -186,10 +189,12 @@ class PropertyMap {
         }
         else {
             let count = 0;
+            let match;
             const separator = this.config.separator;
             const tokens = {};
             // @ts-ignore
-            /* const valid: string[] =*/ Object.entries(this.config.properties).reduce((acc, curr) => {
+            /* const valid: string[] =*/
+            Object.entries(this.config.properties).reduce((acc, curr) => {
                 if (!this.declarations.has(curr[0])) {
                     if (curr[1].required) {
                         acc.push(curr[0]);
@@ -198,33 +203,39 @@ class PropertyMap {
                 }
                 let current = 0;
                 const props = this.config.properties[curr[0]];
-                const declaration = this.declarations.get(curr[0]);
-                // @ts-ignore
-                for (const val of (declaration instanceof PropertySet ? [...declaration][0] : declaration).val) {
-                    if (separator != null && separator.typ == val.typ && eq(separator, val)) {
-                        current++;
-                        if (tokens[curr[0]].length == current) {
-                            tokens[curr[0]].push([]);
+                const properties = this.declarations.get(curr[0]);
+                for (const declaration of [(properties instanceof PropertySet ? [...properties][0] : properties)]) {
+                    // @ts-ignore
+                    for (const val of declaration.val) {
+                        if (separator != null && separator.typ == val.typ && eq(separator, val)) {
+                            current++;
+                            if (tokens[curr[0]].length == current) {
+                                tokens[curr[0]].push([]);
+                            }
+                            continue;
                         }
-                        continue;
-                    }
-                    if (val.typ == 'Whitespace' || val.typ == 'Comment') {
-                        continue;
-                    }
-                    if (props.multiple && props.separator != null && props.separator.typ == val.typ && eq(props.separator, val)) {
-                        continue;
-                    }
-                    if (matchType(val, curr[1])) {
-                        if (!(curr[0] in tokens)) {
-                            tokens[curr[0]] = [[]];
+                        if (val.typ == 'Whitespace' || val.typ == 'Comment') {
+                            continue;
+                        }
+                        if (props.multiple && props.separator != null && props.separator.typ == val.typ && eq(props.separator, val)) {
+                            continue;
+                        }
+                        match = matchType(val, curr[1]);
+                        if (isShorthand) {
+                            isShorthand = match;
+                        }
+                        if (('propertyName' in val && val.propertyName == property) || match) {
+                            if (!(curr[0] in tokens)) {
+                                tokens[curr[0]] = [[]];
+                            }
+                            // is default value
+                            tokens[curr[0]][current].push(val);
+                            // continue;
+                        }
+                        else {
+                            acc.push(curr[0]);
+                            break;
                         }
-                        // is default value
-                        tokens[curr[0]][current].push(val);
-                        // continue;
-                    }
-                    else {
-                        acc.push(curr[0]);
-                        break;
                     }
                 }
                 if (count == 0) {
@@ -233,7 +244,10 @@ class PropertyMap {
                 return acc;
             }, []);
             count++;
-            if (!Object.values(tokens).every(v => v.length == count)) {
+            if (!isShorthand || Object.entries(this.config.properties).some(entry => {
+                // missing required property
+                return entry[1].required && !(entry[0] in tokens);
+            }) || !Object.values(tokens).every(v => v.length == count)) {
                 // @ts-ignore
                 iterable = this.declarations.values();
             }