Fix: Incorrect ordering of rules

master-co · May 20, 2024 · 288fb54 · 288fb54
1 parent 5ecde0d
commit 288fb54
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -745,34 +745,22 @@ export default class MasterCSS {
 
                                 let i = matchEndIndex
                                 const endI = matchStartIndex
-                                matchStartIndex = undefined
+                                matchStartIndex = matchEndIndex + 1
                                 for (; i >= endI; i--) {
                                     const eachRule = this.rules[i]
                                     const eachMaxWidthFeature = eachRule.at.media?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent
                                     const eachMinWidthFeature = eachRule.at.media?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent
-                                    const eachRange = (eachMaxWidthFeature.value as number) - (eachMinWidthFeature.value as number)
-                                    if (eachRange < range) {
-                                        matchEndIndex = i - 1
-                                    } else if (eachRange === range) {
-                                        matchStartIndex = i
-                                    } else {
-                                        break
-                                    }
-                                }
-                            }
-
-                            if (matchStartIndex !== -1 && matchStartIndex !== undefined) {
-                                const range = (maxWidthFeature.value) as number - (minWidthFeature.value as number)
-                                for (let i = matchEndIndex; i >= matchStartIndex; i--) {
-                                    const eachRule = this.rules[i]
-                                    const eachMaxWidthFeature = eachRule.at.media?.find(({ name }: any) => name === 'max-width') as AtFeatureComponent
-                                    const eachMinWidthFeature = eachRule.at.media?.find(({ name }: any) => name === 'min-width') as AtFeatureComponent
-                                    const eachRange = (eachMaxWidthFeature.value as number) - (eachMinWidthFeature.value as number)
-                                    if (eachRange < range) {
-                                        matchEndIndex = i - 1
-                                    } else if (eachRange > range) {
-                                        matchStartIndex = i + 1
+                                    if (!eachMaxWidthFeature || !eachMinWidthFeature) {
                                         break
+                                    } else {
+                                        const eachRange = (eachMaxWidthFeature.value as number) - (eachMinWidthFeature.value as number)
+                                        if (eachRange < range) {
+                                            matchEndIndex = i - 1
+                                        } else if (eachRange === range) {
+                                            matchStartIndex = i
+                                        } else {
+                                            break
+                                        }
                                     }
                                 }
                             }

diff --git a/packages/core/src/rule.ts b/packages/core/src/rule.ts
@@ -272,17 +272,17 @@ export class Rule {
                                     if (atComponentToken.startsWith('<=')) {
                                         extremumOperator = '<='
                                         featureName = 'max-width'
-                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
-                                        extremumOperator = '>='
-                                        featureName = 'min-width'
-                                    } else if (atComponentToken.startsWith('>')) {
+                                    } else if (atComponentToken.startsWith('>') && !atComponentToken.startsWith('>=')) {
                                         extremumOperator = '>'
                                         featureName = 'min-width'
                                         correction = .02
                                     } else if (atComponentToken.startsWith('<')) {
                                         extremumOperator = '<'
                                         featureName = 'max-width'
                                         correction = -.02
+                                    } else if (atComponentToken.startsWith('>=') || targetQuery) {
+                                        extremumOperator = '>='
+                                        featureName = 'min-width'
                                     }
                                     const token
                                         = extremumOperator

diff --git a/packages/core/tests/rules-order.test.ts b/packages/core/tests/rules-order.test.ts
@@ -62,4 +62,20 @@ it('checks style declarations', () => {
     for (let i = 0; i < 10; i++) {
         expect(new MasterCSS().add(...shuffle([...input])).rules).toMatchObject(output)
     }
+})
+
+it('checks media order', () => {
+    const input = [
+        'min-w:206', '{flex:row}@xs', 'jc:flex-end@xs', 'hidden@tablet&<desktop', '{flex:row}@2xs&<xs'
+    ]
+    const output = [
+        { className: 'min-w:206' },
+        { className: '{flex:row}@xs' },
+        { className: 'jc:flex-end@xs' },
+        { className: 'hidden@tablet&<desktop' },
+        { className: '{flex:row}@2xs&<xs' }
+    ]
+    for (let i = 0; i < 10; i++) {
+        expect(new MasterCSS({ queries: { tablet: 391, desktop: 1025 } }).add(...shuffle([...input])).rules).toMatchObject(output)
+    }
 })