From 72f0dfcd060ac0e92bb1e02d81dee061d8717473 Mon Sep 17 00:00:00 2001
From: Abraham <abrahamjuliot@gmail.com>
Date: Sun, 24 Jan 2021 06:37:51 +0000
Subject: [PATCH] add import and refactor template to CSS Media Queries #97

---
 creep.js                 | 132 +++++++-------------
 index.html               |  48 +------
 modules/computedStyle.js |  16 +--
 modules/css.js           | 264 +++++++++++++++++----------------------
 style.css                |   4 +-
 5 files changed, 176 insertions(+), 288 deletions(-)

diff --git a/creep.js b/creep.js
index 5e8e8840..9a0b74f4 100644
--- a/creep.js
+++ b/creep.js
@@ -334,7 +334,7 @@ const imports = {
 			anyPointer: caniuse(() => fp.cssMedia.mediaCSS.anyPointer),
 			pointer: caniuse(() => fp.cssMedia.mediaCSS.pointer),
 			colorGamut: caniuse(() => fp.cssMedia.mediaCSS.colorGamut),
-			screenQuery: caniuse(() => fp.cssMedia.mediaCSS.screenQuery),
+			screenQuery: caniuse(() => fp.cssMedia.screenQuery),
 		},
 		css: !fp.css ? undefined : {
 			prototype: caniuse(() => fp.css.getComputedStyle.prototypeName),
@@ -1002,43 +1002,13 @@ const imports = {
 		})()}
 		</div>
 		<div class="flex-grid">
