Fix breakpoint matching, add col-span

noya-app · Jan 10, 2024 · 3c5735a · 3c5735a
1 parent 65a7e83
commit 3c5735a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/packages/noya-tailwind/src/__tests__/__snapshots__/suggestions.test.ts.snap b/packages/noya-tailwind/src/__tests__/__snapshots__/suggestions.test.ts.snap
@@ -2432,6 +2432,20 @@ Array [
   "grid-flow-row",
   "grow",
   "grow-0",
+  "col-auto",
+  "col-span-1",
+  "col-span-2",
+  "col-span-3",
+  "col-span-4",
+  "col-span-5",
+  "col-span-6",
+  "col-span-7",
+  "col-span-8",
+  "col-span-9",
+  "col-span-10",
+  "col-span-11",
+  "col-span-12",
+  "col-span-full",
   "shrink",
   "shrink-0",
   "flex",

diff --git a/packages/noya-tailwind/src/__tests__/tailwind.test.ts b/packages/noya-tailwind/src/__tests__/tailwind.test.ts
@@ -287,6 +287,10 @@ describe('resolves styles', () => {
     expect(resolveTailwindClass('auto-cols-max')).toEqual({
       gridAutoColumns: 'max-content',
     });
+
+    expect(resolveTailwindClass('col-span-2')).toEqual({
+      gridColumn: 'span 2 / span 2',
+    });
   });
 
   it('position', () => {

diff --git a/packages/noya-tailwind/src/suggestions.ts b/packages/noya-tailwind/src/suggestions.ts
@@ -115,6 +115,7 @@ export const suggestionPatterns = [
   'grid-flow-row',
   'grow',
   'grow-0',
+  'col-{gridColumn}',
   'shrink',
   'shrink-0',
   'flex',

diff --git a/packages/noya-tailwind/src/tailwind.ts b/packages/noya-tailwind/src/tailwind.ts
@@ -132,6 +132,7 @@ export const classGroups = {
   autoRows: /^auto-rows/,
   gridFlow: /^grid-flow/,
   gridCols: /^grid-cols/,
+  gridColumnSpan: /^col-span-/,
   lineHeight: /^leading-/,
   tracking: /^tracking-/,
   position: /^(absolute|relative|fixed|sticky)/,
@@ -250,6 +251,7 @@ export const filterTailwindClassesByLastInGroup = memoize(
 );
 
 export const breakpoints = [
+  'none' as const,
   'sm' as const,
   'md' as const,
   'lg' as const,
@@ -259,15 +261,15 @@ export const breakpoints = [
 
 export const colorSchemes = ['light' as const, 'dark' as const];
 
-export type BreakpointKey = (typeof breakpoints)[number];
+export type BreakpointKey = (typeof breakpoints)[number] | 'none';
 
 export function matchBreakpoint(width: number): BreakpointKey {
-  if (width < 640) return 'sm';
-  if (width < 768) return 'md';
-  if (width < 1024) return 'lg';
-  if (width < 1280) return 'xl';
-  if (width < 1536) return '2xl';
-  return '2xl';
+  if (width >= 1536) return '2xl';
+  if (width >= 1280) return 'xl';
+  if (width >= 1024) return 'lg';
+  if (width >= 768) return 'md';
+  if (width >= 640) return 'sm';
+  return 'none';
 }
 
 export const extractTailwindClassesByBreakpoint = (
@@ -781,6 +783,12 @@ export const resolveTailwindClass = memoize(function resolveTailwindClass(
         ],
       };
     }
+    case 'gridColumnSpan': {
+      const value = className.replace('col-', '');
+      return {
+        gridColumn: (config.theme as any).gridColumn[value || 'auto'],
+      };
+    }
     case 'gradientDirection':
     case 'gradientStopFrom':
     case 'gradientStopTo': {