Add option to override a rule's position, enabling us to move it before another rule

Author: zakkor

src/debug.js

@@ -0,0 +1,13 @@
+export function classesInRange(byClassname, start, end) {
+  return Object.entries(byClassname).filter((_, i) => i >= start && i <= end);
+}
+
+export function classesByName(byClassname, ...names) {
+  return Object.entries(byClassname).find(([key]) => {
+    for (const name of names) {
+      if (key.includes(name)) {
+        return true;
+      }
+    }
+  });
+}

src/plugins.js

@@ -61,7 +61,13 @@ export function classnameByProperties(cfg) {
   return byProperties;
 }
 
-export function loadPlugin(cfg, name, load) {
+export function loadPlugin(cfg, plugin, load) {
+  let name = plugin;
+  let overrides = [];
+  if (typeof plugin === 'object') {
+    name = plugin.name;
+    overrides = plugin.overrides;
+  }
   if (!(name in plugins)) {
     throw new Error(`plugin '${name}' doesn't exist`);
   }
@@ -89,7 +95,7 @@ export function loadPlugin(cfg, name, load) {
           calculatedRules[classname] = properties;
         }
       }
-      loadPluginRules(calculatedRules, load);
+      loadPluginRules(calculatedRules, overrides, load);
     },
     addUtilities: (rules) => {
       let source = rules;
@@ -105,7 +111,7 @@ export function loadPlugin(cfg, name, load) {
           source = rules[0];
         }
       }
-      loadPluginRules(source, load);
+      loadPluginRules(source, overrides, load);
     },
     theme: themeForConfig(cfg),
     variants: () => {},
@@ -116,8 +122,21 @@ export function loadPlugin(cfg, name, load) {
   });
 }
 