-			
 		${!fp.css ?
 			`<div class="col-six">
-				<strong>@media</strong>
-				<div>screen query: ${note.blocked}</div>
-				<div>device aspect ratio: ${note.blocked}</div>
-				<div>device screen: ${note.blocked}</div>
-				<div>display mode: ${note.unsupported}</div>
-				<div>orientation: ${note.unsupported}</div>
-				<div>motion: ${note.unsupported}</div>
-				<div>hover: ${note.unsupported}</div>
-				<div>any hover: ${note.unsupported}</div>
-				<div>pointer: ${note.unsupported}</div>
-				<div>any pointer: ${note.unsupported}</div>
-				<div>monochrome: ${note.unsupported}</div>
-				<div>color scheme: ${note.unsupported}</div>
-				<div>color gamut: ${note.unsupported}</div>
-				<div>forced colors: ${note.unsupported}</div>
-				<div>inverted colors: ${note.unsupported}</div>
-			</div>
-			<div class="col-six">
-				<strong>MediaQueryList</strong>
+				<strong>CSS Media Queries</strong><
+				<div>@media: ${note.blocked}</div>
+				<div>@import: ${note.blocked}</div>
+				<div>matchMedia: ${note.blocked}</div>
 				<div>screen query: ${note.blocked}</div>
-				<div>device aspect ratio: ${note.blocked}</div>
-				<div>device screen: ${note.blocked}</div>
-				<div>display mode: ${note.unsupported}</div>
-				<div>orientation: ${note.unsupported}</div>
-				<div>motion: ${note.unsupported}</div>
-				<div>hover: ${note.unsupported}</div>
-				<div>any hover: ${note.unsupported}</div>
-				<div>pointer: ${note.unsupported}</div>
-				<div>any pointer: ${note.unsupported}</div>
-				<div>monochrome: ${note.unsupported}</div>
-				<div>color scheme: ${note.unsupported}</div>
-				<div>color gamut: ${note.unsupported}</div>
-				<div>forced colors: ${note.unsupported}</div>
-				<div>inverted colors: ${note.unsupported}</div>
 			</div>` :
 		(() => {
 			const {
@@ -1046,60 +1016,47 @@ const imports = {
 			} = fp
 			const {
 				$hash,
+				importCSS,
 				mediaCSS,
-				matchMediaCSS
+				matchMediaCSS,
+				screenQuery
 			} = data
+
 			return `
 			<div class="col-six">
-				<strong>@media</strong><span class="hash">${hashMini(mediaCSS)}</span>
-				<div>screen query: ${''+mediaCSS.screenQuery.width} x ${''+mediaCSS.screenQuery.height}</div>
-				<div>screen match: ${mediaCSS.deviceScreen || note.blocked}</div>
-				<div>device aspect ratio: ${mediaCSS.deviceAspectRatio || note.blocked}</div>
-				<div>display mode: ${mediaCSS.displayMode || note.unsupported}</div>
-				<div>orientation: ${mediaCSS.orientation  || note.unsupported}</div>
-				<div>motion: ${mediaCSS.reducedMotion || note.unsupported}</div>
-				<div>hover: ${mediaCSS.hover || note.unsupported}</div>
-				<div>any hover: ${mediaCSS.anyHover || note.unsupported}</div>
-				<div>pointer: ${mediaCSS.pointer || note.unsupported}</div>
-				<div>any pointer: ${mediaCSS.anyPointer || note.unsupported}</div>
-				<div>monochrome: ${mediaCSS.monochrome || note.unsupported}</div>
-				<div>color scheme: ${mediaCSS.colorScheme || note.unsupported}</div>
-				<div>color gamut: ${mediaCSS.colorGamut || note.unsupported}</div>
-				<div>forced colors: ${mediaCSS.forcedColors || note.unsupported}</div>
-				<div>inverted colors: ${mediaCSS.invertedColors || note.unsupported}</div>
-			</div>
-			<div class="col-six">
-				<strong>MediaQueryList</strong><span class="hash">${hashMini(matchMediaCSS)}</span>
-				<div>screen query: ${''+matchMediaCSS.screenQuery.width} x ${''+matchMediaCSS.screenQuery.height}</div>
-				<div>screen match: ${matchMediaCSS.deviceScreen || note.blocked}</div>
-				<div>device aspect ratio: ${matchMediaCSS.deviceAspectRatio || note.blocked}</div>
-				<div>display mode: ${matchMediaCSS.displayMode || note.unsupported}</div>
-				<div>orientation: ${matchMediaCSS.orientation || note.unsupported}</div>
-				<div>motion: ${matchMediaCSS.reducedMotion || note.unsupported}</div>
-				<div>hover: ${matchMediaCSS.hover || note.unsupported}</div>
-				<div>any hover: ${matchMediaCSS.anyHover || note.unsupported}</div>
-				<div>pointer: ${matchMediaCSS.pointer || note.unsupported}</div>
-				<div>any pointer: ${matchMediaCSS.anyPointer || note.unsupported}</div>
-				<div>monochrome: ${matchMediaCSS.monochrome || note.unsupported}</div>
-				<div>color scheme: ${matchMediaCSS.colorScheme || note.unsupported}</div>
-				<div>color gamut: ${matchMediaCSS.colorGamut || note.unsupported}</div>
-				<div>forced colors: ${matchMediaCSS.forcedColors || note.unsupported}</div>
-				<div>inverted colors: ${matchMediaCSS.invertedColors || note.unsupported}</div>
+				<strong>CSS Media Queries</strong><span class="hash">${hashMini($hash)}</span>
+				<div>@media: ${
+					!mediaCSS ? note.blocked :
+					modal(
+						'creep-css-media',
+						Object.keys(mediaCSS).map(key => `${key}: ${mediaCSS[key] || note.unsupported}`).join('<br>'),
+						hashMini(mediaCSS)
+					)
+				}</div>
+				<div>@import: ${
+					!importCSS ? note.blocked : 
+					modal(
+						'creep-css-import',
+						Object.keys(importCSS).map(key => `${key}: ${importCSS[key] || note.unsupported}`).join('<br>'),
+						hashMini(importCSS)
+					)
+				}</div>
+				<div>matchMedia: ${
+					!matchMediaCSS ? note.blocked : 
+					modal(
+						'creep-css-match-media',
+						Object.keys(matchMediaCSS).map(key => `${key}: ${matchMediaCSS[key] || note.unsupported}`).join('<br>'),
+						hashMini(matchMediaCSS)
+					)
+				}</div>
+				<div>screen query: ${!screenQuery ? note.blocked : `${screenQuery.width} x ${screenQuery.height}`}</div>
 			</div>
 			`
 		})()}
-		</div>
-		<div class="flex-grid">
 		${!fp.css ?
 			`<div class="col-six">
 				<strong>Computed Style</strong>
-				<div>getComputedStyle: ${note.blocked}</div>
-				<div>keys: ${note.blocked}</div>
-				<div>moz: ${note.blocked}</div>
-				<div>webkit: ${note.blocked}</div>
-				<div>apple: ${note.blocked}</div>
-			</div>
-			<div class="col-six">
+				<div>keys (0): ${note.blocked}</div>
 				<div>prototype: ${note.blocked}</div>
 				<div>system styles: ${note.blocked}</div>
 				<div class="gradient"></div>
@@ -1110,7 +1067,7 @@ const imports = {
 			} = fp
 			const {
 				$hash,
-				getComputedStyle: computedStyle,
+				computedStyle,
 				system
 			} = data
 			const colorsLen = system.colors.length
@@ -1127,13 +1084,14 @@ const imports = {
 			return `
 			<div class="col-six">
 				<strong>Computed Style</strong><span class="hash">${hashMini($hash)}</span>
-				<div>getComputedStyle:<span class="sub-hash">${hashMini(computedStyle.keys)}</span></div>
-				<div>keys: ${computedStyle.keys.length}</div>
-				<div>moz: ${''+computedStyle.moz}</div>
-				<div>webkit: ${''+computedStyle.webkit}</div>
-				<div>apple: ${''+computedStyle.apple}</div>
-			</div>
-			<div class="col-six">
+				<div>keys (${!computedStyle ? '0' : count(computedStyle.keys)}): ${
+					!computedStyle ? note.blocked : 
+					modal(
+						'creep-computed-style',
+						computedStyle.keys.join(', '),
+						hashMini(computedStyle)
+					)
+				}</div>
 				<div>prototype: ${prototypeName}</div>
 				<div>system styles: ${
 					system && system.colors ? modal(
diff --git a/index.html b/index.html
index 64f054dc..ffdfe4c9 100644
--- a/index.html
+++ b/index.html
@@ -188,52 +188,16 @@
 				</div>
 				<div class="flex-grid hidden">
 					<div class="col-six">
-						<strong>@media</strong>
-						<div>screen query</div>
-						<div>device aspect ratio</div>
-						<div>device screen</div>
-						<div>display mode</div>
-						<div>orientation</div>
-						<div>motion</div>
-						<div>hover</div>
-						<div>any hover</div>
-						<div>pointer</div>
-						<div>any pointer</div>
-						<div>monochrome</div>
-						<div>color scheme</div>
-						<div>color gamut</div>
-						<div>forced colors</div>
-						<div>inverted colors</div>
+						<strong>CSS Media Queries</strong><
+						<div>@media:</div>
+						<div>@import:</div>
+						<div>matchMedia:</div>
+						<div>screen query:</div>
 					</div>
-					<div class="col-six">
-						<strong>MediaQueryList</strong>
-						<div>screen query</div>
-						<div>device aspect ratio</div>
-						<div>device screen</div>
-						<div>display mode</div>
-						<div>orientation</div>
-						<div>motion</div>
-						<div>hover</div>
-						<div>any hover</div>
-						<div>pointer</div>
-						<div>any pointer</div>
-						<div>monochrome</div>
-						<div>color scheme</div>
-						<div>color gamut</div>
-						<div>forced colors</div>
-						<div>inverted colors</div>
-					</div>
-				</div>
-				<div class="flex-grid hidden">
 					<div class="col-six">
 						<strong>Computed Style</strong>
 						<div>getComputedStyle:</div>
-						<div>keys:</div>
-						<div>moz:</div>
-						<div>webkit:</div>
-						<div>apple:</div>
-					</div>
-					<div class="col-six">
+						<div>keys (0):</div>
 						<div>prototype:</div>
 						<div>system styles:</div>
 						<div class="gradient"></div>
diff --git a/modules/computedStyle.js b/modules/computedStyle.js
index b014d79a..58652d0b 100644
--- a/modules/computedStyle.js
+++ b/modules/computedStyle.js
@@ -75,14 +75,9 @@ const computeStyle = (type, { require: [ captureError ] }) => {
 				...Object.keys(propertiesInPrototypeChain)
 			])
 		]
-		// checks
-		const moz = keys.filter(key => (/moz/i).test(key)).length
-		const webkit = keys.filter(key => (/webkit/i).test(key)).length
-		const apple = keys.filter(key => (/apple/i).test(key)).length
 		const prototypeName = (''+prototype).match(/\[object (.+)\]/)[1]
 	
-		const data = { keys: keys.sort(), moz, webkit, apple, prototypeName }
-		return { ...data }
+		return { keys, prototypeName }
 	}
 	catch (error) {
 		captureError(error)
@@ -195,12 +190,11 @@ export const getCSS = imports => {
 			const start = performance.now()
 			const computedStyle = computeStyle('getComputedStyle', { require: [ captureError ] })
 			const system = getSystemStyles(instanceId, { require: [ captureError, parentPhantom ] })
-			const data = {
-				['getComputedStyle']: computedStyle,
-				system
-			}
 			logTestResult({ start, test: 'computed style', passed: true })
-			return resolve({ ...data })
+			return resolve({
+				computedStyle,
+				system
+			})
 		}
 		catch (error) {
 			logTestResult({ test: 'computed style', passed: false })
diff --git a/modules/css.js b/modules/css.js
index 4b0a370c..6822d089 100644
--- a/modules/css.js
+++ b/modules/css.js
@@ -6,42 +6,6 @@ const getAspectRatio = (width, height) => {
 	return aspectRatio
 }
 
-const query = ({ body, type, rangeStart, rangeLen }) => {
-	body.innerHTML = `
-		<style>
-			${[...Array(rangeLen)].map((slot,i) => {
-				i += rangeStart
-				return `@media(device-${type}:${i}px){body{--device-${type}:${i};}}`
-			}).join('')}
-		</style>
-	`
-	const style = getComputedStyle(body)
-	return style.getPropertyValue(`--device-${type}`).trim()
-}
-
-const getScreenMedia = body => {
-	let i, widthMatched, heightMatched
-	for (i = 0; i < 10; i++) {
-		let resWidth, resHeight
-		if (!widthMatched) {
-			resWidth = query({ body, type: 'width', rangeStart: i*1000, rangeLen: 1000})
-			if (resWidth) {
-				widthMatched = resWidth
-			}
-		}
-		if (!heightMatched) {
-			resHeight = query({ body, type: 'height', rangeStart: i*1000, rangeLen: 1000})
-			if (resHeight) {
-				heightMatched = resHeight
-			}
-		}
-		if (widthMatched && heightMatched) {
-			break
-		}	
-	}
-	return { width: +widthMatched, height: +heightMatched }
-}
-
 const getScreenMatchMedia = win => {
 	let widthMatched, heightMatched
 	for (let i = 0; i < 10; i++) {
@@ -81,6 +45,8 @@ const getScreenMatchMedia = win => {
 	return { width: widthMatched, height: heightMatched }
 }
 
+const getCSSDataURI = x => `data:text/css,body {${x}}`
+
 export const getCSSMedia = imports => {
 
 	const {
@@ -100,150 +66,138 @@ export const getCSSMedia = imports => {
 			const { width, height } = win.screen
 			
 			const deviceAspectRatio = getAspectRatio(width, height)
+
 			body.innerHTML = `
 			<style>
 			/* device */
-			@media (prefers-reduced-motion: no-preference) {body {--prefers-reduced-motion: no-preference;}}
-			@media (prefers-reduced-motion: reduce) {body {--prefers-reduced-motion: reduce;}}
-
-			@media (prefers-color-scheme: light) {body {--prefers-color-scheme: light;}}
-			@media (prefers-color-scheme: dark) {body {--prefers-color-scheme: dark;}}
-			
-			@media (monochrome) {body {--monochrome: monochrome;}}
-			@media (monochrome: 0) {body {--monochrome: non-monochrome;}}
-
-			@media (inverted-colors: inverted) {body {--inverted-colors: inverted;}}
-			@media (inverted-colors: none) {body {--inverted-colors: none;}}
-
-			@media (forced-colors: none) {body {--forced-colors: none;}}
-			@media (forced-colors: active) {body {--forced-colors: active;}}
-
-			/* input mechanisms */
-			@media (any-hover: hover) {body {--any-hover: hover;}}
-			@media (any-hover: none) {body {--any-hover: none;}}
-			
-			@media (hover: hover) {body {--hover: hover;}}
-			@media (hover: none) {body {--hover: none;}}
-			
-			@media (any-pointer: fine) {body {--any-pointer: fine;}}
-			@media (any-pointer: coarse) {body {--any-pointer: coarse;}}
-			@media (any-pointer: none) {body {--any-pointer: none;}}
-			
-			@media (pointer: fine) {body {--pointer: fine;}}
-			@media (pointer: coarse) {body {--pointer: coarse;}}
-			@media (pointer: none) {body {--pointer: none;}}
-
-			@media (device-aspect-ratio: ${deviceAspectRatio}) {body {--device-aspect-ratio: ${deviceAspectRatio};}}
-			@media (device-width: ${width}px) and (device-height: ${height}px) {body {--device-screen: ${width} x ${height};}}
-			@media (display-mode: fullscreen) {body {--display-mode: fullscreen;}}
-			@media (display-mode: standalone) {body {--display-mode: standalone;}}
-			@media (display-mode: minimal-ui) {body {--display-mode: minimal-ui;}}
-			@media (display-mode: browser) {body {--display-mode: browser;}}
-
-			@media (color-gamut: srgb) {body {--color-gamut: srgb;}}
-			@media (color-gamut: p3) {body {--color-gamut: p3;}}
-			@media (color-gamut: rec2020) {body {--color-gamut: rec2020;}}
-
-			@media (orientation: landscape) {body {--orientation: landscape;}}
-			@media (orientation: portrait) {body {--orientation: portrait;}}
-
+			@import '${getCSSDataURI('--import-prefers-reduced-motion: no-preference')}' (prefers-reduced-motion: no-preference);
+			@import '${getCSSDataURI('--import-prefers-reduced-motion: reduce')}' (prefers-reduced-motion: reduce);
+			@import '${getCSSDataURI('--import-prefers-color-scheme: light')}' (prefers-color-scheme: light);
+			@import '${getCSSDataURI('--import-prefers-color-scheme: dark')}' (prefers-color-scheme: dark);
+			@import '${getCSSDataURI('--import-monochrome: monochrome')}' (monochrome);
+			@import '${getCSSDataURI('--import-monochrome: non-monochrome')}' (monochrome: 0);
+			@import '${getCSSDataURI('--import-inverted-colors: inverted')}' (inverted-colors: inverted);
+			@import '${getCSSDataURI('--import-inverted-colors: none')}' (inverted-colors: 0);
+			@import '${getCSSDataURI('--import-forced-colors: none')}' (forced-colors: none);
+			@import '${getCSSDataURI('--import-forced-colors: active')}' (forced-colors: active);
+			@import '${getCSSDataURI('--import-any-hover: hover')}' (any-hover: hover);
+			@import '${getCSSDataURI('--import-any-hover: none')}' (any-hover: none);
+			@import '${getCSSDataURI('--import-hover: hover')}' (hover: hover);
+			@import '${getCSSDataURI('--import-hover: none')}' (hover: none);
+			@import '${getCSSDataURI('--import-any-pointer: fine')}' (any-pointer: fine);
+			@import '${getCSSDataURI('--import-any-pointer: coarse')}' (any-pointer: coarse);
+			@import '${getCSSDataURI('--import-any-pointer: none')}' (any-pointer: none);
+			@import '${getCSSDataURI('--import-pointer: fine')}' (pointer: fine);
+			@import '${getCSSDataURI('--import-pointer: coarse')}' (pointer: coarse);
+			@import '${getCSSDataURI('--import-pointer: none')}' (pointer: none);
+			@import '${getCSSDataURI(`--import-device-aspect-ratio: ${deviceAspectRatio}`)}' (device-aspect-ratio: ${deviceAspectRatio});
+			@import '${getCSSDataURI(`--import-device-screen: ${width} x ${height}`)}' (device-width: ${width}px) and (device-height: ${height}px);
+			@import '${getCSSDataURI('--import-display-mode: fullscreen')}' (display-mode: fullscreen);
+			@import '${getCSSDataURI('--import-display-mode: standalone')}' (display-mode: standalone);
+			@import '${getCSSDataURI('--import-display-mode: minimal-ui')}' (display-mode: minimal-ui);
+			@import '${getCSSDataURI('--import-display-mode: browser')}' (display-mode: browser);
+			@import '${getCSSDataURI('--import-color-gamut: srgb')}' (color-gamut: srgb);
+			@import '${getCSSDataURI('--import-color-gamut: p3')}' (color-gamut: p3);
+			@import '${getCSSDataURI('--import-color-gamut: rec2020')}' (color-gamut: rec2020);
+			@import '${getCSSDataURI('--import-orientation: landscape')}' (orientation: landscape);
+			@import '${getCSSDataURI('--import-orientation: portrait')}' (orientation: portrait);
+			@media (prefers-reduced-motion: no-preference) {body {--prefers-reduced-motion: no-preference}}
+			@media (prefers-reduced-motion: reduce) {body {--prefers-reduced-motion: reduce}}
+			@media (prefers-color-scheme: light) {body {--prefers-color-scheme: light}}
+			@media (prefers-color-scheme: dark) {body {--prefers-color-scheme: dark}}
+			@media (monochrome) {body {--monochrome: monochrome}}
+			@media (monochrome: 0) {body {--monochrome: non-monochrome}}
+			@media (inverted-colors: inverted) {body {--inverted-colors: inverted}}
+			@media (inverted-colors: none) {body {--inverted-colors: none}}
+			@media (forced-colors: none) {body {--forced-colors: none}}
+			@media (forced-colors: active) {body {--forced-colors: active}}
+			@media (any-hover: hover) {body {--any-hover: hover}}
+			@media (any-hover: none) {body {--any-hover: none}}
+			@media (hover: hover) {body {--hover: hover}}
+			@media (hover: none) {body {--hover: none}}
+			@media (any-pointer: fine) {body {--any-pointer: fine}}
+			@media (any-pointer: coarse) {body {--any-pointer: coarse}}
+			@media (any-pointer: none) {body {--any-pointer: none}}
+			@media (pointer: fine) {body {--pointer: fine}}
+			@media (pointer: coarse) {body {--pointer: coarse}}
+			@media (pointer: none) {body {--pointer: none}}
+			@media (device-aspect-ratio: ${deviceAspectRatio}) {body {--device-aspect-ratio: ${deviceAspectRatio}}}
+			@media (device-width: ${width}px) and (device-height: ${height}px) {body {--device-screen: ${width} x ${height}}}
+			@media (display-mode: fullscreen) {body {--display-mode: fullscreen}}
+			@media (display-mode: standalone) {body {--display-mode: standalone}}
+			@media (display-mode: minimal-ui) {body {--display-mode: minimal-ui}}
+			@media (display-mode: browser) {body {--display-mode: browser}}
+			@media (color-gamut: srgb) {body {--color-gamut: srgb}}
+			@media (color-gamut: p3) {body {--color-gamut: p3}}
+			@media (color-gamut: rec2020) {body {--color-gamut: rec2020}}
+			@media (orientation: landscape) {body {--orientation: landscape}}
+			@media (orientation: portrait) {body {--orientation: portrait}}
 			</style>
 			`
 			const matchMediaCSS = {
 				reducedMotion: (
-					win.matchMedia('(prefers-reduced-motion: no-preference)').matches ?
-					'no-preference' :
-					win.matchMedia('(prefers-reduced-motion: reduce)').matches ?
-					'reduce' : undefined
+					win.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'no-preference' :
+					win.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'reduce' : undefined
 				),
 				colorScheme: (
-					win.matchMedia('(prefers-color-scheme: light)').matches ?
-					'light' :
-					win.matchMedia('(prefers-color-scheme: dark)').matches ?
-					'dark' : undefined
+					win.matchMedia('(prefers-color-scheme: light)').matches ? 'light' :
+					win.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : undefined
 				),
 				monochrome: (
-					win.matchMedia('(monochrome)').matches ?
-					'monochrome' :
-					win.matchMedia('(monochrome: 0)').matches ?
-					'non-monochrome' : undefined
+					win.matchMedia('(monochrome)').matches ? 'monochrome' :
+					win.matchMedia('(monochrome: 0)').matches ? 'non-monochrome' : undefined
 				),
 				invertedColors: (
-					win.matchMedia('(inverted-colors: inverted)').matches ?
-					'inverted' :
-					win.matchMedia('(inverted-colors: none)').matches ?
-					'none' : undefined
+					win.matchMedia('(inverted-colors: inverted)').matches ? 'inverted' :
+					win.matchMedia('(inverted-colors: none)').matches ? 'none' : undefined
 				),
 				forcedColors: (
-					win.matchMedia('(forced-colors: none)').matches ?
-					'none' :
-					win.matchMedia('(forced-colors: active)').matches ?
-					'active' : undefined
+					win.matchMedia('(forced-colors: none)').matches ? 'none' :
+					win.matchMedia('(forced-colors: active)').matches ? 'active' : undefined
 				),
 				anyHover: (
-					win.matchMedia('(any-hover: hover)').matches ?
-					'hover' :
-					win.matchMedia('(any-hover: none)').matches ?
-					'none' : undefined
+					win.matchMedia('(any-hover: hover)').matches ? 'hover' :
+					win.matchMedia('(any-hover: none)').matches ? 'none' : undefined
 				),
 				hover: (
-					win.matchMedia('(hover: hover)').matches ?
-					'hover' :
-					win.matchMedia('(hover: none)').matches ?
-					'none' : undefined
+					win.matchMedia('(hover: hover)').matches ? 'hover' :
+					win.matchMedia('(hover: none)').matches ? 'none' : undefined
 				),
 				anyPointer: (
-					win.matchMedia('(any-pointer: fine)').matches ?
-					'fine' :
-					win.matchMedia('(any-pointer: coarse)').matches ?
-					'coarse' :
-					win.matchMedia('(any-pointer: none)').matches ?
-					'none' : undefined
+					win.matchMedia('(any-pointer: fine)').matches ? 'fine' :
+					win.matchMedia('(any-pointer: coarse)').matches ? 'coarse' :
+					win.matchMedia('(any-pointer: none)').matches ? 'none' : undefined
 				),
 				pointer: (
-					win.matchMedia('(pointer: fine)').matches ?
-					'fine' :
-					win.matchMedia('(pointer: coarse)').matches ?
-					'coarse' :
-					win.matchMedia('(pointer: none)').matches ?
-					'none' : undefined
+					win.matchMedia('(pointer: fine)').matches ? 'fine' :
+					win.matchMedia('(pointer: coarse)').matches ? 'coarse' :
+					win.matchMedia('(pointer: none)').matches ? 'none' : undefined
 				),
 				deviceAspectRatio: (
-					win.matchMedia(`(device-aspect-ratio: ${deviceAspectRatio})`).matches ?
-					deviceAspectRatio : undefined
+					win.matchMedia(`(device-aspect-ratio: ${deviceAspectRatio})`).matches ? deviceAspectRatio : undefined
 				),
 				deviceScreen: (
-					win.matchMedia(`(device-width: ${width}px) and (device-height: ${height}px)`).matches ?
-					`${width} x ${height}` : undefined
+					win.matchMedia(`(device-width: ${width}px) and (device-height: ${height}px)`).matches ? `${width} x ${height}` : undefined
 				),
 				displayMode: (
-					win.matchMedia('(display-mode: fullscreen)').matches ?
-					'fullscreen' :
-					win.matchMedia('(display-mode: standalone)').matches ?
-					'standalone' :
-					win.matchMedia('(display-mode: minimal-ui)').matches ?
-					'minimal-ui' :
-					win.matchMedia('(display-mode: browser)').matches ?
-					'browser' : undefined
+					win.matchMedia('(display-mode: fullscreen)').matches ? 'fullscreen' :
+					win.matchMedia('(display-mode: standalone)').matches ? 'standalone' :
+					win.matchMedia('(display-mode: minimal-ui)').matches ? 'minimal-ui' :
+					win.matchMedia('(display-mode: browser)').matches ? 'browser' : undefined
 				),
 				colorGamut: (
-					win.matchMedia('(color-gamut: srgb)').matches ?
-					'srgb' :
-					win.matchMedia('(color-gamut: p3)').matches ?
-					'p3' :
-					win.matchMedia('(color-gamut: rec2020)').matches ?
-					'rec2020' : undefined
+					win.matchMedia('(color-gamut: srgb)').matches ? 'srgb' :
+					win.matchMedia('(color-gamut: p3)').matches ? 'p3' :
+					win.matchMedia('(color-gamut: rec2020)').matches ? 'rec2020' : undefined
 				),
 				orientation: (
-					win.matchMedia('(orientation: landscape)').matches ?
-					'landscape' :
-					win.matchMedia('(orientation: portrait)').matches ?
-					'portrait' : undefined
-				),
-				screenQuery: getScreenMatchMedia(win)
+					win.matchMedia('(orientation: landscape)').matches ? 'landscape' :
+					win.matchMedia('(orientation: portrait)').matches ? 'portrait' : undefined
+				)
 			}
 
 			const style = getComputedStyle(body)
+
 			const mediaCSS = {
 				reducedMotion: style.getPropertyValue('--prefers-reduced-motion').trim() || undefined,
 				colorScheme: style.getPropertyValue('--prefers-color-scheme').trim() || undefined,
@@ -259,11 +213,29 @@ export const getCSSMedia = imports => {
 				displayMode: style.getPropertyValue('--display-mode').trim() || undefined,
 				colorGamut: style.getPropertyValue('--color-gamut').trim() || undefined,
 				orientation: style.getPropertyValue('--orientation').trim() || undefined,
-				screenQuery: getScreenMedia(body)
 			}
 
+			const importCSS = {
+				reducedMotion: style.getPropertyValue('--import-prefers-reduced-motion').trim() || undefined,
+				colorScheme: style.getPropertyValue('--import-prefers-color-scheme').trim() || undefined,
+				monochrome: style.getPropertyValue('--import-monochrome').trim() || undefined,
+				invertedColors: style.getPropertyValue('--import-inverted-colors').trim() || undefined,
+				forcedColors: style.getPropertyValue('--import-forced-colors').trim() || undefined,
+				anyHover: style.getPropertyValue('--import-any-hover').trim() || undefined,
+				hover: style.getPropertyValue('--import-hover').trim() || undefined,
+				anyPointer: style.getPropertyValue('--import-any-pointer').trim() || undefined,
+				pointer: style.getPropertyValue('--import-pointer').trim() || undefined,
+				deviceAspectRatio: style.getPropertyValue('--import-device-aspect-ratio').trim() || undefined,
+				deviceScreen: style.getPropertyValue('--import-device-screen').trim() || undefined,
+				displayMode: style.getPropertyValue('--import-display-mode').trim() || undefined,
+				colorGamut: style.getPropertyValue('--import-color-gamut').trim() || undefined,
+				orientation: style.getPropertyValue('--import-orientation').trim() || undefined
+			}
+
+			const screenQuery = getScreenMatchMedia(win)
+
 			logTestResult({ start, test: 'css media', passed: true })
-			return resolve({ mediaCSS, matchMediaCSS })
+			return resolve({ importCSS, mediaCSS, matchMediaCSS, screenQuery })
 		}
 		catch (error) {
 			logTestResult({ test: 'css media', passed: false })
diff --git a/style.css b/style.css
index f1cf7388..9397f077 100644
--- a/style.css
+++ b/style.css
@@ -573,8 +573,8 @@ input[type="radio"] {
 
 .gradient {
 	border: 1px solid #eee;
-	height: 50px;
-	margin: 15px auto;
+	height: 11px;
+    margin: 5px auto;
 }
 
 /* prefers dark */