iobroker.webui 1.28.0 → 1.29.0

package/README.md

@@ -133,6 +133,9 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.29.0 (2025-05-25)
+- complexer indirect bindings
+
 ### 1.28.0 (2025-05-03)
 - update packages
 

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.28.0",
+    "version": "1.29.0",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,19 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.29.0": {
+        "en": "complexer indirect bindings",
+        "de": "komplexe indirekte bindungen",
+        "ru": "более сложные косвенные связывания",
+        "pt": "ligações indiretas mais complexas",
+        "nl": "complexere indirecte bindingen",
+        "fr": "des liaisons indirectes plus complexes",
+        "it": "leganti indiretti più complessi",
+        "es": "más complejas uniones indirectas",
+        "pl": "złożone wiązania pośrednie",
+        "uk": "складні непрямі зв'язки",
+        "zh-cn": "较复杂的间接约束"
+      },
       "1.28.0": {
         "en": "update packages",
         "de": "update-pakete",
@@ -106,19 +119,6 @@
         "pl": "escape xml\nprzełączanie na oficjalny pakiet wyboru",
         "uk": "втеча xml\nвимикач на офіційному пакеті selector",
         "zh-cn": "越狱 xml\n切换到正式选择软件包"
-      },
-      "1.25.0": {
-        "en": "fix bindings in custom controls",
-        "de": "fixe bindungen in benutzerdefinierten steuerungen",
-        "ru": "фиксации в пользовательском контроле",
-        "pt": "corrigir ligações em controles personalizados",
-        "nl": "fix bindingen in aangepaste controles",
-        "fr": "fixer les fixations dans les contrôles personnalisés",
-        "it": "fissare i binding nei controlli personalizzati",
-        "es": "fijaciones en controles personalizados",
-        "pl": "naprawić wiązania w niestandardowych kontrolach",
-        "uk": "фіксувати прив'язки в користувацьких управліннях",
-        "zh-cn": "定制控制中的固定绑定"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -44,31 +44,31 @@
   },
   "dependencies": {
     "@iobroker/adapter-core": "^3.2.3",
-    "@types/node": "^22.15.3"
+    "@types/node": "^22.15.21"
   },
   "devDependencies": {
-    "@adobe/css-tools": "4.4.2",
+    "@adobe/css-tools": "4.4.3",
     "@alcalzone/release-script": "^3.8.0",
     "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
-    "@blockly/zoom-to-fit": "^6.0.12",
+    "@blockly/zoom-to-fit": "^7.0.1",
     "@iobroker/socket-client": "^4.1.3",
     "@iobroker/testing": "^5.0.4",
-    "@iobroker/webcomponent-selectid-dialog": "^1.0.7",
+    "@iobroker/webcomponent-selectid-dialog": "^1.0.8",
     "@node-projects/base-custom-webcomponent": "0.30.0",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.3.0",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.257",
+    "@node-projects/web-component-designer": "^0.1.260",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.33",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.10",
-    "@node-projects/web-component-designer-visualization-addons": "^0.1.117",
+    "@node-projects/web-component-designer-visualization-addons": "^0.1.119",
     "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.33",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
-    "blockly": "^11.2.2",
+    "blockly": "^12.0.0",
     "chai": "^5.2.0",
     "chai-as-promised": "^8.0.1",
     "construct-style-sheets-polyfill": "^3.1.0",
@@ -76,8 +76,8 @@
     "dayjs": "^1.11.13",
     "del": "^8.0.0",
     "dock-spawn-ts": "^3.5.0",
-    "es-module-shims": "2.4.1",
-    "eslint": "^9.26.0",
+    "es-module-shims": "2.5.1",
+    "eslint": "^9.27.0",
     "esprima-next": "^6.0.3",
     "glob-stream": "^8.0.2",
     "gulp": "^5.0.0",
@@ -85,7 +85,7 @@
     "gulp-replace": "^1.1.4",
     "long": "^5.3.2",
     "mobile-drag-drop": "^3.0.0-rc.0",
-    "mocha": "^11.2.2",
+    "mocha": "^11.5.0",
     "monaco-editor": "^0.50.0",
     "nyc": "^17.1.0",
     "sinon-chai": "^4.0.0",

package/www/index.html

@@ -218,7 +218,7 @@
     </button>
     <button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
     <div style="margin-left: 30px;">
-      webui - 1.28.0 - a3c3349
+      webui - 1.29.0 - eb18062
     </div>
     <button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>

package/www/node_modules/@adobe/css-tools/dist/index.mjs

@@ -66,6 +66,90 @@ var $b2e137848b48cf4f$export$9be5dd6e61d5d73a = /*#__PURE__*/ function(CssTypes)
 }({});
 
 
