Show at-rules and related refactor

Author: lahmatiy

src/syntax/prepare.js

@@ -5,7 +5,7 @@ const functionSyntaxes = new WeakMap();
 const { definitionSyntax } = csstree;
 
 function syntaxName(syntax) {
-    const { type, name } = syntax || {};
+    const { type, name, parent } = syntax || {};
 
     switch (type) {
         case 'Property':
@@ -17,6 +17,15 @@ function syntaxName(syntax) {
         case 'Function':
             return name + '()';
 
+        case 'Atrule':
+            return '@' + name;
+
+        case 'AtrulePrelude':
+            return '@' + name + ':prelude';
+
+        case 'AtruleDescriptor':
+            return '@' + parent + '/' + name;
+
         default:
             return name;
     }
@@ -133,7 +142,14 @@ function collectUsage(type, dict, defaultSyntax) {
         visited[type + ':' + name] = true;
         host = dict[name];
         hostStack.push(host);
-        processDescriptor(host);
+        if (type === 'Atrule') {
+            processDescriptor(host.prelude);
+            for (let descriptor in host.discriptors) {
+                processDescriptor(host.descriptors[descriptor]);
+            }
+        } else {
+            processDescriptor(host);
+        }
         hostStack.pop();
     }
 }
@@ -185,10 +201,25 @@ function syntaxRefs(syntax, typeDict, globalDict) {
 }
 
 discovery.setPrepare(function(data, { defineObjectMarker, addQueryHelpers }) {
-    const { properties, types } = csstree.lexer;
+    const { properties, types, atrules } = csstree.lexer;
     const functions = Object.create(null);
-    const typeOrder = ['Property', 'Type', 'Function'];
+    const typeOrder = ['Atrule', 'AtrulePrelude', 'AtruleDescriptor', 'Property', 'Type', 'Function'];
     const typeDict = {
+        Atrule: atrules,
+        AtrulePrelude: Object.fromEntries(
+            Object.entries(atrules)
+                .map(([key, { prelude }]) => prelude && [key, prelude])
+                .filter(Boolean)
+        ),
+        AtruleDescriptor: Object.fromEntries(
+            Object.entries(atrules).reduce(
+                (res, [key, { descriptors }]) =>
+                    descriptors
+                        ? res.concat(Object.entries(descriptors).map(([name, value]) => [key + '/' + name, value]))
+                        : res,
+                []
+            )
+        ),
         Property: properties,
         Type: types,
         Function: functions
@@ -206,19 +237,15 @@ discovery.setPrepare(function(data, { defineObjectMarker, addQueryHelpers }) {
 
     csstree.lexer.validate();
     csstree.lexer.functions = functions;
+    collectUsage('Atrule', atrules, csstree.lexer);
     collectUsage('Property', properties, csstree.lexer);
     collectUsage('Type', types, csstree.lexer);
 
-    data.dict = [
-        ...Object.values(properties),
-        ...Object.values(types),
-        ...Object.values(functions)
-    ];
-
-    data.dict.forEach(item => {
+    data.dict = [].concat(...Object.values(typeDict).map(dict => Object.values(dict)));
+    for (const item of data.dict) {
         item.refs = syntaxRefs(item.syntax, typeDict, data.dict);
         markers[item.type](item);
-    });
+    }
 
     addQueryHelpers({
         formatName: syntaxName,
@@ -227,10 +254,22 @@ discovery.setPrepare(function(data, { defineObjectMarker, addQueryHelpers }) {
 
             return idx !== -1 ? idx : Infinity;
         },
+        isProblem: discovery.queryFn('(no match and type != "Atrule") or refs.resolved.[no match]'),
         mdn(current) {
             if (current) {
-                if (current.type === 'Property' || current.type === 'Type') {
-                    return data.mdn[current.type === 'Property' ? 'properties' : 'syntaxes'][current.name] || null;
+                switch (current.type) {
+                    case 'Atrule':
+                    case 'AtrulePrelude':
+                        return data.mdn.atRules['@' + current.name] || null;
+
+                    case 'AtruleDescriptor': {
+                        const atrule = data.mdn.atRules['@' + current.parent];
+                        return (atrule && atrule.descriptors && atrule.descriptors[current.name]) || null;
+                    }
+
+                    case 'Property':
+                    case 'Type':
+                        return data.mdn[current.type === 'Property' ? 'properties' : 'syntaxes'][current.name] || null;
                 }
             }
             return null;

src/syntax/ui/page/default.js

@@ -21,7 +21,7 @@ discovery.page.define('default', [
             { title: 'Properties', query: 'dict.[type="Property"]' },
             { title: 'Types', query: 'dict.[type="Type"]' },
             { title: 'Functions', query: 'dict.[type="Function"]' },
-            { title: 'Problems', query: 'dict.[no match or refs.resolved.[no match]]', href: '#problems' }
+            { title: 'Problems', query: 'dict.[isProblem()]', href: '#problems' }
         ],
         content: {
             view: 'inline-list',

src/syntax/ui/page/problems.js

@@ -10,15 +10,14 @@ discovery.page.define('problems', [
         emptyText: 'No problems',
         data: `
             dict
-                .[no match or refs.resolved.[no match]]
-                .[no #.type or type=#.type]
-                .sort(<[match?1:0, type.typeSorting(), name]>)
+                .[isProblem()]
+                .sort(match desc, type.typeSorting() asc, name asc)
         `,
         itemConfig: {
             className: data => !data.match ? 'missed' : ''
         },
         item: [
-            'auto-link',
+            'auto-link{ fallback: "text:formatName()" }',
             'text:" = "',
             {
                 view: 'switch',

src/syntax/ui/page/syntax-page.css

@@ -1,3 +1,6 @@
+.page-Atrule .view-alert-danger,
+.page-AtrulePrelude .view-alert-danger,
+.page-AtruleDescriptor .view-alert-danger,
 .page-Property .view-alert-danger,
 .page-Type .view-alert-danger,
 .page-Function .view-alert-danger {
@@ -6,6 +9,9 @@
     white-space: pre-wrap;
 }
 
+.page-Atrule > *,
+.page-AtrulePrelude > *,
+.page-AtruleDescriptor > *,
 .page-Property > *,
 .page-Type > *,
 .page-Function > * {
@@ -34,6 +40,9 @@
     display: block;
 }
 
+.page-Atrule .view-header .view-badge,
+.page-AtrulePrelude .view-header .view-badge,
+.page-AtruleDescriptor .view-header .view-badge,
 .page-Property .view-header .view-badge,
 .page-Type .view-header .view-badge,
 .page-Function .view-header .view-badge {
@@ -70,3 +79,6 @@
 .syntax-section .view-tab.active {
     padding-bottom: 5px;
 }
+.descriptor-table td:first-child {
+    white-space: nowrap;
+}

src/syntax/ui/page/syntax-page.js

@@ -2,7 +2,7 @@
 
 const page = {
     view: 'context',
-    data: 'dict.pick(<type=#.page and name=#.id>)',
+    data: 'dict[=>type=#.page and name=#.id]',
     content: [
         {
             view: 'page-header',
@@ -11,7 +11,7 @@ const page = {
         },
         {
             view: 'alert-danger',
-            when: 'no match',
+            when: 'no match and type != "Atrule"',
             content: 'text:"Syntax definition is missed"'
         },
         'syntax-test',
@@ -85,19 +85,53 @@ const page = {
                 }
             ]
         },
+        {
+            view: 'context',
+            when: 'type = "Atrule"',
+            content: [
+                {
+                    view: 'context',
+                    when: 'prelude',
+                    content: [
+                        'h3:"Prelude"',
+                        'syntax:prelude'
+                    ]
+                },
+                {
+                    view: 'context',
+                    when: 'descriptors',
+                    content: [
+                        'h3:"Descriptors"',
+                        {
+                            view: 'table',
+                            className: 'descriptor-table',
+                            data: 'descriptors.values()',
+                            cols: [
+                                { header: 'Name', content: ['auto-link{ content: "text:entity.name" }'] },
+                                { header: 'Syntax', content: 'syntax' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
         {
             view: 'match-graph',
             when: 'match',
             data: 'match'
         },
         {
             view: 'section',
+            when: 'not type ~= /^Atrule/',
             header: 'text:"Used by"',
             content: 'used-by'
         }
     ]
 };
 
+discovery.page.define('Atrule',   page);
+discovery.page.define('AtruleDescriptor', page);
+discovery.page.define('AtrulePrelude', page);
 discovery.page.define('Property', page);
 discovery.page.define('Type',     page);
 discovery.page.define('Function', page);

src/syntax/ui/sidebar.css

@@ -2,12 +2,16 @@
     width: 300px;
 }
 
+.discovery-sidebar .nested {
+    padding-left: 20px;
+}
+
 .discovery-sidebar .variants {
     color: #888;
 }
 
-.discovery-sidebar .missed {
-    color: #a00;
+.discovery-sidebar .missed .view-link:first-child {
+    color: #d00;
     text-decoration-color: #a008;
 }
 

src/syntax/ui/sidebar.js

@@ -5,16 +5,22 @@ discovery.view.define('sidebar', {
     content: {
         view: 'list',
         data: `
-            dict.[no #.filter or name~=#.filter]
+            dict.[
+                type not in ["AtrulePrelude", "AtruleDescriptor"]
+                and (name~=#.filter or descriptors.values().name~=#.filter)
+            ]
             .group(=>type)
             .(
                 // prepare items
                 $items: value.({
                     type,
                     name,
+                    parent,
+                    nested: type = "Atrule" ? descriptors.values() : null,
                     syntax,
-                    missed: no match ,
-                    brokenRefs: refs.resolved.[no match]
+                    missed: no match and type != 'Atrule',
+                    brokenRefs: (type != "Atrule" ? $ : (descriptors.values() or []) + (prelude or []))
+                        .refs.resolved.[no match]
                 }).sort(=>name);
 
                 // section info
@@ -44,10 +50,12 @@ discovery.view.define('sidebar', {
             content: {
                 view: 'list',
                 data: 'items',
+                itemConfig: {
+                    className: data => data.missed ? 'missed' : ''
+                },
                 item: [
                     {
                         view: 'auto-link',
-                        className: data => data.missed ? 'missed' : '',
                         content: 'text-match:{ text, match: #.filter }'
                     },
                     {
@@ -64,14 +72,22 @@ discovery.view.define('sidebar', {
                     {
                         view: 'badge',
                         className: 'patched-badge',
-                        when: 'type != "Function" and no mdn()',
+                        when: 'type != "Function" and no mdn() and no missed',
                         data: '{ text: "added" }'
                     },
                     {
                         view: 'pill-badge',
                         className: 'danger-badge',
                         when: 'brokenRefs',
                         data: '{ text: brokenRefs.size() }'
+                    },
+                    {
+                        view: 'list',
+                        className: 'nested',
+                        when: '#.filter',
+                        data: 'nested.[name~=#.filter]',
+                        whenData: true,
+                        item: 'auto-link{ content: "text-match:{ text: entity.name, match: #.filter }" }'
                     }
                 ]
             }

src/syntax/ui/view/syntax.js

@@ -14,7 +14,6 @@ function markupSyntax(syntax, match) {
             const error = !entityDescriptor || !entityDescriptor.object.match;
 
             str = `<a href="#${node.type}:${node.name}"${error ? ' class="error"' : ''}>${escapeHtml(str)}</a>`;
-
         }
 
         if (match && match.type === node.type && match.name === node.name) {