[Feature Request] Please fork and upgrade VSCode CSSComb extension

[gusbemacbe]

Good morning, @calculuschild!

I saw you forked and upgraded CSSComb library and installed it via the command pnpm i -g calculuschild/csscomb.js. I was pleased to see that it worked very well.

Of course that you want to pull request your new commits into that original repository, but the repository authors no longer answer.

However, @mrmlnc archived and discontinued https://github.com/mrmlnc/vscode-csscomb. Please, can you fork and upgrade, so I would be able to use this extension to format my CSS files at VSCode?

Thank you so much!

[calculuschild]

Hi there! I have unfortunately run into some other problems with CSSComb and don't plan to continue working on it. The underlying AST generator, Gonzales-PE, is very out-of-date and has several bugs that would require drastic rewrites.

Instead, I have decided to use StyleLint, which can do everything CSSComb does. It also has a VSCode plugin that works very well. I would recommend you also take a look at StyleLint.

[gusbemacbe]

Instead, I have decided to use StyleLint, which can do everything CSSComb does. It also has a VSCode plugin that works very well. I would recommend you also take a look at StyleLint.

I have already tried it yesterday. Styleint offers the support for the plugin to sort alphabetically the element properties, but no longer supports the depreciated style formatting configurations, nor aligning the CSS vendor prefixes or the Allman style.

I also tried ESLint, JS Beautify, Prettier, and PostCSS. ESLint and JS Beautify support only the Allman style, Prettier does not support any of these three options, and PostCSS supports only the CSS vendor prefixes alignment.

As you are using Styleint, if you know to use Allman style, to sort CSS element properties alphabetically, and to align the CSS vendor prefixes, please let me know.

CSSComb is the only that supports all these three options.

[calculuschild]

...no longer supports the depreciated style formatting configurations

You can still use the style formatting options by getting this package: https://www.npmjs.com/package/stylelint-stylistic

Allman style

Stylelint-stylistic has the option to place your curly braces as you want. For example if you use the option stylistic/block-opening-brace-newline-after

...sort CSS element properties alphabetically

Get this plugin package: https://github.com/hudochenkov/stylelint-order

...align the CSS vendor prefixes

I haven't found a plugin that does this, but it's not too hard to write your own. You can also try using this plugin so you don't need vendor prefixes: https://www.npmjs.com/package/autoprefixer

[calculuschild]

@gusbemacbe could probably make a plugin to align the vendor prefix if you can't figure it out. But I would want to know you got the rest working before I start on it.

[gusbemacbe]

As I have ended my job journey now, I am going to test it and report it to you.

[gusbemacbe]

It does not work yet. Allman's style and vendor prefix alignment did not give effect. My .stylelintrc looks like:

{
  "extends": 
  [
    "autoprefixer",
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-order",
    "stylelint-stylistic/config"
  ],
  "plugins": 
  [
    "stylelint-order"
  ],
  "rules":
  {
    "order/order": 
    [
      "custom-properties",
      "declarations"
    ],
    "stylistic/block-opening-brace-newline-before": "always",
    "stylistic/block-opening-brace-newline-after": "always"
  }
}

[calculuschild]

Here's mine; you may need to change yours a bit. In particular it looks like you forgot to add stylelint-stylistic to your plugins array. Also note that autoprefixer is not a stylelint plugin, so it won't work here. Instead, it is a PostCSS plugin. It does not align vendor prefixes, but instead makes it so you no longer need vendor prefixes at all, because if you set up PostCSS it will add them automatically for you in your bundled project. If you want to keep using vendor prefixes, you can make your own stylelint plugin to do the alignment.

