opened
synchronos-t
username_0
Would it be possible to configure this to also support CSS files? We use HubL in CSS to include other files and define variables. I tried a little toying around in the package.json file, but couldn't get it to work.
Feature request: support for CSS files
issue
created
synchronos-t
username_0
Just to clarify: I wouldn't need any code completion or such, but it'd be really nice if VSCode's internal linter didn't produce errors for every HubL tag in the CSS files. Even better if there was some kind of syntax highlighting.
comment
created
julio729
username_1
Hey @username_0, did you ever find a workaround for this?
comment
created
synchronos-t
username_0
No.
comment
created
anthmatic
username_2
I've been looking into a solution for this. The internal VSCode linter is pretty rigid. It might be fairly straightforward to create a stylelint plugin, at least for in-editor linting. However, running `stylelint --fix` wouldn't work without some heavy lifting.
comment
created
anthmatic
username_2
I figured I'd document a rudimentary way to support hubl in CSS using stylelint. It simply converts HubL to CSS comments before linting. Using this method means that `--fix` will not work and I'm also not sure about performance (although, it seems fine).

- Install the [vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension
- Create a `hubl-processor.js` file with this code:
```js
module.exports = function () {
  return {
    code: function (src) {
      const OPEN_TAG_PATTERN = /{{|{%|{#/g;
      const CLOSE_TAG_PATTERN = /}}|%}|#}/g;

      let modifiedSrc = src.replace(OPEN_TAG_PATTERN, "/*");
      modifiedSrc = modifiedSrc.replace(CLOSE_TAG_PATTERN, "*/");

      return modifiedSrc;
    },
    result: function (stylelintResult) {
      return stylelintResult;
    }
  };
};

```
- create a `.stylelintrc` file that looks like 
```json
{
  "processors": ["./hubl-processor.js"],
  "extends": "stylelint-config-standard"
}
```
Note: `stylelint-config-standard` would need to be installed via NPM

![image](https://user-images.githubusercontent.com/9009552/88836225-5f2f5280-d1a4-11ea-80af-648e798075c5.png)
comment
created
anthmatic
username_2
Support for css files was added via the CSS+HUBL language in https://github.com/HubSpot/hubspot-cms-vscode/pull/73
comment
closed
anthmatic
username_2
issue