css completions provider

CSS completions Provider

Requirments :
1. a '.css-suggestions.vscode.js' to be present in root directory of your project. The '.css-suggestions.vscode.js' should return a JavaScript object containing the following keys as per requirment:
i. cssObject : a css Utility Object.
ii. cssFiles : a array containing relative path of various css Files which you want to use.
iii. tailwindConfigPath : the relative path of tailwing.config.js file.
iv. regex : a array containing various regex expressions which you want to use to trigger completions.
v. you can add custom description for each utility class in the following way.

Sample .css-suggestions.vscode.js :

let cssObj = require('./testUtility')
Object.entries(cssObj).map((obj)=>{
obj[1]['__description__']="add Your description here"
})
module.exports = {
    cssFiles: ["./temp.css", "./styles.css"],
    regex: ["className *= *[\"'`][^\"'`]*$"],
    tailwindConfigPath: `./tailwind.config.js`,
    cssObject: cssObj
}

Features :
The completions are generated whenever user saves the .css-suggestions.vscode.js file
This extension can provide completions in 3 ways:
i. by giving relative path of css files
ii. by using tailwind.config.js of the project
iii. by using cssObject

This extension can trigger completions in 2 ways:
i. by using default trigger characters [' ', '"', '`', "'"]. The completions are triggered whenever the regex is matched and any of these trigger characters are used.
ii. by keyboard shortcut shift+alt+5 (shift+option+5 in mac) anywhere in the document. The keyboard shortcut can be changed by File->Preferences->Key Board Shortcuts and searching for "cssCompletions.triggerIntellisense" command.

This extension also provide hovers which contain css properties of css classes.

How to build this project:
i. Clone this project and run 'npm install' to install all the required npm modules.
ii. Use 'npm run build' to build this project.
iii. To deploy it online : https://code.visualstudio.com/api/working-with-extensions/publishing-extension . Make sure to change publisher and version as per requirment and also remove tailwindcss as dependencies from package.json.

Note - to test this extension locally run the extension by keyboard shortcut (Ctrl+Shift+D) or by choosing Run option from the menu in left hand side.

Developed by : Paras Sindhwani(Product Engineering Intern (UI))
Reporting Manager : Karan Vyas.

abc