csstools/stylelint-use-logical

Does not work with scss modules

ScorpAL opened this issue · 4 comments

ScorpAL commented

Home.module.scss

.wrapper {
    position: relative;
    inset-inline-start: 50%;
    inset-inline-end: 50%;

    display: block;

    width: 100px;
    height: 200px;
    margin: 30px 0;
    margin-inline-start: -50vw;
    margin-inline-end: -50vw;

    background-color: #ebebeb;
}

reports on .wrapper - 1:1 ✖ Unknown rule csstools/use-logical csstools/use-logical

ScorpAL commented

Sorry... wrong styling configuration on my side.

manandkumaar commented

I am getting the same error. getting this error reported on all the scss file at line no 1.

Screenshot

image

.stylelintrc

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss", "stylelint-use-logical"],
  "rules": {
    "indentation": 2,
    "string-quotes": "single",
    "no-duplicate-selectors": true,
    "color-hex-case": "lower",
    "color-hex-length": "long",
    "color-named": "never",
    "function-url-quotes": "always",
    "at-rule-no-unknown": null,
    "no-descending-specificity": null,
    "selector-type-no-unknown": true,
    "declaration-block-no-shorthand-property-overrides": null,
    "declaration-block-no-redundant-longhand-properties": true,
    "value-keyword-case": "lower",
    "selector-pseudo-element-colon-notation": "single",
    "media-query-list-comma-space-after": "always",
    "media-query-list-comma-space-before": "always",
    "csstools/use-logical": "always"
  }
}

@ScorpAL :CC

ScorpAL commented

@manandkumaar
I did not achieve what I want with stylelint-use-logical and switched to stylelint-use-logical-spec
https://github.com/Jordan-Hall/stylelint-use-logical-spec

VSCode extenstion
stylelint.vscode-stylelint https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

package.json

    "devDependencies": {
        ...
        "prettier": "^2.8.2",
        ...
        "stylelint": "^14.16.1",
        "stylelint-config-clean-order": "^2.3.0",
        "stylelint-config-prettier-scss": "0.0.1",
        "stylelint-config-standard-scss": "^6.1.0",
        "stylelint-declaration-strict-value": "^1.9.1",
        "stylelint-use-logical-spec": "^4.1.0",
        ...
    }

.stylelintrc

{
    "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order", "stylelint-config-prettier-scss"],
    "plugins": ["stylelint-use-logical-spec"],
    "rules": {
        ...
        ...
        ...
        "liberty/use-logical-spec": [
            "always",
            {
                "except": [
                    "width",
                    "max-width",
                    "min-width",
                    "height",
                    "max-height",
                    "min-height",
                    "margin",
                    "margin-top",
                    "margin-bottom",
                    "padding",
                    "padding-top",
                    "padding-bottom",
                    "top",
                    "bottom",
                    "border-top",
                    "border-bottom",
                    "border-top-color",
                    "border-bottom-color"
                ]
            }
        ]
        ...
        ...
        ...
    }
}
  • 👍1
manandkumaar commented

I found the issue. It doesn't work as i added stylelint-use-logical into extends instead of plugins. The below config works fine.

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
  "plugins": ["stylelint-use-logical"],
  "rules": {
    "indentation": 2,
    "string-quotes": "single",
    "no-duplicate-selectors": true,
    "color-hex-case": "lower",
    "color-hex-length": "long",
    "color-named": "never",
    "function-url-quotes": "always",
    "at-rule-no-unknown": null,
    "no-descending-specificity": null,
    "selector-type-no-unknown": true,
    "declaration-block-no-shorthand-property-overrides": null,
    "declaration-block-no-redundant-longhand-properties": true,
    "value-keyword-case": "lower",
    "selector-pseudo-element-colon-notation": "single",
    "media-query-list-comma-space-after": "always",
    "media-query-list-comma-space-before": "always",
    "csstools/use-logical": "always"
  }
}

Yes, stylelint-use-logical-spec supports more logical properties than stylelint-use-logical.
Thank you @ScorpAL for the input.

  • 👍1