Skip to content

Commit

Permalink
gt and lt cases working
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonaswalden
jonaswalden committed Jul 23, 2020
1 parent 9c06b83 commit a2ceae2
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 24 deletions.
20 changes: 12 additions & 8 deletions index.js
View file
Expand Up @@ -81,24 +81,28 @@ function MQParser (opts) {
? parseRegular()
: parseRange()

let eqMinWidth = value === minWidth
let gtMinWidth = value > minWidth
let eqMaxWidth = value === maxWidth
let ltMaxWidth = value < maxWidth

return {
match,
render
}

function match () {
let gteMinWidth = value >= minWidth
let lteMaxWidth = value <= maxWidth

return gt ? lteMaxWidth : gteMinWidth
return gt ? eqMaxWidth || ltMaxWidth : eqMinWidth || gtMinWidth
}

function render () {
let gtMinWidth = value > minWidth
let ltMaxWidth = value < maxWidth
let useQuery = gt ? gtMinWidth : ltMaxWidth
let conditions = []
if (gt) conditions.push(gtMinWidth)
if (lt) conditions.push(ltMaxWidth)
if (!eq) conditions.push(gt ? eqMinWidth : eqMaxWidth)
let preserveQuery = conditions.some(condition => condition)

return useQuery ? conditionString : null
return preserveQuery ? conditionString : null
}

function parseRegular () {
Expand Down
88 changes: 72 additions & 16 deletions index.test.js
View file
Expand Up @@ -19,75 +19,131 @@ it('leaves unscoped css untouched', async () => {
expect(result).toEqual(input)
})

const minWidthVariants = ['(width >= N)', '(N <= width)', '(min-width: N)']
minWidthVariants.forEach(description => {
const gtWidthVariants = ['(width > N)', '(N < width)']
gtWidthVariants.forEach(description => {
describe(`@media ${description}`, () => {
let condition = description.replace('N', '480px')
let input = `/* outside */ @media ${condition} { /* inside */ }`

it('removes block with min-width greater than option max-width', async () => {
it('removes block with min width greater than option max-width', async () => {
let result = await run(input, { maxWidth: 320 })
expect(result).toEqual('/* outside */')
})

it('removes query with min-width lesser than option', async () => {
it('removes query with min width lesser than option', async () => {
let result = await run(input, { minWidth: 768 })
expect(result).toEqual('/* outside */ /* inside */')
})

it('removes query with min-width equal to option', async () => {
it('preserves query with min width equal to option', async () => {
let result = await run(input, { minWidth: 480 })
expect(result).toEqual(input)
})

it('preserves query with min width greater than option', async () => {
let result = await run(input, { minWidth: 320 })
expect(result).toEqual(input)
})
})
})

const gteWidthVariants = ['(width >= N)', '(N <= width)', '(min-width: N)']
gteWidthVariants.forEach(description => {
describe(`@media ${description}`, () => {
let condition = description.replace('N', '480px')
let input = `/* outside */ @media ${condition} { /* inside */ }`

it('removes block with min width greater than option max width', async () => {
let result = await run(input, { maxWidth: 320 })
expect(result).toEqual('/* outside */')
})

it('removes query with min width lesser than option', async () => {
let result = await run(input, { minWidth: 768 })
expect(result).toEqual('/* outside */ /* inside */')
})

it('removes query with min width equal to option', async () => {
let result = await run(input, { minWidth: 480 })
expect(result).toEqual('/* outside */ /* inside */')
})

it('preserves query with min-width greater than option', async () => {
it('preserves query with min width greater than option', async () => {
let result = await run(input, { minWidth: 320 })
expect(result).toEqual(input)
})
})
})

const maxWidthVariants = ['(width <= N)', '(N >= width)', '(max-width: N)']
maxWidthVariants.forEach(description => {
const ltWidthVariants = ['(width < N)', '(N > width)']
ltWidthVariants.forEach(description => {
describe(`@media ${description}`, () => {
let condition = description.replace('N', '480px')
let input = `/* outside */ @media ${condition} { /* inside */ }`

it('preserves query with max width lesser than option', async () => {
let result = await run(input, { maxWidth: 768 })
expect(result).toEqual(input)
})

it('preserves query with max width equal to option', async () => {
let result = await run(input, { maxWidth: 480 })
expect(result).toEqual(input)
})

it('removes query with max width greater than option', async () => {
let result = await run(input, { maxWidth: 320 })
expect(result).toEqual('/* outside */ /* inside */')
})

it('removes block with max width lesser than option min width', async () => {
let result = await run(input, { minWidth: 768 })
expect(result).toEqual('/* outside */')
})
})
})

const lteWidthVariants = ['(width <= N)', '(N >= width)', '(max-width: N)']
lteWidthVariants.forEach(description => {
describe(`@media ${description}`, () => {
let condition = description.replace('N', '480px')
let input = `/* outside */ @media ${condition} { /* inside */ }`

it('preserves query with max-width lesser than option', async () => {
it('preserves query with max width lesser than option', async () => {
let result = await run(input, { maxWidth: 768 })
expect(result).toEqual(input)
})

it('removes query with max-width equal to option', async () => {
it('removes query with max width equal to option', async () => {
let result = await run(input, { maxWidth: 480 })
expect(result).toEqual('/* outside */ /* inside */')
})

it('removes query with max-width greater than option', async () => {
it('removes query with max width greater than option', async () => {
let result = await run(input, { maxWidth: 320 })
expect(result).toEqual('/* outside */ /* inside */')
})

it('removes block with max-width lesser than option min-width', async () => {
it('removes block with max width lesser than option min width', async () => {
let result = await run(input, { minWidth: 768 })
expect(result).toEqual('/* outside */')
})
})
})

const minMaxWidthVariants = [
const gteLteWidthVariants = [
'(width => N1) and (width <= N2)',
'(min-width: N1) and (max-width: N2)'
// '(N1 <= width =< N2)'
]
minMaxWidthVariants.forEach(description => {
gteLteWidthVariants.forEach(description => {
describe(`@media ${description}`, () => {
let conditions = description.replace('N1', '768px').replace('N2', '1024px')
let [condition1, condition2] = conditions.split(' and ')
let input = `/* outside */ @media ${conditions} { /* inside */ }`

describe('opts.minWidth && opts.maxWidth', () => {
it('removes query with min-width and max-width equal to option', async () => {
it('removes query with min width and max-width equal to option', async () => {
let result = await run(input, { minWidth: 768, maxWidth: 1024 })
expect(result).toEqual('/* outside */ /* inside */')
})
Expand All @@ -106,7 +162,7 @@ minMaxWidthVariants.forEach(description => {
)
})

it('preserves query with min-width and max-width within option', async () => {
it('preserves query with min width and max-width within option', async () => {
let result = await run(input, { minWidth: 480, maxWidth: 1280 })
expect(result).toEqual(input)
})
Expand Down

0 comments on commit a2ceae2

Please sign in to comment.