Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Potential issue with sorting #37

Open
lb- opened this issue Oct 27, 2023 · 6 comments · May be fixed by #39
Open

Potential issue with sorting #37

lb- opened this issue Oct 27, 2023 · 6 comments · May be fixed by #39
Assignees
@lb-
Labels
bug Something isn't working

Comments

@lb-
Copy link
Member

lb- commented Oct 27, 2023

I just started to resolve wagtail/wagtail#10719 and have realised that our sorting rules could be causing some issues.

When I run the stylelint formatter / fixer on the Wagtail codebase I see that it's moving all our @include mixins to the top of the selector block.

stylelint-config-wagtail/index.js

Lines 36 to 43 in b5986bb

// Mixins should always be first in declarations
'order/order': [
{
name: 'include',
type: 'at-rule',
},
'declarations',
],

From my understanding, this will actually cause a few problems where the styles will not be overridden at breakpoints.

Screenshot 2023-10-27 at 5 06 42 pm

Context of this change.

I know I merged this in but just wondering if there are some nuances for how mixins can be used that we should be allowing.
@lb-
Copy link
Member Author

lb- commented Oct 27, 2023

Maybe a more suitable rule could be

    'order/order': [
      'custom-properties',
      'dollar-variables',
      'declarations',
      'rules',
    ],

This ignores at-rules and at-variables - allowing them to be in any order but will make sure there is some predictable order in the blocks.

https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md

Another idea could be to make @apply (tailwind) appear first but then either allow other at-rules to appear anywhere.

@thibaudcolas
Copy link
Member

Indeed! This is the configuration from Torchbox for reference:

        'order/order': [
            'dollar-variables',
            'custom-properties',
            // @-rules that have no nesting.
            { type: 'at-rule', hasBlock: false },
            'declarations',
        ],

@thibaudcolas thibaudcolas added the bug Something isn't working label Nov 14, 2023
@anshikavashistha
Copy link

Kindly assign this to me .I want to work on this issue

@lb-
Copy link
Member Author

lb- commented Nov 22, 2023

This might not be a good contribution issue @anshikavashistha but thanks for your interest.

I'm still waiting on feedback for a related PR I to Wagtail that will impact the direction on this issue.

wagtail/wagtail#11151

Additionally, it's possible these rules will not work as is for Wagtail core and more investigation will be needed.

@lb- lb- self-assigned this Nov 22, 2023
@anshikavashistha
Copy link

okay sure @lb-
Definitely I understand

lb- added a commit to lb-/stylelint-config-wagtail that referenced this issue Dec 3, 2023
@lb-
Refine order/order rule to account for @media rule usage
460f67f 
- Do not be so strict with rule usage, it may make sense for blocks (e.g. @media) to be after other content
- Closes wagtail#37
lb- added a commit to lb-/stylelint-config-wagtail that referenced this issue Dec 3, 2023
@lb-
Refine order/order rule to account for @media rule usage
3c69ce2 
- Do not be so strict with rule usage, it may make sense for blocks (e.g. @media) to be after other content
- Closes wagtail#37
This was referenced Dec 3, 2023
Open
Merged
@lb-
Copy link
Member Author

lb- commented Dec 3, 2023

PR up #39

lb- added a commit to lb-/stylelint-config-wagtail that referenced this issue Dec 5, 2023
@lb-
Refine order/order rule to account for @media rule usage
3b7e45e 
- Do not be so strict with rule usage, it may make sense for blocks (e.g. @media) to be after other content
- Closes wagtail#37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lb- lb-

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Refine order/order rule to account for @media rule usage lb-/stylelint-config-wagtail
3 participants
@thibaudcolas @lb- @anshikavashistha