Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not work with mixin of less

See original GitHub issue

Environment

  • VSCode Version: 1.26.1
  • OS Version: windows 7

Actual behavior

It expects that the code shoulde indent as it should be, while it didn’t indent right, as you can see below

    .sale-pro-info {
        overflow: hidden;
        padding: 16px;
        text-align: left;

        .db();

.v();

.fx(1);
    }

Expected behavior

    .sale-pro-info {
        overflow: hidden;
        padding: 16px;
        text-align: left;

        .db();
        .v();
        .fx(1);
    }

Steps to reproduce

First, install plugin of csscomb on vs code editor, then create a less file in VS Code editor, then run csscomb, and then you can see the code didn’t indent right, when I delete the configation of sort-order, then it can indent right but not sort. I have contacted the author of vscode-csscomb, and it’s looks like a bug of CSSComb, I’d like to ask for some help to resolve this .

Config

"csscomb.formatOnSave": true,
 "csscomb.preset": {
        "always-semicolon": true,
        "color-case": "lower",
        "block-indent": "    ",
        "color-shorthand": true,
        "element-case": "lower",
        "leading-zero": false,
        "quotes": "single",
        "space-before-colon": "",
        "space-after-colon": " ",
        "space-before-combinator": " ",
        "space-after-combinator": " ",
        "space-between-declarations": "\n",
        "space-before-opening-brace": " ",
        "space-after-opening-brace": "\n",
        "space-after-selector-delimiter": "\n",
        "space-before-selector-delimiter": "",
        "space-before-closing-brace": "\n",
        "tab-size": true,
        "unitless-zero": true,
        "vendor-prefix-align": true,
        "sort-order": [ [
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index",
            "display",
            "visibility",
            "-webkit-flex-direction",
            "-moz-flex-direction",
            "-ms-flex-direction",
            "-o-flex-direction",
            "flex-direction",
            "-webkit-flex-order",
            "-moz-flex-order",
            "-ms-flex-order",
            "-o-flex-order",
            "flex-order",
            "-webkit-flex-pack",
            "-moz-flex-pack",
            "-ms-flex-pack",
            "-o-flex-pack",
            "flex-pack",
            "float",
            "clear",
            "-webkit-flex-align",
            "-moz-flex-align",
            "-ms-flex-align",
            "-o-flex-align",
            "flex-align",
            "-webkit-flex",
            "-moz-flex",
            "-ms-flex",
            "-o-flex",
            "flex",
            "overflow",
            "-ms-overflow-x",
            "-ms-overflow-y",
            "overflow-x",
            "overflow-y",
            "-webkit-overflow-scrolling",
            "clip",
            "-webkit-box-sizing",
            "-moz-box-sizing",
            "box-sizing",
            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",
            "padding",
            "padding-top",
            "padding-right",
            "padding-bottom",
            "padding-left",
            "min-width",
            "min-height",
            "max-width",
            "max-height",
            "width",
            "height",
            "outline",
            "outline-width",
            "outline-style",
            "outline-color",
            "outline-offset",
            "border",
            "border-spacing",
            "border-collapse",
            "border-width",
            "border-style",
            "border-color",
            "border-top",
            "border-top-width",
            "border-top-style",
            "border-top-color",
            "border-right",
            "border-right-width",
            "border-right-style",
            "border-right-color",
            "border-bottom",
            "border-bottom-width",
            "border-bottom-style",
            "border-bottom-color",
            "border-left",
            "border-left-width",
            "border-left-style",
            "border-left-color",
            "-webkit-border-radius",
            "-moz-border-radius",
            "border-radius",
            "-webkit-border-top-left-radius",
            "-moz-border-radius-topleft",
            "border-top-left-radius",
            "-webkit-border-top-right-radius",
            "-moz-border-radius-topright",
            "border-top-right-radius",
            "-webkit-border-bottom-right-radius",
            "-moz-border-radius-bottomright",
            "border-bottom-right-radius",
            "-webkit-border-bottom-left-radius",
            "-moz-border-radius-bottomleft",
            "border-bottom-left-radius",
            "-webkit-border-image",
            "-moz-border-image",
            "-o-border-image",
            "border-image",
            "-webkit-border-image-source",
            "-moz-border-image-source",
            "-o-border-image-source",
            "border-image-source",
            "-webkit-border-image-slice",
            "-moz-border-image-slice",
            "-o-border-image-slice",
            "border-image-slice",
            "-webkit-border-image-width",
            "-moz-border-image-width",
            "-o-border-image-width",
            "border-image-width",
            "-webkit-border-image-outset",
            "-moz-border-image-outset",
            "-o-border-image-outset",
            "border-image-outset",
            "-webkit-border-image-repeat",
            "-moz-border-image-repeat",
            "-o-border-image-repeat",
            "border-image-repeat",
            "-webkit-border-top-image",
            "-moz-border-top-image",
            "-o-border-top-image",
            "border-top-image",
            "-webkit-border-right-image",
            "-moz-border-right-image",
            "-o-border-right-image",
            "border-right-image",
            "-webkit-border-bottom-image",
            "-moz-border-bottom-image",
            "-o-border-bottom-image",
            "border-bottom-image",
            "-webkit-border-left-image",
            "-moz-border-left-image",
            "-o-border-left-image",
            "border-left-image",
            "-webkit-border-corner-image",
            "-moz-border-corner-image",
            "-o-border-corner-image",
            "border-corner-image",
            "-webkit-border-top-left-image",
            "-moz-border-top-left-image",
            "-o-border-top-left-image",
            "border-top-left-image",
            "-webkit-border-top-right-image",
            "-moz-border-top-right-image",
            "-o-border-top-right-image",
            "border-top-right-image",
            "-webkit-border-bottom-right-image",
            "-moz-border-bottom-right-image",
            "-o-border-bottom-right-image",
            "border-bottom-right-image",
            "-webkit-border-bottom-left-image",
            "-moz-border-bottom-left-image",
            "-o-border-bottom-left-image",
            "border-bottom-left-image",
            "background",
            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
            "background-color",
            "background-image",
            "background-attachment",
            "background-position",
            "-ms-background-position-x",
            "-ms-background-position-y",
            "background-position-x",
            "background-position-y",
            "-webkit-background-clip",
            "-moz-background-clip",
            "background-clip",
            "background-origin",
            "-webkit-background-size",
            "-moz-background-size",
            "-o-background-size",
            "background-size",
            "background-repeat",
            "box-decoration-break",
            "-webkit-box-shadow",
            "-moz-box-shadow",
            "box-shadow",
            "color",
            "table-layout",
            "caption-side",
            "empty-cells",
            "list-style",
            "list-style-position",
            "list-style-type",
            "list-style-image",
            "quotes",
            "content",
            "counter-increment",
            "counter-reset",
            "-ms-writing-mode",
            "vertical-align",
            "text-align",
            "-webkit-text-align-last",
            "-moz-text-align-last",
            "-ms-text-align-last",
            "text-align-last",
            "text-decoration",
            "text-emphasis",
            "text-emphasis-position",
            "text-emphasis-style",
            "text-emphasis-color",
            "text-indent",
            "-ms-text-justify",
            "text-justify",
            "text-outline",
            "text-transform",
            "text-wrap",
            "-ms-text-overflow",
            "text-overflow",
            "text-overflow-ellipsis",
            "text-overflow-mode",
            "text-shadow",
            "white-space",
            "word-spacing",
            "-ms-word-wrap",
            "word-wrap",
            "-ms-word-break",
            "word-break",
            "-moz-tab-size",
            "-o-tab-size",
            "tab-size",
            "-webkit-hyphens",
            "-moz-hyphens",
            "hyphens",
            "letter-spacing",
            "font",
            "font-weight",
            "font-style",
            "font-variant",
            "font-size-adjust",
            "font-stretch",
            "font-size",
            "font-family",
            "src",
            "line-height",
            "opacity",
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
            "-ms-interpolation-mode",
            "-webkit-filter",
            "-ms-filter",
            "filter",
            "resize",
            "cursor",
            "nav-index",
            "nav-up",
            "nav-right",
            "nav-down",
            "nav-left",
            "-webkit-transition",
            "-moz-transition",
            "-ms-transition",
            "-o-transition",
            "transition",
            "-webkit-transition-delay",
            "-moz-transition-delay",
            "-ms-transition-delay",
            "-o-transition-delay",
            "transition-delay",
            "-webkit-transition-timing-function",
            "-moz-transition-timing-function",
            "-ms-transition-timing-function",
            "-o-transition-timing-function",
            "transition-timing-function",
            "-webkit-transition-duration",
            "-moz-transition-duration",
            "-ms-transition-duration",
            "-o-transition-duration",
            "transition-duration",
            "-webkit-transition-property",
            "-moz-transition-property",
            "-ms-transition-property",
            "-o-transition-property",
            "transition-property",
            "-webkit-transform",
            "-moz-transform",
            "-ms-transform",
            "-o-transform",
            "transform",
            "-webkit-transform-origin",
            "-moz-transform-origin",
            "-ms-transform-origin",
            "-o-transform-origin",
            "transform-origin",
            "-webkit-animation",
            "-moz-animation",
            "-ms-animation",
            "-o-animation",
            "animation",
            "-webkit-animation-name",
            "-moz-animation-name",
            "-ms-animation-name",
            "-o-animation-name",
            "animation-name",
            "-webkit-animation-duration",
            "-moz-animation-duration",
            "-ms-animation-duration",
            "-o-animation-duration",
            "animation-duration",
            "-webkit-animation-play-state",
            "-moz-animation-play-state",
            "-ms-animation-play-state",
            "-o-animation-play-state",
            "animation-play-state",
            "-webkit-animation-timing-function",
            "-moz-animation-timing-function",
            "-ms-animation-timing-function",
            "-o-animation-timing-function",
            "animation-timing-function",
            "-webkit-animation-delay",
            "-moz-animation-delay",
            "-ms-animation-delay",
            "-o-animation-delay",
            "animation-delay",
            "-webkit-animation-iteration-count",
            "-moz-animation-iteration-count",
            "-ms-animation-iteration-count",
            "-o-animation-iteration-count",
            "animation-iteration-count",
            "-webkit-animation-direction",
            "-moz-animation-direction",
            "-ms-animation-direction",
            "-o-animation-direction",
            "animation-direction",
            "pointer-events",
            "unicode-bidi",
            "direction",
            "-webkit-columns",
            "-moz-columns",
            "columns",
            "-webkit-column-span",
            "-moz-column-span",
            "column-span",
            "-webkit-column-width",
            "-moz-column-width",
            "column-width",
            "-webkit-column-count",
            "-moz-column-count",
            "column-count",
            "-webkit-column-fill",
            "-moz-column-fill",
            "column-fill",
            "-webkit-column-gap",
            "-moz-column-gap",
            "column-gap",
            "-webkit-column-rule",
            "-moz-column-rule",
            "column-rule",
            "-webkit-column-rule-width",
            "-moz-column-rule-width",
            "column-rule-width",
            "-webkit-column-rule-style",
            "-moz-column-rule-style",
            "column-rule-style",
            "-webkit-column-rule-color",
            "-moz-column-rule-color",
            "column-rule-color",
            "break-before",
            "break-inside",
            "break-after",
            "page-break-before",
            "page-break-inside",
            "page-break-after",
            "orphans",
            "widows",
            "-ms-zoom",
            "zoom",
            "max-zoom",
            "min-zoom",
            "user-zoom",
            "orientation"
        ] ]
    }

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
BunnyMelodycommented, May 22, 2019

