sort.js

// TODO: variants
export const variants = ['hover'].map((v) => `(${v}:)?`).join('');

export let order = [
  'container',
  'position',
  'zIndex',
  { name: 'display', overrides: [{ rule: 'hidden', place: ['before', 'block'] }] },
  'visibility',
  'pointerEvents',
  { name: 'flexDirection', overrides: [{ rule: 'flex-col', place: ['before', 'flex-row'] }] },
  'flexWrap',
  'flexGrow',
  'flexShrink',
  'gridAutoFlow',
  'gridTemplateColumns',
  'gridAutoColumns',
  'gridColumn',
  'gridColumnStart',
  'gridColumnEnd',
  'gridTemplateRows',
  'gridAutoRows',
  'gridRow',
  'gridRowStart',
  'gridRowEnd',
  'order',
  'justifyContent',
  'justifyItems',
  'justifySelf',
  'alignContent',
  'alignItems',
  'alignSelf',
  'placeContent',
  'placeItems',
  'placeSelf',
  'objectFit',
  'objectPosition',
  'overflow',
  'overscrollBehavior',
  'inset',
  'width',
  'minWidth',
  'maxWidth',
  'height',
  'minHeight',
  'maxHeight',
  'cursor',
  'textAlign',
  'verticalAlign',
  'listStyleType',
  'textTransform',
  'fontStyle',
  'textDecoration',
  'fontWeight',
  'fontSize',
  'textColor',
  'textOpacity',
  'letterSpacing',
  'lineHeight',
  'textOverflow',
  'whitespace',
  'wordBreak',
  'placeholderColor',
  'placeholderOpacity',
  'backgroundPosition',
  'backgroundRepeat',
  'backgroundSize',
  'backgroundColor',
  'backgroundOpacity',
  'backgroundImage',
  'gradientColorStops',
  'backgroundAttachment',
  'backgroundBlendMode',
  'backgroundClip',
  'opacity',
  'boxShadow',
  'borderStyle',
  'borderWidth',
  'borderColor',
  'borderOpacity',
  'borderRadius',
  'borderCollapse',
  'outline',
  'ringWidth',
  'ringOpacity',
  'ringOffsetWidth',
  'transform',
  'transformOrigin',
  'scale',
  'rotate',
  'translate',
  'skew',
  'transitionProperty',
  'transitionDuration',
  'transitionDelay',
  'transitionTimingFunction',
  'animation',
  'boxSizing',
  'padding',
  'space',
  'gap',
  'margin',
];

// TODO: Add an option to disable inserting breakpoints.
export function sortClasses(classnames, byClassname) {
  // Remove unwanted repeated spaces:
  classnames = classnames.replace(/\s+/g, ' ');
  const leadingSpace = classnames[0] === ' ';
  const trailingSpace = classnames[classnames.length - 1] === ' ';

  const sorted = classnames
    .split(' ')
    .sort((a, b) => byClassname[a] - byClassname[b])
    .join(' ')
    .trim();

  // Make sure leading or trailing spaces are preserved.
  return `${leadingSpace ? ' ' : ''}${sorted}${trailingSpace ? ' ' : ''}`;
}