diff --git a/examples/interpol-timeline/libs/ratio.less b/examples/interpol-timeline/libs/ratio.less deleted file mode 100644 index 8a8b629..0000000 --- a/examples/interpol-timeline/libs/ratio.less +++ /dev/null @@ -1,189 +0,0 @@ -@viewport-reference-width: 375; -@viewport-reference-height: 667; -@viewport-reference-desktop-width: 1400; -@viewport-reference-desktop-height: 900; -@breakpoint-mobile: 320px; -@breakpoint-tablet: 768px; -@breakpoint-laptop: 1024px; -@breakpoint-bigLaptop: 1440px; -@breakpoint-desktop: 1680px; - -/** -Get VH value from ratio - */ -.ratioVW(@n1, @n2 : @viewport-reference-width) { - @isnumber: isnumber(@n1); - @returns: if((@isnumber), (@n1 / @n2) * 100vw, @n1); -} - -/** -Get VH value from ratio - */ -.ratioVH(@n1, @n2 : @viewport-reference-height) { - @isnumber: isnumber(@n1); - - // fallback for old browser who don't support css --var - @returns: if((@isnumber), (@n1 / @n2) * 100vh, @n1); - // vh value relative to css --vh variable - @var: var(--vh, 1vh); - @returns: if((@isnumber), ~"calc( (@{n1} / @{n2}) * (@{var} * 100) )", @n1); -} - -/** -Get VW value for property according to value in pixels - */ -.propertyVW(@prop, @n1, @n2 : @viewport-reference-width) { - @value-length-mobile: length(@n1); - - & when (@value-length-mobile = 1) { - @{property}: .ratioVW(@n1, @n2) [ @returns]; - } - & when (@value-length-mobile = 2) { - @{property}: .ratioVW(extract(@n1, 1), @n2) [ @returns] .ratioVW(extract(@n1, 2), @n2) [ - @returns]; - } - & when (@value-length-mobile = 3) { - @{property}: .ratioVW(extract(@n1, 1), @n2) [ @returns] .ratioVW(extract(@n1, 2), @n2) [ - @returns] .ratioVW(extract(@n1, 3), @n2) [ @returns]; - } - & when (@value-length-mobile = 4) { - @{property}: .ratioVW(extract(@n1, 1), @n2) [ @returns] .ratioVW(extract(@n1, 2), @n2) [ - @returns] .ratioVW(extract(@n1, 3), @n2) [ @returns] .ratioVW(extract(@n1, 4), @n2) [ - @returns]; - } -} - -/** -Get VH value for property according to value in pixels - */ -.propertyVH(@prop, @n1, @n2 : @viewport-reference-height, @aspect-ratio: true) { - @value-length-mobile: length(@n1); - - & when (@value-length-mobile = 1) { - @{property}: .ratioVH(@n1, @n2) [ @returns]; - } - & when (@value-length-mobile = 2) { - @{property}: .ratioVH(extract(@n1, 1), @n2) [ @returns] .ratioVH(extract(@n1, 2), @n2) [ - @returns]; - } - & when (@value-length-mobile = 3) { - @{property}: .ratioVH(extract(@n1, 1), @n2) [ @returns] .ratioVH(extract(@n1, 2), @n2) [ - @returns] .ratioVH(extract(@n1, 3), @n2) [ @returns]; - } - & when (@value-length-mobile = 4) { - @{property}: .ratioVH(extract(@n1, 1), @n2) [ @returns] .ratioVH(extract(@n1, 2), @n2) [ - @returns] .ratioVH(extract(@n1, 3), @n2) [ @returns] .ratioVH(extract(@n1, 4), @n2) [ - @returns]; - } - - & when (@aspect-ratio = true) { - // calc viewport height - @local-viewport-height: @viewport-reference-desktop-height + 1; - - @media (max-aspect-ratio: ~"@{viewport-reference-desktop-width} / @{local-viewport-height}") { - .propertyVW(@prop, @n1, @n2 : @viewport-reference-desktop-width); - } - } -} - -/** -Responsive Property -*/ -.propertyViewport( - @prop, - @value1, - @value2: @value1, - @breakpoint: @breakpoint-tablet, - @capValue: false, - @aspect-ratio: true -) { - .propertyVW(@prop, @value1, @n2 : @viewport-reference-width); - @media (min-width: @breakpoint) { - .propertyVH(@prop, @value2, @n2 : @viewport-reference-desktop-height, @aspect-ratio); - } - - & when(@capValue) { - @media (min-width: @breakpoint-desktop) { - @value2-length: length(@value2); - - & when (@value2-length = 1) { - @{property}: .toPx(@value2) [ @returns]; - } - & when (@value2-length = 2) { - @{property}: .toPx(extract(@value2, 1)) [ @returns] .toPx(extract(@value2, 2)) [ @returns]; - } - & when (@value2-length = 3) { - @{property}: .toPx(extract(@value2, 1)) [ @returns] .toPx(extract(@value2, 2)) [ @returns] - .toPx(extract(@value2, 3)) [ @returns]; - } - & when (@value2-length = 4) { - @{property}: .toPx(extract(@value2, 1)) [ @returns] .toPx(extract(@value2, 2)) [ @returns] - .toPx(extract(@value2, 3)) [ @returns] .toPx(extract(@value2, 4)) [ @returns]; - } - } - } -} - -/** -Pixel to Rem property, mobile & desktop -*/ -.rem(@prop, @value-mobile, @value-desktop: false, @breakpoint: @breakpoint-tablet) { - @value-length-mobile: length(@value-mobile); - - & when (@value-length-mobile = 1) { - @{property}: .toRem(@value-mobile) [ @returns]; - } - & when (@value-length-mobile = 2) { - @{property}: .toRem(extract(@value-mobile, 1)) [ @returns] .toRem(extract(@value-mobile, 2)) [ - @returns]; - } - & when (@value-length-mobile = 3) { - @{property}: .toRem(extract(@value-mobile, 1)) [ @returns] .toRem(extract(@value-mobile, 2)) [ - @returns] .toRem(extract(@value-mobile, 3)) [ @returns]; - } - & when (@value-length-mobile = 4) { - @{property}: .toRem(extract(@value-mobile, 1)) [ @returns] .toRem(extract(@value-mobile, 2)) [ - @returns] .toRem(extract(@value-mobile, 3)) [ @returns] .toRem(extract(@value-mobile, 4)) [ - @returns]; - } - - & when (not (@value-desktop = false)) { - @value-length-desktop: length(@value-desktop); - - @media (min-width: @breakpoint) { - & when (@value-length-desktop = 1) { - @{property}: .toRem(@value-desktop) [ @returns]; - } - & when (@value-length-desktop = 2) { - @{property}: .toRem(extract(@value-desktop, 1)) [ @returns] - .toRem(extract(@value-desktop, 2)) [ @returns]; - } - & when (@value-length-desktop = 3) { - @{property}: .toRem(extract(@value-desktop, 1)) [ @returns] - .toRem(extract(@value-desktop, 2)) [ @returns] .toRem(extract(@value-desktop, 3)) [ - @returns]; - } - & when (@value-length-desktop = 4) { - @{property}: .toRem(extract(@value-desktop, 1)) [ @returns] - .toRem(extract(@value-desktop, 2)) [ @returns] .toRem(extract(@value-desktop, 3)) [ - @returns] .toRem(extract(@value-desktop, 4)) [ @returns]; - } - } - } -} - -/** - * Set a property size to rem from px size - */ -.toRem(@value) { - @isnumber: isnumber(@value); - @returns: if(isnumber(@value), unit(@value, rem), @value); -} - -/** - * Set a property size to rem from px size - */ -.toPx(@value) { - @isnumber: isnumber(@value); - @returns: if(isnumber(@value), unit(@value, px), @value); -} diff --git a/examples/interpol-timeline/src/index.less b/examples/interpol-timeline/src/index.less index 21527ae..2999382 100644 --- a/examples/interpol-timeline/src/index.less +++ b/examples/interpol-timeline/src/index.less @@ -1,5 +1,3 @@ -@import (reference) "../libs/ratio.less"; - :root { --color-gray: #454545; --color-black-1: #313131; @@ -9,7 +7,6 @@ } html { - .propertyViewport(--font-size, 1, 2); font-size: var(--font-size); font-family: Inter, Avenir, Helvetica, Arial, sans-serif; font-weight: 400; @@ -23,7 +20,7 @@ html { body { margin: 0; - font-size: 16rem; + font-size: 1rem; min-width: 100vw; min-height: 100vh; overflow: hidden; @@ -32,8 +29,8 @@ body { .ball { position: absolute; - width: 50rem; - height: 50rem; + width: 5rem; + height: 5rem; border-radius: 50%; background-color: red; } diff --git a/package.json b/package.json index daa5656..e618f4b 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "clean": "rm -rf dist", "build": "FORCE_COLOR=1 turbo run build", "build:watch": "FORCE_COLOR=1 turbo run build -- --watch", - "dev": "FORCE_COLOR=1 turbo run dev", + "dev": "FORCE_COLOR=1 turbo run dev --concurrency 20", "test:watch": "vitest --reporter verbose", "test": "vitest run", "size": "size-limit", @@ -34,7 +34,7 @@ "jsdom": "^24.0.0", "prettier": "^3.2.5", "size-limit": "^11.0.2", - "turbo": "^1.12.4", + "turbo": "^1.13.3", "typescript": "^5.3.3", "vite": "^5.1.4", "vitest": "^1.3.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92977df..d576b01 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,10 +7,6 @@ settings: importers: .: - dependencies: - '@wbe/interpol': - specifier: ^0.13.0 - version: 0.13.0 devDependencies: '@changesets/cli': specifier: ^2.27.1 @@ -31,8 +27,8 @@ importers: specifier: ^11.0.2 version: 11.0.2 turbo: - specifier: ^1.12.4 - version: 1.12.4 + specifier: ^1.13.3 + version: 1.13.3 typescript: specifier: ^5.3.3 version: 5.3.3 @@ -2336,38 +2332,38 @@ packages: engines: {node: '>=8.0.0'} hasBin: true - turbo-darwin-64@1.12.4: - resolution: {integrity: sha512-dBwFxhp9isTa9RS/fz2gDVk5wWhKQsPQMozYhjM7TT4jTrnYn0ZJMzr7V3B/M/T8QF65TbniW7w1gtgxQgX5Zg==} + turbo-darwin-64@1.13.3: + resolution: {integrity: sha512-glup8Qx1qEFB5jerAnXbS8WrL92OKyMmg5Hnd4PleLljAeYmx+cmmnsmLT7tpaVZIN58EAAwu8wHC6kIIqhbWA==} cpu: [x64] os: [darwin] - turbo-darwin-arm64@1.12.4: - resolution: {integrity: sha512-1Uo5iI6xsJ1j9ObsqxYRsa3W26mEbUe6fnj4rQYV6kDaqYD54oAMJ6hM53q9rB8JvFxwdrUXGp3PwTw9A0qqkA==} + turbo-darwin-arm64@1.13.3: + resolution: {integrity: sha512-/np2xD+f/+9qY8BVtuOQXRq5f9LehCFxamiQnwdqWm5iZmdjygC5T3uVSYuagVFsZKMvX3ycySwh8dylGTl6lg==} cpu: [arm64] os: [darwin] - turbo-linux-64@1.12.4: - resolution: {integrity: sha512-ONg2aSqKP7LAQOg7ysmU5WpEQp4DGNxSlAiR7um+LKtbmC/UxogbR5+T+Uuq6zGuQ5kJyKjWJ4NhtvUswOqBsA==} + turbo-linux-64@1.13.3: + resolution: {integrity: sha512-G+HGrau54iAnbXLfl+N/PynqpDwi/uDzb6iM9hXEDG+yJnSJxaHMShhOkXYJPk9offm9prH33Khx2scXrYVW1g==} cpu: [x64] os: [linux] - turbo-linux-arm64@1.12.4: - resolution: {integrity: sha512-9FPufkwdgfIKg/9jj87Cdtftw8o36y27/S2vLN7FTR2pp9c0MQiTBOLVYadUr1FlShupddmaMbTkXEhyt9SdrA==} + turbo-linux-arm64@1.13.3: + resolution: {integrity: sha512-qWwEl5VR02NqRyl68/3pwp3c/olZuSp+vwlwrunuoNTm6JXGLG5pTeme4zoHNnk0qn4cCX7DFrOboArlYxv0wQ==} cpu: [arm64] os: [linux] - turbo-windows-64@1.12.4: - resolution: {integrity: sha512-2mOtxHW5Vjh/5rDVu/aFwsMzI+chs8XcEuJHlY1sYOpEymYTz+u6AXbnzRvwZFMrLKr7J7fQOGl+v96sLKbNdA==} + turbo-windows-64@1.13.3: + resolution: {integrity: sha512-Nudr4bRChfJzBPzEmpVV85VwUYRCGKecwkBFpbp2a4NtrJ3+UP1VZES653ckqCu2FRyRuS0n03v9euMbAvzH+Q==} cpu: [x64] os: [win32] - turbo-windows-arm64@1.12.4: - resolution: {integrity: sha512-nOY5wae9qnxPOpT1fRuYO0ks6dTwpKMPV6++VkDkamFDLFHUDVM/9kmD2UTeh1yyrKnrZksbb9zmShhmfj1wog==} + turbo-windows-arm64@1.13.3: + resolution: {integrity: sha512-ouJCgsVLd3icjRLmRvHQDDZnmGzT64GBupM1Y+TjtYn2LVaEBoV6hicFy8x5DUpnqdLy+YpCzRMkWlwhmkX7sQ==} cpu: [arm64] os: [win32] - turbo@1.12.4: - resolution: {integrity: sha512-yUJ7elEUSToiGwFZogXpYKJpQ0BvaMbkEuQECIWtkBLcmWzlMOt6bActsIm29oN83mRU0WbzGt4e8H1KHWedhg==} + turbo@1.13.3: + resolution: {integrity: sha512-n17HJv4F4CpsYTvKzUJhLbyewbXjq1oLCi90i5tW1TiWDz16ML1eDG7wi5dHaKxzh5efIM56SITnuVbMq5dk4g==} hasBin: true type-detect@4.0.8: @@ -4739,32 +4735,32 @@ snapshots: wcwidth: 1.0.1 yargs: 17.7.2 - turbo-darwin-64@1.12.4: + turbo-darwin-64@1.13.3: optional: true - turbo-darwin-arm64@1.12.4: + turbo-darwin-arm64@1.13.3: optional: true - turbo-linux-64@1.12.4: + turbo-linux-64@1.13.3: optional: true - turbo-linux-arm64@1.12.4: + turbo-linux-arm64@1.13.3: optional: true - turbo-windows-64@1.12.4: + turbo-windows-64@1.13.3: optional: true - turbo-windows-arm64@1.12.4: + turbo-windows-arm64@1.13.3: optional: true - turbo@1.12.4: + turbo@1.13.3: optionalDependencies: - turbo-darwin-64: 1.12.4 - turbo-darwin-arm64: 1.12.4 - turbo-linux-64: 1.12.4 - turbo-linux-arm64: 1.12.4 - turbo-windows-64: 1.12.4 - turbo-windows-arm64: 1.12.4 + turbo-darwin-64: 1.13.3 + turbo-darwin-arm64: 1.13.3 + turbo-linux-64: 1.13.3 + turbo-linux-arm64: 1.13.3 + turbo-windows-64: 1.13.3 + turbo-windows-arm64: 1.13.3 type-detect@4.0.8: {}