fix(screens): fix @screen resolving

Tahul · Sep 10, 2022 · a725da9 · a725da9
1 parent d001a39
commit a725da9
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "postcss-nested": "^5.0.6",
     "recast": "^0.21.2",
     "scule": "^0.3.2",
-    "style-dictionary-esm": "^1.0.13",
+    "style-dictionary-esm": "^1.0.14",
     "unplugin": "^0.9.5"
   },
   "devDependencies": {
@@ -96,7 +96,7 @@
     "tsup": "^6.2.3",
     "typescript": "^4.8.3",
     "vite": "^3.1.0",
-    "vitest": "^0.23.1",
+    "vitest": "^0.23.2",
     "webpack": "^5.74.0"
   },
   "pnpm": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/transforms/css.ts b/src/transforms/css.ts
@@ -1,5 +1,6 @@
 import json5 from 'json5'
-import { referencesRegex, stringify } from '../utils'
+import chalk from 'chalk'
+import { logger, referencesRegex, stringify } from '../utils'
 import type { TokensFunction } from '../types'
 
 const cssContentRegex = /css\(({.*?\})\)/mgs
@@ -84,9 +85,16 @@ export const transformCssFunction = (
               }
             }
             if (screenMatches) {
-              const screenToken = $tokens(`screens.${screenMatches[1]}` as any, { key: undefined })
+              const screen = screenMatches[1]
+              const screenToken = $tokens(`screens.${screen}` as any, { key: undefined })
+              const tokenValue = (screenToken as any)?.original?.value
+
+              if (!tokenValue) {
+                logger.warn(`This screen size is not defined: ${chalk.red(screen)}\n`)
+              }
+
               return {
-                [`@media (min-width: ${(screenToken as any).original.value})`]: value,
+                [`@media (min-width: ${tokenValue || '0px'})`]: value,
               }
             }
           }

diff --git a/src/transforms/vue/style.ts b/src/transforms/vue/style.ts
@@ -72,10 +72,7 @@ export function transformScreens(code = '', $tokens: TokensFunction): string {
         return `@media (min-width: ${screenToken.value}) {`
       }
 
-      logger.warn(
-        `This screen size is not defined: ${chalk.red(screenSize)}\n\n`,
-        'Available screen sizes: ', Object.keys(screens).map(screen => chalk.green(screen)).join(', '),
-      )
+      logger.warn(`This screen size is not defined: ${chalk.red(screenSize)}\n`)
 
       return '@media (min-width: 0px) {'
     },