feat: css vscode language service integration

Author: abose

.brackets.json

@@ -10,7 +10,10 @@
     "defaultExtension": "js",
     "language": {
         "javascript": {
-            "linting.prefer": ["ESLint", "JSHint"],
+            "linting.prefer": [
+                "ESLint",
+                "JSHint"
+            ],
             "linting.usePreferredOnly": true
         }
     },
@@ -25,5 +28,9 @@
         }
     },
     "spaceUnits": 4,
-    "useTabChar": false
-}
+    "useTabChar": false,
+    "livePreviewUseDevServer": false,
+    "livePreviewServerURL": "",
+    "livePreviewServerProjectPath": "/",
+    "livePreviewHotReloadSupported": false
+}

.gitignore

@@ -50,6 +50,7 @@ test/thirdparty/jasmine-reporters
 /src/thirdparty/bugsnag.min.js.map
 /src/thirdparty/bugsnag-performance.min.js
 /src/thirdparty/bugsnag-performance.min.js.map
+/src/thirdparty/language-worker.js
 
 # ignore files copied from node_modules to src/thirdparty
 # https://github.com/phcode-dev/phoenix/issues/10

gulpfile.js/thirdparty-lib-copy.js

@@ -91,6 +91,10 @@ let copyThirdPartyLibs = series(
     // @phcode/fs
     copyFiles.bind(copyFiles, ['node_modules/@phcode/fs/dist/virtualfs.js',
         'node_modules/@phcode/fs/dist/virtualfs.js.map'], 'src/phoenix'),
+    // @phcode/language-support  . // replace below with language-worker-debug.js if you wanna debug
+    copyFiles.bind(copyFiles, ['node_modules/@phcode/language-support/dist/language-worker.js'],
+        'src/thirdparty/'),
+    copyLicence.bind(copyLicence, 'node_modules/@phcode/language-support/LICENSE-thirdParty', 'language-services'),
     // lessjs
     copyFiles.bind(copyFiles, ['node_modules/less/dist/less.min.js', 'node_modules/less/dist/less.min.js.map'],
         'src/thirdparty'),

package-lock.json

@@ -91,6 +91,7 @@
         "@fortawesome/fontawesome-free": "^6.1.2",
         "@highlightjs/cdn-assets": "^11.5.1",
         "@phcode/fs": "^3.0.0",
+        "@phcode/language-support": "^1.0.2",
         "@pixelbrackets/gfm-stylesheet": "^1.1.0",
         "@prettier/plugin-php": "^0.22.2",
         "@uiw/file-icons": "^1.3.2",

package.json

@@ -258,6 +258,9 @@ define(function (require, exports, module) {
         CSSUtils.getAllCssSelectorsInProject({includeClasses: true}).then(hints=>{
             const result = $.map(hints, function (pvalue) {
                 pvalue = pvalue.slice(1); // remove.
+                if(!pvalue || pvalue.includes("#") || pvalue.includes("\\") || pvalue.includes("/")){
+                    return null;
+                }
                 return  StringMatch.stringMatch(pvalue, queryStr, { preferPrefixMatches: true });
             });
             const validHints = formatHints(result);

src/extensions/default/HTMLCodeHints/main.js

@@ -37,6 +37,7 @@ define(function (require, exports, module) {
         LanguageManager     = require("language/LanguageManager"),
         ProjectManager      = require("project/ProjectManager"),
         TokenUtils          = require("utils/TokenUtils"),
+        IndexingWorker      = require("worker/IndexingWorker"),
         _                   = require("thirdparty/lodash");
 
     // Constants
@@ -1816,11 +1817,12 @@ define(function (require, exports, module) {
             return selectors;
         }
         for(let item of selectorList) {
-            if(regex.test(item.selector)){
+            if(regex.test(item) || !item.trim()){
                 // this happens for scss selectors like #${var}-something. we ignore that for now instead of resolving
                 continue;
             }
-            selectors.add(extractSelectorBase(item.selector)); // x:hover or x::some -> x
+            const extracted = extractSelectorBase(item);
+            extracted.trim() && selectors.add(extracted); // x:hover or x::some -> x
         }
         return selectors;
     }
@@ -1845,22 +1847,41 @@ define(function (require, exports, module) {
         }
     }
 
+    const MODE_MAP = {
+        css: "CSS",
+        less: "LESS",
+        scss: "SCSS"
+    };
+
     function _loadFileAndScanCSSSelectorCached(fullPath) {
         return new Promise(resolve=>{
             DocumentManager.getDocumentForPath(fullPath)
                 .done(function (doc) {
                     // Find all matching rules for the given CSS file's content, and add them to the
                     // overall search result
-                    let selectors;
+                    let selectors = new Set();
                     const cachedSelectors = CSSSelectorCache.get(fullPath);
                     if(cachedSelectors){
-                        selectors = cachedSelectors;
-                    } else {
-                        selectors = extractAllSelectors(doc.getText(), doc.getLanguage().getMode());
-                        selectors = _extractSelectorSet(selectors);
-                        CSSSelectorCache.set(fullPath, selectors);
+                        resolve(cachedSelectors);
+                        return;
+                    }
+                    const langID = doc.getLanguage().getId();
+                    if(!MODE_MAP[langID]){
+                        console.log("Cannot parse CSS for mode :", langID, "ignoring", fullPath);
+                        resolve(selectors);
+                        return;
                     }
-                    resolve(selectors);
+                    console.log("scanning file for css selector collation: ", fullPath);
+                    IndexingWorker.execPeer("css_getAllSymbols",
+                        {text: doc.getText(), cssMode: "CSS", filePath: fullPath})
+                        .then((selectorArray)=>{
+                            selectors = _extractSelectorSet(selectorArray);
+                            CSSSelectorCache.set(fullPath, selectors);
+                            resolve(selectors);
+                        }).catch(err=>{
+                            console.warn("CSS language service unable to get selectors for" + fullPath, err);
+                            resolve(selectors);  // still resolve, so the overall result doesn't reject
+                        });
                 })
                 .fail(function (error) {
                     console.warn("Unable to read " + fullPath + " during CSS selector search:", error);
@@ -1923,6 +1944,10 @@ define(function (require, exports, module) {
     }
 
     AppInit.appReady(function () {
+        if(Phoenix.isSpecRunnerWindow){
+            // no unit tests event handlers
+            return;
+        }
         ProjectManager.on(ProjectManager.EVENT_PROJECT_FILE_CHANGED, _projectFileChanged);
         ProjectManager.on(ProjectManager.EVENT_PROJECT_OPEN, ()=>{
             CSSSelectorCache.clear();

src/language/CSSUtils.js

@@ -0,0 +1,11 @@
+## vscode-css-languageservice
+The MIT License (MIT)
+Copyright (c) Microsoft
+
+## test/thirparty/chai
+MIT License
+Copyright (c) 2017 Chai.js Assertion Library
+
+## test/thirparty/mocha
+(The MIT License)
+Copyright (c) 2011-2022 OpenJS Foundation and contributors, https://openjsf.org

src/thirdparty/licences/language-services.markdown

@@ -31,6 +31,7 @@ const Phoenix = {
 importScripts('../phoenix/virtualfs.js');
 importScripts('../utils/EventDispatcher.js');
 importScripts('./WorkerComm.js');
+importScripts('./language-service-worker-thread.js');
 
 virtualfs.debugMode = debugMode;
 

src/worker/file-Indexing-Worker-thread.js

@@ -0,0 +1,35 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ * Original work Copyright (c) 2015 - 2021 Adobe Systems Incorporated. All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/*global virtualfs, fs, WorkerComm, CSSLanguageService */
+
+importScripts('../thirdparty/language-worker.js');
+
+(function () {
+    function getAllSymbols({text, cssMode, filePath}) {
+        if(!CSSLanguageService.CSS_MODES[cssMode]) {
+            throw new Error("Language mode not supported "+ cssMode);
+        }
+        return CSSLanguageService.getAllSymbols(text, cssMode, filePath);
+    }
+
+    WorkerComm.setExecHandler("css_getAllSymbols", getAllSymbols);
+}());