+const $6d129ebf064c486f$export$82eb5486fce3d340 = 10000;
+const $6d129ebf064c486f$export$c8b95ffeec50f24a = (string, search, position)=>{
+    let currentPosition = position;
+    let maxLoop = $6d129ebf064c486f$export$82eb5486fce3d340;
+    do {
+        const all = search.map((v)=>string.indexOf(v, currentPosition));
+        all.push(string.indexOf('\\', currentPosition));
+        const foundAll = all.filter((v)=>v !== -1);
+        if (foundAll.length === 0) return -1;
+        const found = Math.min(...foundAll);
+        if (string[found] === '\\') {
+            currentPosition = found + 2;
+            maxLoop--;
+        } else return found;
+    }while (maxLoop > 0);
+    throw new Error('Too many escaping');
+};
+const $6d129ebf064c486f$export$b8d42a8583d2e477 = (string, search, position)=>{
+    let currentSearchPosition = position;
+    let maxLoop = $6d129ebf064c486f$export$82eb5486fce3d340;
+    do {
+        const all = search.map((v)=>string.indexOf(v, currentSearchPosition));
+        all.push(string.indexOf('(', currentSearchPosition));
+        all.push(string.indexOf('"', currentSearchPosition));
+        all.push(string.indexOf("'", currentSearchPosition));
+        all.push(string.indexOf('\\', currentSearchPosition));
+        const foundAll = all.filter((v)=>v !== -1);
+        if (foundAll.length === 0) return -1;
+        const firstMatchPos = Math.min(...foundAll);
+        const char = string[firstMatchPos];
+        switch(char){
+            case '\\':
+                currentSearchPosition = firstMatchPos + 2;
+                break;
+            case '(':
+                {
+                    const endPosition = $6d129ebf064c486f$export$b8d42a8583d2e477(string, [
+                        ')'
+                    ], firstMatchPos + 1);
+                    if (endPosition === -1) return -1;
+                    currentSearchPosition = endPosition + 1;
+                }
+                break;
+            case '"':
+                {
+                    const endQuotePosition = $6d129ebf064c486f$export$c8b95ffeec50f24a(string, [
+                        '"'
+                    ], firstMatchPos + 1);
+                    if (endQuotePosition === -1) return -1;
+                    currentSearchPosition = endQuotePosition + 1;
+                }
+                break;
+            case "'":
+                {
+                    const endQuotePosition = $6d129ebf064c486f$export$c8b95ffeec50f24a(string, [
+                        "'"
+                    ], firstMatchPos + 1);
+                    if (endQuotePosition === -1) return -1;
+                    currentSearchPosition = endQuotePosition + 1;
+                }
+                break;
+            default:
+                return firstMatchPos;
+        }
+        maxLoop--;
+    }while (maxLoop > 0);
+    throw new Error('Too many escaping');
+};
+const $6d129ebf064c486f$export$801dd37ac183521b = (string, search)=>{
+    const result = [];
+    let currentPosition = 0;
+    while(currentPosition < string.length){
+        const index = $6d129ebf064c486f$export$b8d42a8583d2e477(string, search, currentPosition);
+        if (index === -1) {
+            result.push(string.substring(currentPosition));
+            return result;
+        }
+        result.push(string.substring(currentPosition, index));
+        currentPosition = index + 1;
+    }
+    return result;
+};
+
+
 // http://www.w3.org/TR/CSS21/grammar.html
 // https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
 // New rule => https://www.w3.org/TR/CSS22/syndata.html#comments