No worries! If you could create a scenario where the output is not what you intended with a more minimal config that would help. For reference of a unit test see this.

@jdalton Does the code below be able to help ? For test code:

let Test = require('../../option_test');
describe('less', function() {
  it('Should indent right', function() {
    let config = {
      'sort-order': [
        "overflow",
        "padding",
        "text-align"
      ]
    };
    let test = new Test(this, config);
    return test.shouldBeEqual('sort-indent.less', 'sort-indent.expected.less');
  });
});

For sort-indent.less

/*
 * sort-indent.less
 */
.db() {
  display: flex;
}
.v() {
  vertical-align: middle;
}
.fx(1) {
  flex: 1;
}
.sale-pro-info {
  overflow: hidden;
  padding: 16px;
  text-align: left;

  .db();

.v();

.fx(1);
}

For sort-indent.expected.less:

/*
 * sort-indent.expected.less
 */
.db() {
  display: flex;
}
.v() {
  vertical-align: middle;
}
.fx(1) {
  flex: 1;
}
.sale-pro-info {
  overflow: hidden;
  padding: 16px;
  text-align: left;

  .db();
  .v();
  .fx(1);
}
1reaction
BunnyMelodycommented, Apr 19, 2019

@BunnyMelody Okay! I’ll work on a patch for the weekend.

@jdalton Thanks a lot !

Read more comments on GitHub >

github_iconTop Results From Across the Web

less mixins do not work - Stack Overflow
For now I am compiling less on live with less.js, I have tried to compile it by myself with lessc, it still does...
Read more >
Mixin LESS not working - Forums - CSS-Tricks
Hi,. When I read the docs about LESS here: http://lesscss.org/features/#mixins-feature-namespaces, I read this:
Read more >
Mixin() within .Mixin results in error · Issue #413 · less/less.js
I think parametric mixins taking no arguments should be invoked as if they were a function. .wrap and .wrap() should not be equivalent....
Read more >
How to use Mixins in LESS, a CSS Preprocessor - SitePoint
LESS is a CSS Preprocessor. In this article we look at Mixins and other programming language like functionality that it holds.
Read more >
Features In-Depth | Less.js
In Less a mixin can call itself. Such recursive mixins, when combined with Guard Expressions and Pattern Matching, can be used to create...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Sass/Scss nested rules not sorted by leftovers selector

Next page

Bug? Unhandled Promise Rejection