feat(transform): min/max widths in media queries

Author: agriffis

packages/core/src/mediaGetters.ts

@@ -0,0 +1,20 @@
+import {
+  getBreakpoints,
+  getBreakpointMin,
+  getBreakpointMax,
+} from '@xstyled/system'
+
+const getMediaWidth = (getBreakpointBound: Function) => (value: any) => (
+  props: object,
+) => {
+  const v = getBreakpointBound(getBreakpoints(props), value)
+  // getters return null for smallest, undefined for not found, and otherwise
+  // a px string. Since we MUST emit a matcher at this point, use 0px for the
+  // smallest case (always true for min, never true for max).
+  return v === null ? '0' : v || value
+}
+
+export const mediaGetters = {
+  'min-width': getMediaWidth(getBreakpointMin),
+  'max-width': getMediaWidth(getBreakpointMax),
+}

packages/core/src/transform.test.ts

@@ -1,6 +1,11 @@
 import { transform } from './transform'
 
-const props = { theme: { colors: { black: '#000' } } }
+const props = {
+  theme: {
+    screens: { sm: 0, md: 1024, lg: 1920 },
+    colors: { black: '#000' },
+  },
+}
 
 const transformToStr = (s) =>
   transform(s)
@@ -28,4 +33,42 @@ describe('#transform', () => {
   it("isn't confused by comments", () => {
     expect(transformToStr('/* hi */color:black;')).toBe('/* hi */color:#000;')
   })
+
+  it('transforms min-width media query', () => {
+    expect(transformToStr('@media (min-width: md) {}')).toBe(
+      '@media (min-width: 1024px) {}',
+    )
+  })
+
+  it('transforms max-width media query', () => {
+    expect(transformToStr('@media (max-width: md) {}')).toBe(
+      '@media (max-width: 1023.98px) {}',
+    )
+  })
+
+  it('transforms mixed media query', () => {
+    expect(
+      transformToStr(
+        '@media screen and (min-width: md) and (color) and (not (max-width: lg)) {}',
+      ),
+    ).toBe(
+      '@media screen and (min-width: 1024px) and (color) and (not (max-width: 1919.98px)) {}',
+    )
+  })
+
+  it('transforms smallest value media query', () => {
+    expect(transformToStr('@media (min-width: sm) {}')).toBe(
+      '@media (min-width: 0) {}',
+    )
+  })
+
+  it('handles mixed media query and rules', () => {
+    expect(
+      transformToStr(
+        'div{color:black;}@media(min-width:lg){div{color:black;}}div{color:black;}',
+      ),
+    ).toBe(
+      'div{color:#000;}@media(min-width:1920px){div{color:#000;}}div{color:#000;}',
+    )
+  })
 })

packages/core/src/transform.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
+import { mediaGetters } from './mediaGetters'
 import { propGetters } from './propGetters'
 
 // prop name is an ident: word chars, underscore and dash.
@@ -8,28 +9,79 @@ const PROP_CHAR = `[-\\w]`
 const VALUE_CHAR = `(?:\\\\.|[^\\\\;])`
 
 // prettier-ignore
-const PROP_REGEXP = new RegExp(
+const PROP_PATT = (
   `(${PROP_CHAR}+)` +   // capture prop name
   `(\\s*:\\s*)` +       // colon & whitespace
   `(?=\\S)` +           // prop value starts with non-whitespace
   `(${VALUE_CHAR}*?)` + // capture prop value (non-greedy)
   `(\\s*!important)?` + // capture !important
-  `(\\s*;)`,            // semi & whitespace
-  `gs`,                 // flags
+  `(\\s*;)`             // semi & whitespace
 )
 
+// simplistic but workable media query value.
+const MEDIA_CHAR = `[^{]`
+
+// prettier-ignore
+const MEDIA_PATT = (
+  `(@media\\b\\s*)` +   // start of media query
+  `(?=\\S)` +           // value starts with non-whitespace
+  `(${MEDIA_CHAR}+?)` + // capture queries (non-greedy)
+  `(\\s*\\{)`           // brace & whitespace
+)
+
+const MATCH_REGEXP = new RegExp(`(?:${PROP_PATT}|${MEDIA_PATT})`, `gs`)
+
 export function transform(rawValue: any) {
   if (typeof rawValue !== 'string') return rawValue
   let matches
   let lastIndex = 0
   const values = []
-  while ((matches = PROP_REGEXP.exec(rawValue))) {
-    const [, prop, colon, value, imp, semi] = matches
-    const getter = (propGetters as any)[prop]
+  while ((matches = MATCH_REGEXP.exec(rawValue))) {
+    const [, prop, colon, value, imp, semi, media, query, brace] = matches
+    if (media) {
+      values.push(rawValue.slice(lastIndex, matches.index))
+      values.push(media)
+      mediaTransform(query).forEach((v) => values.push(v))
+      values.push(brace)
+      lastIndex = matches.index + matches[0].length
+    } else {
+      const getter = (propGetters as any)[prop]
+      if (getter) {
+        values.push(rawValue.slice(lastIndex, matches.index))
+        values.push(
+          (p: object) =>
+            `${prop}${colon}${getter(value)(p)}${imp || ''}${semi}`,
+        )
+        lastIndex = matches.index + matches[0].length
+      }
+    }
+  }
+  values.push(rawValue.slice(lastIndex, rawValue.length))
+  return values
+}
+
+// media query prop/value pairs such as (min-width: 1024px)
+// prettier-ignore
+const QUERY_REGEXP = new RegExp(
+  `(\\(\\s*)` +       // open paren, whitespace
+  `(${PROP_CHAR}+)` + // capture prop name
+  `(\\s*:\\s*)` +     // colon & whitespace
+  `([^\\)]*?)` +      // capture prop value (non-greedy)
+  `(\\s*\\))`,        // close paren, whitespace
+  `gs`
+)
+
+function mediaTransform(rawValue: string) {
+  let matches
+  let lastIndex = 0
+  const values = []
+  while ((matches = QUERY_REGEXP.exec(rawValue))) {
+    const [, open, prop, colon, value, close] = matches
+    const getter = (mediaGetters as any)[prop]
     if (getter) {
       values.push(rawValue.slice(lastIndex, matches.index))
       values.push(
-        (p: object) => `${prop}${colon}${getter(value)(p)}${imp || ''}${semi}`,
+        (p: object) => `${open}${prop}${colon}${getter(value)(p)}${close}`,
       )
       lastIndex = matches.index + matches[0].length
     }

packages/system/src/index.ts

@@ -7,4 +7,4 @@ export * from './transformers'
 export * from './defaultTheme'
 export * from './preflight'
 export * from './theme'
-export { getBreakpoints } from './media'
+export { getBreakpointMin, getBreakpointMax, getBreakpoints } from './media'