function htmlToCSSProvider(hostEditor, pos) {
        // Only provide a CSS editor when cursor is in HTML content
        if (hostEditor.getModeForSelection() !== "html") {
            return null;
        }
        
        // Only provide CSS editor if the selection is within a single line
        var sel = hostEditor.getSelection(false);
        if (sel.start.line !== sel.end.line) {
            return null;
        }
        
        // Always use the selection start for determining selector name. The pos
        // parameter is usually the selection end.        
        var selectorName = _getSelectorName(hostEditor, hostEditor.getSelection(false).start);
        if (selectorName === "") {
            return null;
        }

        var result = new $.Deferred();

        CSSUtils.findMatchingRules(selectorName, hostEditor.document)
            .done(function (rules) {
                if (rules && rules.length > 0) {
                    var cssInlineEditor = new MultiRangeInlineEditor(rules);
                    cssInlineEditor.load(hostEditor);
                    
                    result.resolve(cssInlineEditor);
                } else {
                    // No matching rules were found.
                    result.reject();
                }
            })
            .fail(function () {
                console.log("Error in findMatchingRules()");
                result.reject();
            });
        
        return result.promise();
    }
This function is registered with EditManager as an inline editor provider. It creates a CSSInlineEditor
when cursor is on an HTML tag name, class attribute, or id attribute, find associated
CSS rules and show (one/all of them) in an inline editor.

@param {!Editor} editor
@param {!{line:Number, ch:Number}} pos
@return {$.Promise} a promise that will be resolved with an InlineWidget
     or null if we're not going to provide anything.