Emmet Integration for stylesheets

src/extensions/default/CSSCodeHints/main.js

@@ -38,6 +38,12 @@ define(function (require, exports, module) {
         CSSProperties       = require("text!CSSProperties.json"),
         properties          = JSON.parse(CSSProperties);
 
+    /**
+     * Emmet API:
+     * This provides a function to expand abbreviations into full CSS properties.
+     */
+    const EXPAND_ABBR = Phoenix.libs.Emmet.expand;
+
     require("./css-lint");
 
     const BOOSTED_PROPERTIES = [
@@ -248,7 +254,7 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Returns a list of availble CSS propertyname or -value hints if possible for the current
+     * Returns a list of available CSS property name or -value hints if possible for the current
      * editor context.
      *
      * @param {Editor} implicitChar
@@ -377,8 +383,83 @@ define(function (require, exports, module) {
                 }
             }
 
+            // pushedHints stores all the hints that will be displayed to the user
+            let pushedHints = formatHints(result);
+
+            // needle gives the current word before cursor, make sure that it exists
+            // also needle shouldn't contain `-`, because for example if user typed:
+            // `box-siz` then in that case it is very obvious that user wants to type `box-sizing`
+            // but emmet expands it `box: siz;`. So we prevent calling emmet when needle has `-`.
+            if(needle && !needle.includes('-')) {
+
+                // wrapped in try catch block because EXPAND_ABBR might throw error when it gets unexpected
+                // characters such as `, =, etc
+                try {
+                    let expandedAbbr = EXPAND_ABBR(needle, { syntax: "css", type: "stylesheet" });
+                    if(expandedAbbr && isEmmetExpandable(needle, expandedAbbr)) {
+
+                        // if the expandedAbbr doesn't have any numbers, we should split the expandedAbbr to,
+                        // get its first word before `:`.
+                        // For instance, `m` expands to `margin: ;`. Here the `: ;` is unnecessary.
+                        // Also, `bgc` expands to `background-color: #fff;`. Here we don't need the `: #fff;`
+                        // as we have cssIntelligence to display hints based on the property
+                        if(!isEmmetAbbrNumeric(expandedAbbr)) {
+                            expandedAbbr = expandedAbbr.split(':')[0];
+                        }
+
+                        // token is required for highlighting the matched part. It gives access to
+                        // stringRanges property. Refer to `formatHints()` function in this file for more detail
+                        const [token] = StringMatch.codeHintsSort(needle, [expandedAbbr]);
+
+                        // this displays an emmet icon at the side of the hint
+                        // this gives an idea to the user that the hint is coming from Emmet
+                        let $icon = $(`<span class="emmet-css-code-hint">Emmet</span>`);
+
+                        const $emmetHintObj = $("<span>")
+                            .addClass("brackets-css-hints brackets-hints")
+                            .attr("data-val", expandedAbbr);
+
+                        // for highlighting the already-typed characters
+                        if (token.stringRanges) {
+                            token.stringRanges.forEach(function (range) {
+                                if (range.matched) {
+                                    $emmetHintObj.append($("<span>")
+                                        .text(range.text)
+                                        .addClass("matched-hint"));
+                                } else {
+                                    $emmetHintObj.append(range.text);
+                                }
+                            });
+                        } else {
+                            // fallback
+                            $emmetHintObj.text(expandedAbbr);
+                        }
+
+                        // add the emmet icon to the final hint object
+                        $emmetHintObj.append($icon);
+
+                        if(pushedHints) {
+
+                            // to remove duplicate hints. one comes from emmet and other from default css hints.
+                            // we remove the default css hints and push emmet hint at the beginning.
+                            for(let i = 0; i < pushedHints.length; i++) {
+                                if(pushedHints[i][0].getAttribute('data-val') === expandedAbbr) {
+                                    pushedHints.splice(i, 1);
+                                    break;
+                                }
+                            }
+                            pushedHints.unshift($emmetHintObj);
+                        } else {
+                            pushedHints = $emmetHintObj;
+                        }
+                    }
+                } catch (e) {
+                    // pass
+                }
+            }
+
             return {
-                hints: formatHints(result),
+                hints: pushedHints,
                 match: null, // the CodeHintManager should not format the results
                 selectInitial: selectInitial,
                 handleWideResults: false
@@ -387,6 +468,34 @@ define(function (require, exports, module) {
         return null;
     };
 
+    /**
+     * Checks whether the emmet abbr should be expanded or not.
+     * For instance: EXPAND_ABBR function always expands a value passed to it.
+     * if we pass 'xyz', then there's no CSS property matching to it, but it still expands this to `xyz: ;`.
+     * So, make sure that `needle + ': ;'` doesn't add to expandedAbbr
+     *
+     * @param {String} needle the word before the cursor
+     * @param {String} expandedAbbr the expanded abbr returned by EXPAND_ABBR emmet api
+     * @returns {boolean} true if emmet should be expanded, otherwise false
+     */
+    function isEmmetExpandable(needle, expandedAbbr) {
+        return needle + ': ;' !== expandedAbbr;
+    }
+
+    /**
+     * Checks whether the expandedAbbr has any number.
+     * For instance: `m0` expands to `margin: 0;`, so we need to display the whole thing in the code hint
+     * Here, we also make sure that abbreviations which has `#`, `,` should not be included, because
+     * * `color` expands to `color: #000;` or `color: rgb(0, 0, 0)`. So this actually has numbers, but we don't want to display this.
+     *
+     * @param {String} expandedAbbr the expanded abbr returned by EXPAND_ABBR emmet api
+     * @returns {boolean} true if expandedAbbr has numbers (and doesn't include '#') otherwise false.
+     */
+    function isEmmetAbbrNumeric(expandedAbbr) {
+        return expandedAbbr.match(/\d/) !== null && !expandedAbbr.includes('#') && !expandedAbbr.includes(',');
+    }
+
+
     const HISTORY_PREFIX = "Live_hint_";
     let hintSessionId = 0, isInLiveHighlightSession = false;
 
@@ -578,6 +687,12 @@ define(function (require, exports, module) {
             this.editor.setCursorPos(newCursor);
         }
 
+        // If the current line ends with a semicolon, the CSS property is fully specified,
+        // so we don't need to continue showing hints for its value.
+        if(this.editor.getLine(start.line).trim().endsWith(';')) {
+            keepHints = false;
+        }
+
         return keepHints;
     };
 

src/extensions/default/CSSCodeHints/unittests.js

@@ -170,8 +170,8 @@ define(function (require, exports, module) {
                 testEditor.setCursorPos({ line: 6, ch: 2 });
 
                 var hintList = expectHints(CSSCodeHints.cssPropHintProvider);
-                verifyAttrHints(hintList, "background-color");  // filtered on "b" ,
-                // background color should come at top as its boosted for UX
+                verifyAttrHints(hintList, "bottom");  // filtered on "b" ,
+                // bottom should come at top as it is coming from emmet, and it has the highest priority
             });
 
             it("should list all prop-name hints starting with 'bord' ", function () {
@@ -459,7 +459,7 @@ define(function (require, exports, module) {
                 testEditor.setCursorPos({ line: 6, ch: 2 });
 
                 var hintList = expectHints(CSSCodeHints.cssPropHintProvider);
-                verifyAttrHints(hintList, "background-color");  // filtered on "b"
+                verifyAttrHints(hintList, "bottom");  // filtered on "b"
             });
 
             it("should list all prop-name hints starting with 'bord' for style value context", function () {

src/styles/brackets_patterns_override.less

@@ -709,6 +709,24 @@ a:focus {
     }
 }
 
+.emmet-css-code-hint {
+  visibility: hidden;
+}
+
+.highlight .emmet-css-code-hint {
+  visibility: visible;
+  position: absolute;
+  right: 8px;
+  font-size: 0.7em;
+  font-weight: bold;
+  margin-top: 2px;
+  letter-spacing: 0.3px;
+  color: #2ea56c !important;
+  .dark& {
+    color: #146a41 !important;
+  }
+}
+
 #codehint-desc {
 	background: @bc-codehint-desc;
 	position: absolute;