From a725da9ef64498b9fb1690489d23b25ab707746f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Guilloux?= Date: Sat, 10 Sep 2022 19:38:11 +0200 Subject: [PATCH] fix(screens): fix @screen resolving --- package.json | 4 +-- pnpm-lock.yaml | 66 ++++++++++++++++++------------------- src/transforms/css.ts | 14 ++++++-- src/transforms/vue/style.ts | 5 +-- 4 files changed, 47 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index bcf326f5..59d96a3b 100644 --- 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 index 99599984..e83ef124 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,12 +30,12 @@ importers: rimraf: ^3.0.2 rollup: ^2.79.0 scule: ^0.3.2 - style-dictionary-esm: ^1.0.13 + style-dictionary-esm: ^1.0.14 tsup: ^6.2.3 typescript: ^4.8.3 unplugin: ^0.9.5 vite: ^3.1.0 - vitest: ^0.23.1 + vitest: ^0.23.2 webpack: ^5.74.0 dependencies: '@unocss/reset': 0.45.18 @@ -52,7 +52,7 @@ importers: 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_fur7awe7sddig5uusmg32radwu devDependencies: '@antfu/eslint-config': 0.26.3_itqs5654cmlnjraw6gjzqacppi @@ -70,7 +70,7 @@ importers: tsup: 6.2.3_typescript@4.8.3 typescript: 4.8.3 vite: 3.1.0 - vitest: 0.23.1 + vitest: 0.23.2 webpack: 5.74.0 playground: @@ -82,7 +82,7 @@ importers: vue: ^3.2.38 devDependencies: '@vitejs/plugin-vue': 3.1.0_vite@3.1.0+vue@3.2.39 - nuxt: /nuxt3/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0 + nuxt: /nuxt3/3.0.0-rc.10-27713626.270055b_vite@3.1.0 vite: 3.1.0 vite-plugin-inspect: 0.6.1_vite@3.1.0 vue: 3.2.39 @@ -668,11 +668,11 @@ packages: resolution: {integrity: sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==} dev: true - /@nuxt/kit-edge/3.0.0-rc.10-27711996.0ab29f6_4dwlpq3uo3pzstj2gqitvdgyci: - resolution: {integrity: sha512-y5/N70Fhv7HXPl+E21Xaau5aE+sJyuPFm049R4kKncmrcGFbeFJzQzMZPdGTngn35Fg3RvoI9+yZqQCJv2ll+A==} + /@nuxt/kit-edge/3.0.0-rc.10-27713626.270055b_4dwlpq3uo3pzstj2gqitvdgyci: + resolution: {integrity: sha512-kpu+7aGaNh4kJ5ME4DFrRpuJEAku8glvQVghEHR17Q1oF5OtVjeuIke8OWiQXkkqyCDEjv+LGj2y+HtH2+Ixog==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} dependencies: - '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.10-27711996.0ab29f6_4dwlpq3uo3pzstj2gqitvdgyci + '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.10-27713626.270055b_4dwlpq3uo3pzstj2gqitvdgyci c12: 0.2.11 consola: 2.15.3 defu: 6.1.0 @@ -698,11 +698,11 @@ packages: - webpack dev: true - /@nuxt/kit-edge/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0: - resolution: {integrity: sha512-y5/N70Fhv7HXPl+E21Xaau5aE+sJyuPFm049R4kKncmrcGFbeFJzQzMZPdGTngn35Fg3RvoI9+yZqQCJv2ll+A==} + /@nuxt/kit-edge/3.0.0-rc.10-27713626.270055b_vite@3.1.0: + resolution: {integrity: sha512-kpu+7aGaNh4kJ5ME4DFrRpuJEAku8glvQVghEHR17Q1oF5OtVjeuIke8OWiQXkkqyCDEjv+LGj2y+HtH2+Ixog==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} dependencies: - '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0 + '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.10-27713626.270055b_vite@3.1.0 c12: 0.2.11 consola: 2.15.3 defu: 6.1.0 @@ -788,8 +788,8 @@ packages: - webpack dev: true - /@nuxt/schema-edge/3.0.0-rc.10-27711996.0ab29f6_4dwlpq3uo3pzstj2gqitvdgyci: - resolution: {integrity: sha512-fBc6BhDUC4j6B13CpN5RZ6CeWJskH1kSj/qx3Gn/sx0Cwkir6dt+QZHJbWtkgRq98BR40oZ66k29B8OLmcEAPQ==} + /@nuxt/schema-edge/3.0.0-rc.10-27713626.270055b_4dwlpq3uo3pzstj2gqitvdgyci: + resolution: {integrity: sha512-Ad/z7q6pe8qL7zqWfPaMeqPNeOwSSfK4dfa87zunvrFffjJfy9N2I/CdXuN4z7zzIXkwieoKUTJVYJD5J4Y5vw==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} dependencies: c12: 0.2.11 @@ -809,8 +809,8 @@ packages: - webpack dev: true - /@nuxt/schema-edge/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0: - resolution: {integrity: sha512-fBc6BhDUC4j6B13CpN5RZ6CeWJskH1kSj/qx3Gn/sx0Cwkir6dt+QZHJbWtkgRq98BR40oZ66k29B8OLmcEAPQ==} + /@nuxt/schema-edge/3.0.0-rc.10-27713626.270055b_vite@3.1.0: + resolution: {integrity: sha512-Ad/z7q6pe8qL7zqWfPaMeqPNeOwSSfK4dfa87zunvrFffjJfy9N2I/CdXuN4z7zzIXkwieoKUTJVYJD5J4Y5vw==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} dependencies: c12: 0.2.11 @@ -908,13 +908,13 @@ packages: resolution: {integrity: sha512-EgxICRWv+VCkt3wjCuJUJqNOFACF3h6FX3Mj+hDXshf6ECvl/y8BWEVGC5T2N8tE/bFcNC6rEJxPsp4s+4+XOQ==} dev: true - /@nuxt/vite-builder-edge/3.0.0-rc.10-27711996.0ab29f6_vue@3.2.39: - resolution: {integrity: sha512-xnUxlM0amhipEk+NsgnIJc32Sb7vcl9ixWutrTbKcHMIsc8H0wje2m3YxmRwb/ILTYohs4IHygPkfvjbcI3IMg==} + /@nuxt/vite-builder-edge/3.0.0-rc.10-27713626.270055b_vue@3.2.39: + resolution: {integrity: sha512-W+hvI+obw0orW4T9kNr9LJ/RoalkD1j2c0jqWglIjviktX88uDV04++Ue8tTwNL3mXLFmrz7ACwSvqwtxZjdsg==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} peerDependencies: vue: ^3.2.39 dependencies: - '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.10-27711996.0ab29f6_4dwlpq3uo3pzstj2gqitvdgyci + '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.10-27713626.270055b_4dwlpq3uo3pzstj2gqitvdgyci '@rollup/plugin-replace': 4.0.0_rollup@2.79.0 '@vitejs/plugin-vue': 3.1.0_vite@3.1.0+vue@3.2.39 '@vitejs/plugin-vue-jsx': 2.0.1_vite@3.1.0+vue@3.2.39 @@ -5610,25 +5610,25 @@ packages: boolbase: 1.0.0 dev: true - /nuxi-edge/3.0.0-rc.10-27711996.0ab29f6: - resolution: {integrity: sha512-rY31ve5n/C7bqME5RZKF4SLbNKG4PivERMp3vDSSOz4FjSSC+P7qq1fKT/ZkZJYQcuE9PWwUoIa+frAeZxGz/A==} + /nuxi-edge/3.0.0-rc.10-27713626.270055b: + resolution: {integrity: sha512-7W6sKZkBTDc72gDyWRW4nbygJnFG4CaXkZ2BKPPWkK/CtmeJLCdrGkQIhrTAAymA7RcwY0VPmhWnQiw+VIyjUQ==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} hasBin: true optionalDependencies: fsevents: 2.3.2 dev: true - /nuxt3/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0: - resolution: {integrity: sha512-zxk9r6M5GZmu0tI9m0aoQQ+GVME4K2CuSE6ruYdwGjbALrTw8dlfoDuxml+BOubCrJV34XiQPUaK7hYnUf95Tg==} + /nuxt3/3.0.0-rc.10-27713626.270055b_vite@3.1.0: + resolution: {integrity: sha512-KT+YQ6d1r7kh7szWEJajVSv5P9rJc4vtM4alRAimZLq/yqg8AwLKya+xm3cj3Z8ZF87c7flfdgu4UORFpBn0KA==} engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0} hasBin: true dependencies: '@nuxt/devalue': 2.0.0 - '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0 - '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.10-27711996.0ab29f6_vite@3.1.0 + '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.10-27713626.270055b_vite@3.1.0 + '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.10-27713626.270055b_vite@3.1.0 '@nuxt/telemetry': 2.1.5_vite@3.1.0 '@nuxt/ui-templates': 0.3.3 - '@nuxt/vite-builder': /@nuxt/vite-builder-edge/3.0.0-rc.10-27711996.0ab29f6_vue@3.2.39 + '@nuxt/vite-builder': /@nuxt/vite-builder-edge/3.0.0-rc.10-27713626.270055b_vue@3.2.39 '@vue/reactivity': 3.2.39 '@vue/shared': 3.2.39 '@vueuse/head': 0.7.9_vue@3.2.39 @@ -5646,7 +5646,7 @@ packages: magic-string: 0.26.3 mlly: 0.5.14 nitropack: /nitropack-edge/0.5.2-27709289.11cc5cd_vite@3.1.0 - nuxi: /nuxi-edge/3.0.0-rc.10-27711996.0ab29f6 + nuxi: /nuxi-edge/3.0.0-rc.10-27713626.270055b ohash: 0.1.5 ohmyfetch: 0.4.18 pathe: 0.3.7 @@ -7386,8 +7386,8 @@ packages: acorn: 8.8.0 dev: true - /style-dictionary-esm/1.0.13: - resolution: {integrity: sha512-t+kNzdK0kWQPU5V4LgiR/gnOb5B8COnFc75SWNfXTBTKH6CMolne5IW1Fg+xdPmAeh/TKmLIlhCsINIFgctEaA==} + /style-dictionary-esm/1.0.14: + resolution: {integrity: sha512-+7TH+T8RV3dnARf2/MI9xyQATt2MZXNwCCRRFK+a6ErJbHLT/qjuvyGd20p7FCHnkuMbhcj45yvcWQXv5+6b5w==} engines: {node: '>=12.0.0'} hasBin: true dependencies: @@ -7583,8 +7583,8 @@ packages: resolution: {integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==} dev: false - /tinypool/0.2.4: - resolution: {integrity: sha512-Vs3rhkUH6Qq1t5bqtb816oT+HeJTXfwt2cbPH17sWHIYKTotQIFPk3tf2fgqRrVyMDVOc1EnPgzIxfIulXVzwQ==} + /tinypool/0.3.0: + resolution: {integrity: sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==} engines: {node: '>=14.0.0'} dev: true @@ -8232,8 +8232,8 @@ packages: optionalDependencies: fsevents: 2.3.2 - /vitest/0.23.1: - resolution: {integrity: sha512-kn9pG+h6VA3yj/xRvwgLKEd33rOlzMqJEg3tl5HSm3WUPlkY1Lr1FK8RN1uIqVKvFxmz6HGU3EQW+xW2kazRkQ==} + /vitest/0.23.2: + resolution: {integrity: sha512-kTBKp3ROPDkYC+x2zWt4znkDtnT08W1FQ6ngRFuqxpBGNuNVS+eWZKfffr8y2JGvEzZ9EzMAOcNaiqMj/FZqMw==} engines: {node: '>=v14.16.0'} hasBin: true peerDependencies: @@ -8262,7 +8262,7 @@ packages: local-pkg: 0.4.2 strip-literal: 0.4.0 tinybench: 2.1.5 - tinypool: 0.2.4 + tinypool: 0.3.0 tinyspy: 1.0.2 vite: 3.1.0 transitivePeerDependencies: diff --git a/src/transforms/css.ts b/src/transforms/css.ts index 8af3fb7c..f7a6067f 100644 --- 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 index ebec6e50..8e038de7 100644 --- 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) {' },