-function loadPluginRules(rules, load) {
-  Object.entries(rules).forEach(([classname, properties]) => {
+function loadPluginRules(rules, overrides, load) {
+  let entries = Object.entries(rules);
+
+  if (overrides.length > 0) {
+    for (const ovr of overrides) {
+      const ruleIdx = entries.findIndex(([classname]) => classname === '.' + ovr.rule);
+      const [kind, destRule] = ovr.place;
+      const destIdx = entries.findIndex(([classname]) => classname === '.' + destRule);
+      if (kind === 'before') {
+        arrayMove(entries, ruleIdx, destIdx);
+      }
+    }
+  }
+
+  entries.forEach(([classname, properties]) => {
     // `space-{}` classnames contain the full CSS selector, which is like `.space-y-150 > :not([hidden]) ~ :not([hidden])`
     // but we only want the first part, so copy everything until the first space.
     let spaceIdx = classname.indexOf(' ');
@@ -156,3 +175,13 @@ function themeForConfig(cfg) {
 function getConfigValue(cfg, path, defaultValue) {
   return path ? get(cfg, path, defaultValue) : cfg;
 }
+
+function arrayMove(arr, oldIndex, newIndex) {
+  if (newIndex >= arr.length) {
+    let k = newIndex - arr.length + 1;
+    while (k--) {
+      arr.push(undefined);
+    }
+  }
+  arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
+}

src/sort.js

@@ -2,139 +2,66 @@
 export const variants = ['hover'].map((v) => `(${v}:)?`).join('');
 
 export let order = [
-  // Utils
   'container',
-
-  // Position
   'position',
-
-  // Z-Index
   'zIndex',
-
-  // Display
-  'display',
-
-  // Visibility
+  { name: 'display', overrides: [{ rule: 'hidden', place: ['before', 'block'] }] },
   'visibility',
-
-  // Pointer Events
   'pointerEvents',
-
-  // Flex Direction
-  'flexDirection',
-  // Flex Wrap
+  { name: 'flexDirection', overrides: [{ rule: 'flex-col', place: ['before', 'flex-row'] }] },
   'flexWrap',
-  // Flex Grow
   'flexGrow',
-  // Flex Shrink
   'flexShrink',
-
-  // Grid Auto Flow
   'gridAutoFlow',
-  // Grid Template Columns
   'gridTemplateColumns',
-  // Grid Auto Columns
   'gridAutoColumns',
-  // Grid Column Start / End
   'gridColumn',
   'gridColumnStart',
   'gridColumnEnd',
-
-  // Grid Template Rows
   'gridTemplateRows',
-  // Grid Auto Rows
   'gridAutoRows',
-  // Grid Row Start / End
   'gridRow',
   'gridRowStart',
   'gridRowEnd',
-
-  // Order
   'order',
-
-  // Justify Content
   'justifyContent',
-  // Justify Items
   'justifyItems',
-  // Justify Self
   'justifySelf',
-  // Align Content
   'alignContent',
-  // Align Items
   'alignItems',
-  // Align Self
   'alignSelf',
-  // Place Content
   'placeContent',
-  // Place Items
   'placeItems',
-  // Place Self
   'placeSelf',
-
-  // Object Fit
   'objectFit',
-  // Object Position
   'objectPosition',
-
-  // Overflow
   'overflow',
-
-  // Overscroll Behavior
   'overscrollBehavior',
-
-  // Inset, Top / Bottom / Left / Right
   'inset',
-
-  // Size
   'width',
   'minWidth',
   'maxWidth',
   'height',
   'minHeight',
   'maxHeight',
-
-  // Cursor
   'cursor',
-
-  // Text Alignment
   'textAlign',
-  // Vertical Alignment
   'verticalAlign',
-
-  // List Style Type
   'listStyleType',
-
-  // Text Transform
   'textTransform',
-  // Font Style
   'fontStyle',
-  // Text Decoration
   'textDecoration',
-  // Font Weight, Size, Color
   'fontWeight',
   'fontSize',
   'textColor',
-  // Text Opacity
   'textOpacity',
-  // Letter Spacing
   'letterSpacing',
-  // Line Height
   'lineHeight',
-
-  // Text Overflow
   'textOverflow',
-
-  // Whitespace
   'whitespace',
-  // Word Break
   'wordBreak',
-
-  // Placeholder Color
   'placeholderColor',
-  // Placeholder Opacity
   'placeholderOpacity',
-
-  // Background
   'backgroundPosition',
   'backgroundRepeat',
   'backgroundSize',
@@ -145,63 +72,33 @@ export let order = [
   'backgroundAttachment',
   'backgroundBlendMode',
   'backgroundClip',
-
-  // Opacity
   'opacity',
-
-  // Box Shadow
   'boxShadow',
-
-  // Border
   'borderStyle',
   'borderWidth',
   'borderColor',
   'borderOpacity',
   'borderRadius',
   'borderCollapse',
-
-  // Outline
   'outline',
-
-  // Ring
   'ringWidth',
   'ringOpacity',
   'ringOffsetWidth',
-
-  // Transform
   'transform',
-  // Transform Origin
   'transformOrigin',
-  // Scale
   'scale',
-  // Rotate
   'rotate',
-  // Translate
   'translate',
-  // Skew
   'skew',
-
-  // Transition Property
   'transitionProperty',
   'transitionDuration',
   'transitionDelay',
   'transitionTimingFunction',
-  // Animation
   'animation',
-
-  // Box Sizing
   'boxSizing',
-
-  // Padding
   'padding',
-
-  // Spacing
   'space',
-
-  // Gap
   'gap',
-
-  // Margin
   'margin',
 ];
 

test/sort.js

@@ -14,5 +14,10 @@ s('sorts', () => {
   assert.equal(sort('mt-4 relative'), 'relative mt-4');
   assert.equal(sort('xl:mt-8 mt-4 relative'), 'relative mt-4 xl:mt-8');
   assert.equal(sort('space-x-8 xl:mt-8 mt-4 relative'), 'relative space-x-8 mt-4 xl:mt-8');
+  assert.equal(
+    sort('hidden lg:block text-base leading-none text-neutrals-l00 ml-6 mr-4'),
+    'hidden lg:block text-base text-neutrals-l00 leading-none mr-4 ml-6'
+  );
+  assert.equal(sort('sm:flex-row flex flex-col'), 'flex flex-col sm:flex-row');
 });
 s.run();