@@ -126,12 +210,22 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
     /**
    * Opening brace.
    */ function open() {
-        return match(/^{\s*/);
+        const openMatch = /^{\s*/.exec(css);
+        if (openMatch) {
+            processMatch(openMatch);
+            return true;
+        }
+        return false;
     }
     /**
    * Closing brace.
    */ function close() {
-        return match(/^}/);
+        const closeMatch = /^}/.exec(css);
+        if (closeMatch) {
+            processMatch(closeMatch);
+            return true;
+        }
+        return false;
     }
     /**
    * Parse ruleset.
@@ -147,10 +241,8 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
         return rules;
     }
     /**
-   * Match `re` and return captures.
-   */ function match(re) {
-        const m = re.exec(css);
-        if (!m) return;
+   * Update position and css string. Return the matches
+   */ function processMatch(m) {
         const str = m[0];
         updatePosition(str);
         css = css.slice(str.length);
@@ -159,7 +251,8 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
     /**
    * Parse whitespace.
    */ function whitespace() {
-        match(/^\s*/);
+        const m = /^\s*/.exec(css);
+        if (m) processMatch(m);
     }
     /**
    * Parse comments;
@@ -174,92 +267,61 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    */ function comment() {
         const pos = position();
         if ('/' !== css.charAt(0) || '*' !== css.charAt(1)) return;
-        const m = match(/^\/\*[^]*?\*\//);
+        const m = /^\/\*[^]*?\*\//.exec(css);
         if (!m) return error('End of comment missing');
+        processMatch(m);
         return pos({
             type: (0, $b2e137848b48cf4f$export$9be5dd6e61d5d73a).comment,
             comment: m[0].slice(2, -2)
         });
     }
-    function findClosingParenthese(str, start, depth) {
-        let ptr = start + 1;
-        let found = false;
-        let closeParentheses = str.indexOf(')', ptr);
-        while(!found && closeParentheses !== -1){
-            const nextParentheses = str.indexOf('(', ptr);
-            if (nextParentheses !== -1 && nextParentheses < closeParentheses) {
-                const nextSearch = findClosingParenthese(str, nextParentheses + 1, depth + 1);
-                ptr = nextSearch + 1;
-                closeParentheses = str.indexOf(')', ptr);
-            } else found = true;
-        }
-        if (found && closeParentheses !== -1) return closeParentheses;
-        else return -1;
-    }
     /**
    * Parse selector.
    */ function selector() {
-        const m = match(/^([^{]+)/);
+        const m = /^([^{]+)/.exec(css);
         if (!m) return;
+        processMatch(m);
         // remove comment in selector;
-        let res = $d708735ed1303b43$var$trim(m[0]).replace($d708735ed1303b43$var$commentre, '');
-        // Optimisation: If there is no ',' no need to split or post-process (this is less costly)
-        if (res.indexOf(',') === -1) return [
-            res
-        ];
-        // Replace all the , in the parentheses by \u200C
-        let ptr = 0;
-        let startParentheses = res.indexOf('(', ptr);
-        while(startParentheses !== -1){
-            const closeParentheses = findClosingParenthese(res, startParentheses, 0);
-            if (closeParentheses === -1) break;
-            ptr = closeParentheses + 1;
-            res = res.substring(0, startParentheses) + res.substring(startParentheses, closeParentheses).replace(/,/g, '\u200C') + res.substring(closeParentheses);
-            startParentheses = res.indexOf('(', ptr);
-        }
-        // Replace all the , in ' and " by \u200C
-        res = res/**
-       * replace ',' by \u200C for data selector (div[data-lang="fr,de,us"])
-       *
-       * Examples:
-       * div[data-lang="fr,\"de,us"]
-       * div[data-lang='fr,\'de,us']
-       *
-       * Regex logic:
-       *  ("|')(?:\\\1|.)*?\1 => Handle the " and '
-       *
-       * Optimization 1:
-       * No greedy capture (see docs about the difference between .* and .*?)
-       *
-       * Optimization 2:
-       * ("|')(?:\\\1|.)*?\1 this use reference to capture group, it work faster.
-       */ .replace(/("|')(?:\\\1|.)*?\1/g, (m)=>m.replace(/,/g, '\u200C'));
-        // Split all the left , and replace all the \u200C by ,
-        return res// Split the selector by ','
-        .split(',')// Replace back \u200C by ','
-        .map((s)=>{
-            return $d708735ed1303b43$var$trim(s.replace(/\u200C/g, ','));
-        });
+        const res = $d708735ed1303b43$var$trim(m[0]).replace($d708735ed1303b43$var$commentre, '');
+        return (0, $6d129ebf064c486f$export$801dd37ac183521b)(res, [
+            ','
+        ]).map((v)=>$d708735ed1303b43$var$trim(v));
     }
     /**
    * Parse declaration.
    */ function declaration() {
         const pos = position();
         // prop
-        const propMatch = match(/^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);
+        const propMatch = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/.exec(css);
         if (!propMatch) return;
+        processMatch(propMatch);
         const propValue = $d708735ed1303b43$var$trim(propMatch[0]);
         // :
-        if (!match(/^:\s*/)) return error("property missing ':'");
+        const sepratotorMatch = /^:\s*/.exec(css);
+        if (!sepratotorMatch) return error("property missing ':'");
+        processMatch(sepratotorMatch);
         // val
-        const val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|[^)])*?\)|[^};])+)/);
+        let value = '';
+        const endValuePosition = (0, $6d129ebf064c486f$export$b8d42a8583d2e477)(css, [
+            ';',
+            '}'
+        ]);
+        if (endValuePosition !== -1) {
+            value = css.substring(0, endValuePosition);
+            const fakeMatch = [
+                value
+            ];
+            processMatch(fakeMatch);
+            value = $d708735ed1303b43$var$trim(value).replace($d708735ed1303b43$var$commentre, '');
+        }
         const ret = pos({
             type: (0, $b2e137848b48cf4f$export$9be5dd6e61d5d73a).declaration,
             property: propValue.replace($d708735ed1303b43$var$commentre, ''),
-            value: val ? $d708735ed1303b43$var$trim(val[0]).replace($d708735ed1303b43$var$commentre, '') : ''
+            value: value
         });
         // ;
-        match(/^[;\s]*/);
+        const endMatch = /^[;\s]*/.exec(css);
+        if (endMatch) processMatch(endMatch);
         return ret;
     }
     /**
@@ -283,9 +345,11 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
         let m;
         const vals = [];
         const pos = position();
-        while(m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/)){
-            vals.push(m[1]);
-            match(/^,\s*/);
+        while(m = /^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/.exec(css)){
+            const res = processMatch(m);
+            vals.push(res[1]);
+            const spacesMatch = /^,\s*/.exec(css);
+            if (spacesMatch) processMatch(spacesMatch);
         }
         if (!vals.length) return;
         return pos({
@@ -298,13 +362,13 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse keyframes.
    */ function atkeyframes() {
         const pos = position();
-        const m1 = match(/^@([-\w]+)?keyframes\s*/);
+        const m1 = /^@([-\w]+)?keyframes\s*/.exec(css);
         if (!m1) return;
-        const vendor = m1[1];
+        const vendor = processMatch(m1)[1];
         // identifier
-        const m2 = match(/^([-\w]+)\s*/);
+        const m2 = /^([-\w]+)\s*/.exec(css);
         if (!m2) return error('@keyframes missing name');
-        const name = m2[1];
+        const name = processMatch(m2)[1];
         if (!open()) return error("@keyframes missing '{'");
         let frame;
         let frames = comments();
@@ -324,9 +388,9 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse supports.
    */ function atsupports() {
         const pos = position();
-        const m = match(/^@supports *([^{]+)/);
+        const m = /^@supports *([^{]+)/.exec(css);
         if (!m) return;
-        const supports = $d708735ed1303b43$var$trim(m[1]);
+        const supports = $d708735ed1303b43$var$trim(processMatch(m)[1]);
         if (!open()) return error("@supports missing '{'");
         const style = comments().concat(rules());
         if (!close()) return error("@supports missing '}'");
@@ -340,8 +404,9 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse host.
    */ function athost() {
         const pos = position();
-        const m = match(/^@host\s*/);
+        const m = /^@host\s*/.exec(css);
         if (!m) return;
+        processMatch(m);
         if (!open()) return error("@host missing '{'");
         const style = comments().concat(rules());
         if (!close()) return error("@host missing '}'");
@@ -354,9 +419,9 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse container.
    */ function atcontainer() {
         const pos = position();
-        const m = match(/^@container *([^{]+)/);
+        const m = /^@container *([^{]+)/.exec(css);
         if (!m) return;
-        const container = $d708735ed1303b43$var$trim(m[1]);
+        const container = $d708735ed1303b43$var$trim(processMatch(m)[1]);
         if (!open()) return error("@container missing '{'");
         const style = comments().concat(rules());
         if (!close()) return error("@container missing '}'");
@@ -370,11 +435,12 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse container.
    */ function atlayer() {
         const pos = position();
-        const m = match(/^@layer *([^{;@]+)/);
+        const m = /^@layer *([^{;@]+)/.exec(css);
         if (!m) return;
-        const layer = $d708735ed1303b43$var$trim(m[1]);
+        const layer = $d708735ed1303b43$var$trim(processMatch(m)[1]);
         if (!open()) {
-            match(/^[;\s]*/);
+            const m2 = /^[;\s]*/.exec(css);
+            if (m2) processMatch(m2);
             return pos({
                 type: (0, $b2e137848b48cf4f$export$9be5dd6e61d5d73a).layer,
                 layer: layer
@@ -392,9 +458,9 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse media.
    */ function atmedia() {
         const pos = position();
-        const m = match(/^@media *([^{]+)/);
+        const m = /^@media *([^{]+)/.exec(css);
         if (!m) return;
-        const media = $d708735ed1303b43$var$trim(m[1]);
+        const media = $d708735ed1303b43$var$trim(processMatch(m)[1]);
         if (!open()) return error("@media missing '{'");
         const style = comments().concat(rules());
         if (!close()) return error("@media missing '}'");
@@ -408,20 +474,22 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse custom-media.
    */ function atcustommedia() {
         const pos = position();
-        const m = match(/^@custom-media\s+(--\S+)\s*([^{;\s][^{;]*);/);
+        const m = /^@custom-media\s+(--\S+)\s+([^{;\s][^{;]*);/.exec(css);
         if (!m) return;
+        const res = processMatch(m);
         return pos({
             type: (0, $b2e137848b48cf4f$export$9be5dd6e61d5d73a).customMedia,
-            name: $d708735ed1303b43$var$trim(m[1]),
-            media: $d708735ed1303b43$var$trim(m[2])
+            name: $d708735ed1303b43$var$trim(res[1]),
+            media: $d708735ed1303b43$var$trim(res[2])
         });
     }
     /**
    * Parse paged media.
    */ function atpage() {
         const pos = position();
-        const m = match(/^@page */);
+        const m = /^@page */.exec(css);
         if (!m) return;
+        processMatch(m);
         const sel = selector() || [];
         if (!open()) return error("@page missing '{'");
         let decls = comments();
@@ -442,10 +510,11 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse document.
    */ function atdocument() {
         const pos = position();
-        const m = match(/^@([-\w]+)?document *([^{]+)/);
+        const m = /^@([-\w]+)?document *([^{]+)/.exec(css);
         if (!m) return;
-        const vendor = $d708735ed1303b43$var$trim(m[1]);
-        const doc = $d708735ed1303b43$var$trim(m[2]);
+        const res = processMatch(m);
+        const vendor = $d708735ed1303b43$var$trim(res[1]);
+        const doc = $d708735ed1303b43$var$trim(res[2]);
         if (!open()) return error("@document missing '{'");
         const style = comments().concat(rules());
         if (!close()) return error("@document missing '}'");
@@ -460,8 +529,9 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse font-face.
    */ function atfontface() {
         const pos = position();
-        const m = match(/^@font-face\s*/);
+        const m = /^@font-face\s*/.exec(css);
         if (!m) return;
+        processMatch(m);
         if (!open()) return error("@font-face missing '{'");
         let decls = comments();
         // declarations
@@ -480,8 +550,9 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
    * Parse starting style.
    */ function atstartingstyle() {
         const pos = position();
-        const m = match(/^@starting-style\s*/);
+        const m = /^@starting-style\s*/.exec(css);
         if (!m) return;
+        processMatch(m);
         if (!open()) return error("@starting-style missing '{'");
         const style = comments().concat(rules());
         if (!close()) return error("@starting-style missing '}'");
@@ -506,12 +577,13 @@ const $d708735ed1303b43$export$98e6a39c04603d36 = (css, options)=>{
         // ^@import\s*([^;"']|("|')(?:\\\2|.)*?\2)+(;|$)
         return function() {
             const pos = position();
-            const m = match(re);
+            const m = re.exec(css);
             if (!m) return;
+            const res = processMatch(m);
             const ret = {
                 type: name
             };
-            ret[name] = m[1].trim();
+            ret[name] = res[1].trim();
             return pos(ret);
         };
     }
@@ -761,6 +833,7 @@ class $de9540138ed1fd01$var$Compiler {
    * Visit declaration node.
    */ declaration(node) {
         if (this.compress) return this.emit(node.property + ':' + node.value, node.position) + this.emit(';');
+        if (node.property === 'grid-template-areas') return this.emit(this.indent()) + this.emit(node.property + ': ' + node.value.split('\n').join('\n'.padEnd(22) + this.indent()), node.position) + this.emit(';');
         return this.emit(this.indent()) + this.emit(node.property + ': ' + node.value, node.position) + this.emit(';');
     }
 }