Added tests for CSS Level 4 range type media query

index.test.js

@@ -31,74 +31,55 @@ async function mediaMinmaxAfterNestedRun (input, output, opts) {
  expect(result.warnings()).toHaveLength(0)
 }
 
-it('simple #1. mobile-first', async () => {
+it('[mf] simple #1', async () => {
  let input = fs.readFileSync('./test/s1-mobile.in.css', 'utf8')
  let output = fs.readFileSync('./test/s1-mobile.out.css', 'utf8')
  await run(input, output, { sort: 'mobile-first' })
 })
 
-it('simple #1. desktop-first', async () => {
+it('[df] simple #1', async () => {
  let input = fs.readFileSync('./test/s1-desktop.in.css', 'utf8')
  let output = fs.readFileSync('./test/s1-desktop.out.css', 'utf8')
  await run(input, output, { sort: 'desktop-first' })
 })
 
-it('simple #2. mobile-first', async () => {
+it('[mf] simple #2', async () => {
  let input = fs.readFileSync('./test/s2-mobile.in.css', 'utf8')
  let output = fs.readFileSync('./test/s2-mobile.out.css', 'utf8')
  await run(input, output, { sort: 'mobile-first' })
 })
 
-it('simple #2. desktop-first', async () => {
+it('[df] simple #2', async () => {
  let input = fs.readFileSync('./test/s2-desktop.in.css', 'utf8')
  let output = fs.readFileSync('./test/s2-desktop.out.css', 'utf8')
  await run(input, output, { sort: 'desktop-first' })
 })
 
-it('without dimension #1. mobile-first', async () => {
+it('[mf] without dimension #1', async () => {
  let input = fs.readFileSync('./test/wd1-mobile.in.css', 'utf8')
  let output = fs.readFileSync('./test/wd1-mobile.out.css', 'utf8')
  await run(input, output, { sort: 'mobile-first' })
 })
 
-it('without dimension #1. desktop-first', async () => {
+it('[df] without dimension #1', async () => {
  let input = fs.readFileSync('./test/wd1-desktop.in.css', 'utf8')
  let output = fs.readFileSync('./test/wd1-desktop.out.css', 'utf8')
  await run(input, output, { sort: 'desktop-first' })
 })
 
-it('mixed #1. mobile-first', async () => {
+it('[mf] mixed #1', async () => {
  let input = fs.readFileSync('./test/mixed-mobile.in.css', 'utf8')
  let output = fs.readFileSync('./test/mixed-mobile.out.css', 'utf8')
  await run(input, output, { sort: 'mobile-first' })
 })
 
-it('mixed #1. desktop-first', async () => {
+it('[df] mixed #1', async () => {
  let input = fs.readFileSync('./test/mixed-desktop.in.css', 'utf8')
  let output = fs.readFileSync('./test/mixed-desktop.out.css', 'utf8')
  await run(input, output, { sort: 'desktop-first' })
 })
 
-it('postcss nested', async () => {
- let input = fs.readFileSync('./test/postcss.nested.in.css', 'utf8')
- let output = fs.readFileSync('./test/postcss.nested.out.css', 'utf8')
- await nestedRun(input, output)
-})
-
-it('postcss media minmax -> nested', async () => {
- let input = fs.readFileSync('./test/postcss.media.minmax.in.css', 'utf8')
- let output = fs.readFileSync('./test/postcss.media.minmax.out.css', 'utf8')
- await mediaMinmaxBeforeNestedRun(input, output)
-})
-
-it('postcss nested -> media minmax', async () => {
- let input = fs.readFileSync('./test/postcss.media.minmax.in.css', 'utf8')
- let output = fs.readFileSync('./test/postcss.media.minmax.out.css', 'utf8')
- await mediaMinmaxAfterNestedRun(input, output)
-})
-
-
-it('configuration(mixed #1): [mobile first] unitlessMqAlwaysFirst: FALSE', async () => {
+it('[mf] configuration(mixed #1): unitlessMqAlwaysFirst: FALSE', async () => {
  let input = fs.readFileSync('./test/configuration/false-mixed-mobile.in.css', 'utf8')
  let output = fs.readFileSync('./test/configuration/false-mixed-mobile.out.css', 'utf8')
 
@@ -110,8 +91,7 @@ it('configuration(mixed #1): [mobile first] unitlessMqAlwaysFirst: FALSE', async
  await run(input, output, options)
 })
 
-
-it('configuration(mixed #1): [mobile first] unitlessMqAlwaysFirst: TRUE', async () => {
+it('[mf] configuration(mixed #1): unitlessMqAlwaysFirst: TRUE', async () => {
  let input = fs.readFileSync('./test/configuration/true-mixed-mobile.in.css', 'utf8')
  let output = fs.readFileSync('./test/configuration/true-mixed-mobile.out.css', 'utf8')
 
@@ -123,8 +103,7 @@ it('configuration(mixed #1): [mobile first] unitlessMqAlwaysFirst: TRUE', async
  await run(input, output, options)
 })
 
-
-it('configuration(mixed #2): [desktop first] unitlessMqAlwaysFirst: FALSE', async () => {
+it('[df] configuration(mixed #2): unitlessMqAlwaysFirst: FALSE', async () => {
  let input = fs.readFileSync('./test/configuration/false-mixed-desktop.in.css', 'utf8')
  let output = fs.readFileSync('./test/configuration/false-mixed-desktop.out.css', 'utf8')
 
@@ -137,8 +116,7 @@ it('configuration(mixed #2): [desktop first] unitlessMqAlwaysFirst: FALSE', asyn
  await run(input, output, options)
 })
 
-
-it('configuration(mixed #2): [desktop first] unitlessMqAlwaysFirst: TRUE', async () => {
+it('[df] configuration(mixed #2): unitlessMqAlwaysFirst: TRUE', async () => {
  let input = fs.readFileSync('./test/configuration/true-mixed-desktop.in.css', 'utf8')
  let output = fs.readFileSync('./test/configuration/true-mixed-desktop.out.css', 'utf8')
 
@@ -150,3 +128,21 @@ it('configuration(mixed #2): [desktop first] unitlessMqAlwaysFirst: TRUE', async
  }
  await run(input, output, options)
 })
+
+it('postcss nested', async () => {
+ let input = fs.readFileSync('./test/postcss.nested.in.css', 'utf8')
+ let output = fs.readFileSync('./test/postcss.nested.out.css', 'utf8')
+ await nestedRun(input, output)
+})
+
+it('postcss media minmax -> nested', async () => {
+ let input = fs.readFileSync('./test/postcss.media.minmax.in.css', 'utf8')
+ let output = fs.readFileSync('./test/postcss.media.minmax.out.css', 'utf8')
+ await mediaMinmaxBeforeNestedRun(input, output)
+})
+
+it('postcss nested -> media minmax', async () => {
+ let input = fs.readFileSync('./test/postcss.media.minmax.in.css', 'utf8')
+ let output = fs.readFileSync('./test/postcss.media.minmax.out.css', 'utf8')
+ await mediaMinmaxAfterNestedRun(input, output)
+})

test/mixed-desktop.in.css

@@ -25,6 +25,11 @@
 @media screen and (max-width: 1280px) {
  .md { color: #000 }
 }
+@media screen and (width <= 1200px) {
+ .md {
+ color: #000
+ }
+}
 @media print and (orientation: portrait) {
  .md { color: #000 }
 }

test/mixed-desktop.out.css

@@ -1,5 +1,9 @@
 @media screen and (max-width: 1280px) {
  .md { color: #000 } }
+@media screen and (width <= 1200px) {
+ .md {
+ color: #000
+ } }
 @media screen and (max-width: 640px) {
  .md { color: #000 } }
 @media screen and (min-width: 768px) {

test/mixed-mobile.in.css

@@ -10,6 +10,11 @@
 @media screen and (max-width: 640px) {
  .mm { color: #fff }
 }
+@media screen and (width > 640px) {
+ .mm {
+ color: #fff
+ }
+}
 @media screen and (orientation: landscape) {
  .mm { color: #fff }
 }

test/mixed-mobile.out.css

@@ -1,20 +1,35 @@
+@media screen and (width > 640px) {
+ .mm {
+ color: #fff
+ }
+}
 @media screen and (min-width: 768px) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media screen and (min-width: 1280px) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media screen and (max-width: 1280px) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media screen and (max-width: 640px) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media screen and (orientation: landscape) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media screen and (orientation: portrait) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media tv {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media print {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media print and (orientation: landscape) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}
 @media print and (orientation: portrait) {
- .mm { color: #fff } }
+ .mm { color: #fff }
+}