{
    "extends": [
      "stylelint-config-recess-order",
      "stylelint-config-recommended"],
    "plugins": [
      "stylelint-stylistic",
    ],
    "customSyntax": "postcss-less",
    "rules": {
      "no-descending-specificity"                                : null,
      "at-rule-no-unknown"                                       : null,
      "function-no-unknown"                                      : null,
      "font-family-no-missing-generic-family-keyword"            : null,
      "font-weight-notation"                                     : "named-where-possible",
      "font-family-name-quotes"                                  : "always-unless-keyword",
      "stylistic/indentation"                                    : "tab",
      "no-duplicate-selectors"                                   : true,
      "stylistic/color-hex-case"                                 : "upper",
      "color-hex-length"                                         : "long",
      "stylistic/selector-combinator-space-after"                : "always",
      "stylistic/selector-combinator-space-before"               : "always",
      "stylistic/selector-attribute-operator-space-before"       : "never",
      "stylistic/selector-attribute-operator-space-after"        : "never",
      "stylistic/selector-attribute-brackets-space-inside"       : "never",
      "selector-attribute-quotes"                                : "always",
      "selector-pseudo-element-colon-notation"                   : "double",
      "stylistic/selector-pseudo-class-parentheses-space-inside" : "never",
      "stylistic/block-opening-brace-space-before"               : "always",
      "stylistic/declaration-block-trailing-semicolon"           : "always",
      "stylistic/declaration-colon-space-after"                  : "always",
      "stylistic/number-leading-zero"                            : "always",
      "function-url-quotes"                                      : ["always", { "except": ["empty"] }],
      "function-url-scheme-disallowed-list"                      : ["data","http"],
      "comment-whitespace-inside"                                : "always",
      "stylistic/string-quotes"                                  : "single",
      "stylistic/media-feature-range-operator-space-before"      : "always",
      "stylistic/media-feature-range-operator-space-after"       : "always",
      "stylistic/media-feature-parentheses-space-inside"         : "never",
      "stylistic/media-feature-colon-space-before"               : "always",
      "stylistic/media-feature-colon-space-after"                : "always"
    }
}

[gusbemacbe]

Your configuration file worked, but the Allman style did not give effect.

I tried to make my own CSS vendor prefixes alignment plugin for more than eight different forms, but it wasn't successful.

[calculuschild]

Note that my configuration file does not use Allman style. Did you make sure to add the correct rules?

[gusbemacbe]

I apologise for my absence.

I have been attempting to build a CSS vendor prefixes alignment plugin, but written in Python, and it worked.

As for the Allman style setting in the .stylelintrc, it worked, but it ended up adding a space before an opening bracket with a new line. Here is the result:

body
 {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #FFFFFF;
  background-color: #000000;

  h1
 {
    margin-bottom: 0.5em;
    font-size: 2em;
    line-height: 1.25;

    a
 {
      color: #FFFFFF;
      text-decoration: none;
    }
  }
}

I think that it is better to stick with your upgraded version of CSSComb that is less complicated than Stylelint.

If you would like to see my CSS vendor prefixes alignment and Allman style (it worked only partially) written in Python, follow:

• CSS vendor prefix alignment:

  import re
  
  vendor_prefixes = {
     "-webkit-": "",
     "-moz-": "   ",
     "-ms-": "    ",
     "-o-": "     ",
  }
  
  # CSS or SCSS code example
  css_code = """
  .element-01 {
  color: burlywood;
  border: 1px solid salmon;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  }
  
  .element-02 {
  color: burlywood;
  border: 1px solid salmon;
  -webkit-filter: 10px;
  -moz-filter: 10px;
  -ms-filter: 10px;
  -o-filter: 10px;
  filter: 10px;
  }
  """
  
  def format(code):
     for prefix, indentation in vendor_prefixes.items():
        code = re.sub(r'(?<=[\s;])' + re.escape(prefix), indentation + prefix, code)
     code = re.sub(r'(?<=[\s;])' + r'(?=filter|transition)', "        ", code)
     return code
  
  print(format(css_code))

• Allman style:

  import re
     
  # CSS or SCSS code example
  css_code = """
  body {
  background-color: #000000;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  
  h1 {
     font-size: 2em;
     line-height: 1.25;
     margin-bottom: 0.5em;
  
     a {
        color: #ffffff;
        text-decoration: none;
     }
  }
  
  .element {
     background-color: #ffffff;
     border: 1px solid #000000;
     color: #000000;
     display: block;
  
     &::before {
        content: "";
        display: block;
     }
  }
  
  &.element--modifier {
     background-color: #000000;
     color: #ffffff;
  }
  
  &::before {
     content: "";
     display: block;
  }
  }
  """
  
  def format(code):
     code = re.sub(r'()' + r'(.*)' + r'\s(\{)', r"\1" + r"\2" + r"\n\1\3", code)
     code = re.sub(r'(  )' + r'(.*)' + r'\s(\{)', r"\1" + r"\2" + r"\n\1\3", code)
     code = re.sub(r'(    )' + r'(.*)' + r'\s(\{)', r"\1" + r"\2" + r"\n\1\3", code)
     return print(code)
  
  format(css_code)