Skip to content

Instantly share code, notes, and snippets.

@0xBigBoss

0xBigBoss/tamagui-debug.log

Created July 23, 2023 22:57
Show Gist options
  • Save 0xBigBoss/1a652e19ebcd55e2edfce1cb6aea7170 to your computer and use it in GitHub Desktop.
Save 0xBigBoss/1a652e19ebcd55e2edfce1cb6aea7170 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tamagui-debug.log
➤ YN0000: built @my/ui in 4528 ms
➤ YN0000: Done in 5s 16ms
- info Loaded env from /Users/0xbigboss/send/send-distributions-app/apps/next/.env.local
- info Loaded env from /Users/0xbigboss/send/send-distributions-app/apps/next/.env
Welcome to Tamagui!
You can update this monorepo to the latest Tamagui release just by running:
yarn upgrade:tamagui
We've set up a few things for you.
See the "excludeReactNativeWebExports" setting in next.config.js, which omits these
from the bundle: Switch, ProgressBar Picker, CheckBox, Touchable. To save more,
you can add ones you don't need like: AnimatedFlatList, FlatList, SectionList,
VirtualizedList, VirtualizedSectionList.
Even better, enable "useReactNativeWebLite" and you can remove the
excludeReactNativeWebExports setting altogether and get tree-shaking and
concurrent mode support as well.
🐣
Remove this log in next.config.js.
- warn You have enabled experimental features (appDir, scrollRestoration) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
- info Skipping validation of types
- info Linting...
- info Creating an optimized production build...

➡ [tamagui] (147ms):

Config ./.tamagui/tamagui.config.cjs
Components ./.tamagui/tamagui-components.config.cjs
./.tamagui/myui-components.config.cjs

 ➡ [tamagui] outputCSS: ./public/tamagui.css

web | screen 56 · 34 · 33 · 0 386ms
web | screen 100 · 53 · 53 · 0 390ms
web | screen 2 · 0 · 2 · 0 3ms
web | Layout 7 · 6 · 2 · 0 44ms
web | Header 9 · 6 · 2 · 0 48ms
web | Container 0 · 0 · 0 · 3 47ms
web | Panel 3 · 3 · 1 · 0 46ms
web | DistributionProgressCa 14 · 9 · 0 · 0 47ms
web | MyParagraph 0 · 0 · 0 · 1 9ms
web | OnboardingStepCard 0 · 0 · 0 · 4 9ms
web | Navigation 24 · 19 · 11 · 0 30ms
web | MyComponent 0 · 0 · 0 · 1 2ms
--- Incoming source ---
//! debug-verbose
import { Card, CardFrame, Square, YStack, styled, withStaticProperties } from 'tamagui'
export const QualifyingStepCardContainer = styled(YStack, {
name: 'QualifyingStepCardContainer',
w: '100%',
space: '$4',
bc: 'transparent',
maw: 320,
$gtXs: { maw: 400 },
$gtMd: { f: 1, w: '100%' },
$gtLg: { maw: '33%' },
})
export const QualifyingStepCardFrame = styled(CardFrame, {
name: 'QualifyingStepCard',
bordered: true,
elevate: true,
p: '$4',
opacity: 1,
br: '$8',
w: 320,
maw: '100%',
mx: 'auto',
position: 'relative',
overflow: 'hidden',
bc: 'transparent',
animation: 'lazy',
enterStyle: {
opacity: 0,
},
exitStyle: {
opacity: 0,
},
$gtXs: {
w: 400,
},
$gtSm: {
p: '$6',
},
$gtMd: {
flex: 1,
w: 320,
mx: 0,
},
$gtXl: {
w: 400,
},
})
export const QualifyingStepCardBackground = styled(Card.Background, {
name: 'QualifyingStepCardBackground',
opacity: 0.9,
br: '$8',
bg: 'black',
zIndex: -1,
})
export const QualifyingStepCardBody = styled(YStack, {
name: 'QualifyingStepCardBody',
zIndex: 1,
})
export const QualifyingStepCard = withStaticProperties(QualifyingStepCardFrame, {
Background: QualifyingStepCardBackground,
Body: QualifyingStepCardBody,
})
export type QualifyingStepCardProps = React.ComponentProps<typeof QualifyingStepCard>
export default ({ children, ...props }: QualifyingStepCardProps) => (
<QualifyingStepCard {...props}>
<QualifyingStepCard.Body>{children}</QualifyingStepCard.Body>
<QualifyingStepCard.Background {...props} />
</QualifyingStepCard>
)
--- /Users/0xbigboss/send/send-distributions-app/packages/ui/src/QualifyingStepCard.tsx ---
Time babel-parse: 1ms
Time load-tamagui: 0ms
allLoadedComponent modules tamagui, @my/ui, @tamagui/core
{
"doesUseValidImport": true,
"hasImportedTheme": false
}
Time import-check: 1ms
Extracted styled(QualifyingStepCardContainer)
{
"w": "100%",
"bc": "transparent",
"maw": 320,
"$gtXs": {
"maw": 400
},
"$gtMd": {
"f": 1,
"w": "100%"
},
"$gtLg": {
"maw": "33%"
}
}
classNames: {
"maxWidth-gtXs": "_maw-_gtXs_400px",
"flexGrow-gtMd": "_fg-_gtMd_1",
"flexShrink-gtMd": "_fs-_gtMd_1",
"flexBasis-gtMd": "_fb-_gtMd_auto",
"width-gtMd": "_w-_gtMd_10037",
"maxWidth-gtLg": "_maw-_gtLg_3337",
"width": "_w-10037",
"backgroundColor": "_bg-d0t1821305091",
"maxWidth": "_maw-320px"
}
rulesToInsert: @media (min-width: 661px){:root:root:root:root:root:root:root:root ._maw-_gtXs_400px{max-width:400px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_10037{width:100%;}}
@media (min-width: 1281px){:root:root:root:root:root:root:root:root:root:root:root ._maw-_gtLg_3337{max-width:33%;}}
:root ._w-10037{width:100%;}
:root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
:root ._maw-320px{max-width:320px;}
adding styled() rule: ._maw-_gtXs_400px @media (min-width: 661px){:root:root:root:root:root:root:root:root ._maw-_gtXs_400px{max-width:400px;}}
adding styled() rule: ._fg-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
adding styled() rule: ._fs-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
adding styled() rule: ._fb-_gtMd_auto @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
adding styled() rule: ._w-_gtMd_10037 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_10037{width:100%;}}
adding styled() rule: ._maw-_gtLg_3337 @media (min-width: 1281px){:root:root:root:root:root:root:root:root:root:root:root ._maw-_gtLg_3337{max-width:33%;}}
adding styled() rule: ._w-10037 :root ._w-10037{width:100%;}
adding styled() rule: ._bg-d0t1821305091 :root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
adding styled() rule: ._maw-320px :root ._maw-320px{max-width:320px;}
Extracted styled(QualifyingStepCardContainer)
Extracted styled(QualifyingStepCardFrame)
{
"p": "$4",
"opacity": 1,
"br": "$8",
"w": 320,
"maw": "100%",
"mx": "auto",
"position": "relative",
"overflow": "hidden",
"bc": "transparent",
"$gtXs": {
"w": 400
},
"$gtSm": {
"p": "$6"
},
"$gtMd": {
"flex": 1,
"w": 320,
"mx": 0
},
"$gtXl": {
"w": 400
}
}
classNames: {
"width-gtXs": "_w-_gtXs_400px",
"paddingTop-gtSm": "_pt-_gtSm_1316330269",
"paddingRight-gtSm": "_pr-_gtSm_1316330269",
"paddingBottom-gtSm": "_pb-_gtSm_1316330269",
"paddingLeft-gtSm": "_pl-_gtSm_1316330269",
"flexGrow-gtMd": "_fg-_gtMd_1",
"flexShrink-gtMd": "_fs-_gtMd_1",
"flexBasis-gtMd": "_fb-_gtMd_auto",
"width-gtMd": "_w-_gtMd_320px",
"marginRight-gtMd": "_mr-_gtMd_0px",
"marginLeft-gtMd": "_ml-_gtMd_0px",
"width-gtXl": "_w-_gtXl_400px",
"paddingTop": "_pt-1316330145",
"paddingRight": "_pr-1316330145",
"paddingBottom": "_pb-1316330145",
"paddingLeft": "_pl-1316330145",
"opacity": "_o-1",
"borderTopLeftRadius": "_btlr-1307610122",
"borderTopRightRadius": "_btrr-1307610122",
"borderBottomRightRadius": "_bbrr-1307610122",
"borderBottomLeftRadius": "_bblr-1307610122",
"width": "_w-320px",
"maxWidth": "_maw-10037",
"marginRight": "_mr-auto",
"marginLeft": "_ml-auto",
"position": "_pos-relative",
"overflowX": "_ox-hidden",
"overflowY": "_oy-hidden",
"backgroundColor": "_bg-d0t1821305091"
}
rulesToInsert: @media (min-width: 661px){:root:root:root:root:root:root:root:root ._w-_gtXs_400px{width:400px;}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pt-_gtSm_1316330269{padding-top:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pr-_gtSm_1316330269{padding-right:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pb-_gtSm_1316330269{padding-bottom:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pl-_gtSm_1316330269{padding-left:var(--space-15);}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_320px{width:320px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._mr-_gtMd_0px{margin-right:0px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._ml-_gtMd_0px{margin-left:0px;}}
@media (min-width: 1421px){:root:root:root:root:root:root:root:root:root:root:root:root ._w-_gtXl_400px{width:400px;}}
:root ._pt-1316330145{padding-top:var(--space-11);}
:root ._pr-1316330145{padding-right:var(--space-11);}
:root ._pb-1316330145{padding-bottom:var(--space-11);}
:root ._pl-1316330145{padding-left:var(--space-11);}
:root ._o-1{opacity:1;}
:root ._btlr-1307610122{border-top-left-radius:var(--radius-9);}
:root ._btrr-1307610122{border-top-right-radius:var(--radius-9);}
:root ._bbrr-1307610122{border-bottom-right-radius:var(--radius-9);}
:root ._bblr-1307610122{border-bottom-left-radius:var(--radius-9);}
:root ._w-320px{width:320px;}
:root ._maw-10037{max-width:100%;}
:root ._mr-auto{margin-right:auto;}
:root ._ml-auto{margin-left:auto;}
:root ._pos-relative{position:relative;}
:root ._ox-hidden{overflow-x:hidden;}
:root ._oy-hidden{overflow-y:hidden;}
:root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
adding styled() rule: ._w-_gtXs_400px @media (min-width: 661px){:root:root:root:root:root:root:root:root ._w-_gtXs_400px{width:400px;}}
adding styled() rule: ._pt-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pt-_gtSm_1316330269{padding-top:var(--space-15);}}
adding styled() rule: ._pr-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pr-_gtSm_1316330269{padding-right:var(--space-15);}}
adding styled() rule: ._pb-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pb-_gtSm_1316330269{padding-bottom:var(--space-15);}}
adding styled() rule: ._pl-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pl-_gtSm_1316330269{padding-left:var(--space-15);}}
adding styled() rule: ._fg-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
adding styled() rule: ._fs-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
adding styled() rule: ._fb-_gtMd_auto @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
adding styled() rule: ._w-_gtMd_320px @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_320px{width:320px;}}
adding styled() rule: ._mr-_gtMd_0px @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._mr-_gtMd_0px{margin-right:0px;}}
adding styled() rule: ._ml-_gtMd_0px @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._ml-_gtMd_0px{margin-left:0px;}}
adding styled() rule: ._w-_gtXl_400px @media (min-width: 1421px){:root:root:root:root:root:root:root:root:root:root:root:root ._w-_gtXl_400px{width:400px;}}
adding styled() rule: ._pt-1316330145 :root ._pt-1316330145{padding-top:var(--space-11);}
adding styled() rule: ._pr-1316330145 :root ._pr-1316330145{padding-right:var(--space-11);}
adding styled() rule: ._pb-1316330145 :root ._pb-1316330145{padding-bottom:var(--space-11);}
adding styled() rule: ._pl-1316330145 :root ._pl-1316330145{padding-left:var(--space-11);}
adding styled() rule: ._o-1 :root ._o-1{opacity:1;}
adding styled() rule: ._btlr-1307610122 :root ._btlr-1307610122{border-top-left-radius:var(--radius-9);}
adding styled() rule: ._btrr-1307610122 :root ._btrr-1307610122{border-top-right-radius:var(--radius-9);}
adding styled() rule: ._bbrr-1307610122 :root ._bbrr-1307610122{border-bottom-right-radius:var(--radius-9);}
adding styled() rule: ._bblr-1307610122 :root ._bblr-1307610122{border-bottom-left-radius:var(--radius-9);}
adding styled() rule: ._w-320px :root ._w-320px{width:320px;}
adding styled() rule: ._maw-10037 :root ._maw-10037{max-width:100%;}
adding styled() rule: ._mr-auto :root ._mr-auto{margin-right:auto;}
adding styled() rule: ._ml-auto :root ._ml-auto{margin-left:auto;}
adding styled() rule: ._pos-relative :root ._pos-relative{position:relative;}
adding styled() rule: ._ox-hidden :root ._ox-hidden{overflow-x:hidden;}
adding styled() rule: ._oy-hidden :root ._oy-hidden{overflow-y:hidden;}
adding styled() rule: ._bg-d0t1821305091 :root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
Extracted styled(QualifyingStepCardFrame)
Extracted styled(QualifyingStepCardBody)
{
"zIndex": 1
}
classNames: {
"zIndex": "_zi-1"
}
rulesToInsert: :root ._zi-1{z-index:1;}
adding styled() rule: ._zi-1 :root ._zi-1{z-index:1;}
Extracted styled(QualifyingStepCardBody)
Time jsx-element: 4ms
- Binding not import declaration, skip
Time jsx-element: 0ms
Time jsx-element: 0ms
Time jsx-done: 0ms
Total time: 5ms
-------- output code -------
import { Card, CardFrame, Square, YStack, styled, withStaticProperties } from 'tamagui';
export const QualifyingStepCardContainer = styled(YStack, {
name: 'QualifyingStepCardContainer',
w: '100%',
space: '$4',
bc: 'transparent',
maw: 320,
$gtXs: {
maw: 400
},
$gtMd: {
f: 1,
w: '100%'
},
$gtLg: {
maw: '33%'
}
});
export const QualifyingStepCardFrame = styled(CardFrame, {
name: 'QualifyingStepCard',
bordered: true,
elevate: true,
p: '$4',
"opacity": "_o-1",
br: '$8',
w: 320,
maw: '100%',
mx: 'auto',
"position": "_pos-relative",
overflow: 'hidden',
bc: 'transparent',
animation: 'lazy',
enterStyle: {
opacity: 0
},
exitStyle: {
opacity: 0
},
$gtXs: {
w: 400
},
$gtSm: {
p: '$6'
},
$gtMd: {
flex: 1,
w: 320,
mx: 0
},
$gtXl: {
w: 400
}
});
export const QualifyingStepCardBackground = styled(Card.Background, {
name: 'QualifyingStepCardBackground',
opacity: 0.9,
br: '$8',
bg: 'black',
zIndex: -1
});
export const QualifyingStepCardBody = styled(YStack, {
name: 'QualifyingStepCardBody',
"zIndex": "_zi-1"
});
export const QualifyingStepCard = withStaticProperties(QualifyingStepCardFrame, {
Background: QualifyingStepCardBackground,
Body: QualifyingStepCardBody
});
export type QualifyingStepCardProps = React.ComponentProps<typeof QualifyingStepCard>;
export default (({
children,
...props
}: QualifyingStepCardProps) => <QualifyingStepCard {...props}>
<QualifyingStepCard.Body>{children}</QualifyingStepCard.Body>
<QualifyingStepCard.Background {...props} />
</QualifyingStepCard>);
-------- output style --------
@media (min-width: 661px){:root:root:root:root:root:root:root:root ._maw-_gtXs_400px{max-width:400px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_10037{width:100%;}}
@media (min-width: 1281px){:root:root:root:root:root:root:root:root:root:root:root ._maw-_gtLg_3337{max-width:33%;}}
:root ._w-10037{width:100%;}
:root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
:root ._maw-320px{max-width:320px;}
@media (min-width: 661px){:root:root:root:root:root:root:root:root ._w-_gtXs_400px{width:400px;}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pt-_gtSm_1316330269{padding-top:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pr-_gtSm_1316330269{padding-right:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pb-_gtSm_1316330269{padding-bottom:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pl-_gtSm_1316330269{padding-left:var(--space-15);}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_320px{width:320px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._mr-_gtMd_0px{margin-right:0px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._ml-_gtMd_0px{margin-left:0px;}}
@media (min-width: 1421px){:root:root:root:root:root:root:root:root:root:root:root:root ._w-_gtXl_400px{width:400px;}}
:root ._pt-1316330145{padding-top:var(--space-11);}
:root ._pr-1316330145{padding-right:var(--space-11);}
:root ._pb-1316330145{padding-bottom:var(--space-11);}
:root ._pl-1316330145{padding-left:var(--space-11);}
:root ._o-1{opacity:1;}
:root ._btlr-1307610122{border-top-left-radius:var(--radius-9);}
:root ._btrr-1307610122{border-top-right-radius:var(--radius-9);}
:root ._bbrr-1307610122{border-bottom-right-radius:var(--radius-9);}
:root ._bblr-1307610122{border-bottom-left-radius:var(--radius-9);}
:root ._w-320px{width:320px;}
:root ._maw-10037{max-width:100%;}
:root ._mr-auto{margin-right:auto;}
:root ._ml-auto{margin-left:auto;}
:root ._pos-relative{position:relative;}
:root ._ox-hidden{overflow-x:hidden;}
:root ._oy-hidden{overflow-y:hidden;}
:root ._zi-1{z-index:1;}
web | QualifyingStepCard 0 · 0 · 0 · 3 7ms
web | Pre 0 · 0 · 0 · 1 7ms
web | NativeToast 1 · 0 · 1 · 0 3ms
web | screen 2 · 0 · 2 · 0 69ms
web | screen 56 · 34 · 33 · 0 72ms
web | screen 100 · 53 · 53 · 0 281ms
web | Panel 3 · 3 · 1 · 0 37ms
web | Layout 7 · 6 · 2 · 0 38ms
web | Header 9 · 6 · 2 · 0 39ms
web | DistributionProgressCa 14 · 9 · 0 · 0 38ms
web | MyParagraph 0 · 0 · 0 · 1 9ms
web | OnboardingStepCard 0 · 0 · 0 · 4 8ms
web | Container 0 · 0 · 0 · 3 9ms
web | Navigation 24 · 19 · 11 · 0 30ms
--- Incoming source ---
//! debug-verbose
import { Card, CardFrame, Square, YStack, styled, withStaticProperties } from 'tamagui'
export const QualifyingStepCardContainer = styled(YStack, {
name: 'QualifyingStepCardContainer',
w: '100%',
space: '$4',
bc: 'transparent',
maw: 320,
$gtXs: { maw: 400 },
$gtMd: { f: 1, w: '100%' },
$gtLg: { maw: '33%' },
})
export const QualifyingStepCardFrame = styled(CardFrame, {
name: 'QualifyingStepCard',
bordered: true,
elevate: true,
p: '$4',
opacity: 1,
br: '$8',
w: 320,
maw: '100%',
mx: 'auto',
position: 'relative',
overflow: 'hidden',
bc: 'transparent',
animation: 'lazy',
enterStyle: {
opacity: 0,
},
exitStyle: {
opacity: 0,
},
$gtXs: {
w: 400,
},
$gtSm: {
p: '$6',
},
$gtMd: {
flex: 1,
w: 320,
mx: 0,
},
$gtXl: {
w: 400,
},
})
export const QualifyingStepCardBackground = styled(Card.Background, {
name: 'QualifyingStepCardBackground',
opacity: 0.9,
br: '$8',
bg: 'black',
zIndex: -1,
})
export const QualifyingStepCardBody = styled(YStack, {
name: 'QualifyingStepCardBody',
zIndex: 1,
})
export const QualifyingStepCard = withStaticProperties(QualifyingStepCardFrame, {
Background: QualifyingStepCardBackground,
Body: QualifyingStepCardBody,
})
export type QualifyingStepCardProps = React.ComponentProps<typeof QualifyingStepCard>
export default ({ children, ...props }: QualifyingStepCardProps) => (
<QualifyingStepCard {...props}>
<QualifyingStepCard.Body>{children}</QualifyingStepCard.Body>
<QualifyingStepCard.Background {...props} />
</QualifyingStepCard>
)
--- /Users/0xbigboss/send/send-distributions-app/packages/ui/src/QualifyingStepCard.tsx ---
Time babel-parse: 2ms
Time load-tamagui: 0ms
allLoadedComponent modules tamagui, @my/ui, @tamagui/core
{
"doesUseValidImport": true,
"hasImportedTheme": false
}
Time import-check: 0ms
Extracted styled(QualifyingStepCardContainer)
{
"w": "100%",
"bc": "transparent",
"maw": 320,
"$gtXs": {
"maw": 400
},
"$gtMd": {
"f": 1,
"w": "100%"
},
"$gtLg": {
"maw": "33%"
}
}
classNames: {
"maxWidth-gtXs": "_maw-_gtXs_400px",
"flexGrow-gtMd": "_fg-_gtMd_1",
"flexShrink-gtMd": "_fs-_gtMd_1",
"flexBasis-gtMd": "_fb-_gtMd_auto",
"width-gtMd": "_w-_gtMd_10037",
"maxWidth-gtLg": "_maw-_gtLg_3337",
"width": "_w-10037",
"backgroundColor": "_bg-d0t1821305091",
"maxWidth": "_maw-320px"
}
rulesToInsert: @media (min-width: 661px){:root:root:root:root:root:root:root:root ._maw-_gtXs_400px{max-width:400px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_10037{width:100%;}}
@media (min-width: 1281px){:root:root:root:root:root:root:root:root:root:root:root ._maw-_gtLg_3337{max-width:33%;}}
:root ._w-10037{width:100%;}
:root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
:root ._maw-320px{max-width:320px;}
adding styled() rule: ._maw-_gtXs_400px @media (min-width: 661px){:root:root:root:root:root:root:root:root ._maw-_gtXs_400px{max-width:400px;}}
adding styled() rule: ._fg-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
adding styled() rule: ._fs-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
adding styled() rule: ._fb-_gtMd_auto @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
adding styled() rule: ._w-_gtMd_10037 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_10037{width:100%;}}
adding styled() rule: ._maw-_gtLg_3337 @media (min-width: 1281px){:root:root:root:root:root:root:root:root:root:root:root ._maw-_gtLg_3337{max-width:33%;}}
adding styled() rule: ._w-10037 :root ._w-10037{width:100%;}
adding styled() rule: ._bg-d0t1821305091 :root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
adding styled() rule: ._maw-320px :root ._maw-320px{max-width:320px;}
Extracted styled(QualifyingStepCardContainer)
Extracted styled(QualifyingStepCardFrame)
{
"p": "$4",
"opacity": 1,
"br": "$8",
"w": 320,
"maw": "100%",
"mx": "auto",
"position": "relative",
"overflow": "hidden",
"bc": "transparent",
"$gtXs": {
"w": 400
},
"$gtSm": {
"p": "$6"
},
"$gtMd": {
"flex": 1,
"w": 320,
"mx": 0
},
"$gtXl": {
"w": 400
}
}
classNames: {
"width-gtXs": "_w-_gtXs_400px",
"paddingTop-gtSm": "_pt-_gtSm_1316330269",
"paddingRight-gtSm": "_pr-_gtSm_1316330269",
"paddingBottom-gtSm": "_pb-_gtSm_1316330269",
"paddingLeft-gtSm": "_pl-_gtSm_1316330269",
"flexGrow-gtMd": "_fg-_gtMd_1",
"flexShrink-gtMd": "_fs-_gtMd_1",
"flexBasis-gtMd": "_fb-_gtMd_auto",
"width-gtMd": "_w-_gtMd_320px",
"marginRight-gtMd": "_mr-_gtMd_0px",
"marginLeft-gtMd": "_ml-_gtMd_0px",
"width-gtXl": "_w-_gtXl_400px",
"paddingTop": "_pt-1316330145",
"paddingRight": "_pr-1316330145",
"paddingBottom": "_pb-1316330145",
"paddingLeft": "_pl-1316330145",
"opacity": "_o-1",
"borderTopLeftRadius": "_btlr-1307610122",
"borderTopRightRadius": "_btrr-1307610122",
"borderBottomRightRadius": "_bbrr-1307610122",
"borderBottomLeftRadius": "_bblr-1307610122",
"width": "_w-320px",
"maxWidth": "_maw-10037",
"marginRight": "_mr-auto",
"marginLeft": "_ml-auto",
"position": "_pos-relative",
"overflowX": "_ox-hidden",
"overflowY": "_oy-hidden",
"backgroundColor": "_bg-d0t1821305091"
}
rulesToInsert: @media (min-width: 661px){:root:root:root:root:root:root:root:root ._w-_gtXs_400px{width:400px;}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pt-_gtSm_1316330269{padding-top:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pr-_gtSm_1316330269{padding-right:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pb-_gtSm_1316330269{padding-bottom:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pl-_gtSm_1316330269{padding-left:var(--space-15);}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_320px{width:320px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._mr-_gtMd_0px{margin-right:0px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._ml-_gtMd_0px{margin-left:0px;}}
@media (min-width: 1421px){:root:root:root:root:root:root:root:root:root:root:root:root ._w-_gtXl_400px{width:400px;}}
:root ._pt-1316330145{padding-top:var(--space-11);}
:root ._pr-1316330145{padding-right:var(--space-11);}
:root ._pb-1316330145{padding-bottom:var(--space-11);}
:root ._pl-1316330145{padding-left:var(--space-11);}
:root ._o-1{opacity:1;}
:root ._btlr-1307610122{border-top-left-radius:var(--radius-9);}
:root ._btrr-1307610122{border-top-right-radius:var(--radius-9);}
:root ._bbrr-1307610122{border-bottom-right-radius:var(--radius-9);}
:root ._bblr-1307610122{border-bottom-left-radius:var(--radius-9);}
:root ._w-320px{width:320px;}
:root ._maw-10037{max-width:100%;}
:root ._mr-auto{margin-right:auto;}
:root ._ml-auto{margin-left:auto;}
:root ._pos-relative{position:relative;}
:root ._ox-hidden{overflow-x:hidden;}
:root ._oy-hidden{overflow-y:hidden;}
:root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
adding styled() rule: ._w-_gtXs_400px @media (min-width: 661px){:root:root:root:root:root:root:root:root ._w-_gtXs_400px{width:400px;}}
adding styled() rule: ._pt-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pt-_gtSm_1316330269{padding-top:var(--space-15);}}
adding styled() rule: ._pr-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pr-_gtSm_1316330269{padding-right:var(--space-15);}}
adding styled() rule: ._pb-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pb-_gtSm_1316330269{padding-bottom:var(--space-15);}}
adding styled() rule: ._pl-_gtSm_1316330269 @media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pl-_gtSm_1316330269{padding-left:var(--space-15);}}
adding styled() rule: ._fg-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
adding styled() rule: ._fs-_gtMd_1 @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
adding styled() rule: ._fb-_gtMd_auto @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
adding styled() rule: ._w-_gtMd_320px @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_320px{width:320px;}}
adding styled() rule: ._mr-_gtMd_0px @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._mr-_gtMd_0px{margin-right:0px;}}
adding styled() rule: ._ml-_gtMd_0px @media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._ml-_gtMd_0px{margin-left:0px;}}
adding styled() rule: ._w-_gtXl_400px @media (min-width: 1421px){:root:root:root:root:root:root:root:root:root:root:root:root ._w-_gtXl_400px{width:400px;}}
adding styled() rule: ._pt-1316330145 :root ._pt-1316330145{padding-top:var(--space-11);}
adding styled() rule: ._pr-1316330145 :root ._pr-1316330145{padding-right:var(--space-11);}
adding styled() rule: ._pb-1316330145 :root ._pb-1316330145{padding-bottom:var(--space-11);}
adding styled() rule: ._pl-1316330145 :root ._pl-1316330145{padding-left:var(--space-11);}
adding styled() rule: ._o-1 :root ._o-1{opacity:1;}
adding styled() rule: ._btlr-1307610122 :root ._btlr-1307610122{border-top-left-radius:var(--radius-9);}
adding styled() rule: ._btrr-1307610122 :root ._btrr-1307610122{border-top-right-radius:var(--radius-9);}
adding styled() rule: ._bbrr-1307610122 :root ._bbrr-1307610122{border-bottom-right-radius:var(--radius-9);}
adding styled() rule: ._bblr-1307610122 :root ._bblr-1307610122{border-bottom-left-radius:var(--radius-9);}
adding styled() rule: ._w-320px :root ._w-320px{width:320px;}
adding styled() rule: ._maw-10037 :root ._maw-10037{max-width:100%;}
adding styled() rule: ._mr-auto :root ._mr-auto{margin-right:auto;}
adding styled() rule: ._ml-auto :root ._ml-auto{margin-left:auto;}
adding styled() rule: ._pos-relative :root ._pos-relative{position:relative;}
adding styled() rule: ._ox-hidden :root ._ox-hidden{overflow-x:hidden;}
adding styled() rule: ._oy-hidden :root ._oy-hidden{overflow-y:hidden;}
adding styled() rule: ._bg-d0t1821305091 :root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
Extracted styled(QualifyingStepCardFrame)
Extracted styled(QualifyingStepCardBody)
{
"zIndex": 1
}
classNames: {
"zIndex": "_zi-1"
}
rulesToInsert: :root ._zi-1{z-index:1;}
adding styled() rule: ._zi-1 :root ._zi-1{z-index:1;}
Extracted styled(QualifyingStepCardBody)
Time jsx-element: 4ms
- Binding not import declaration, skip
Time jsx-element: 0ms
Time jsx-element: 0ms
Time jsx-done: 0ms
Total time: 4ms
web | MyComponent 0 · 0 · 0 · 1 7ms
web | Pre 0 · 0 · 0 · 1 6ms
-------- output code -------
import { Card, CardFrame, Square, YStack, styled, withStaticProperties } from 'tamagui';
export const QualifyingStepCardContainer = styled(YStack, {
name: 'QualifyingStepCardContainer',
w: '100%',
space: '$4',
bc: 'transparent',
maw: 320,
$gtXs: {
maw: 400
},
$gtMd: {
f: 1,
w: '100%'
},
$gtLg: {
maw: '33%'
}
});
export const QualifyingStepCardFrame = styled(CardFrame, {
name: 'QualifyingStepCard',
bordered: true,
elevate: true,
p: '$4',
"opacity": "_o-1",
br: '$8',
w: 320,
maw: '100%',
mx: 'auto',
"position": "_pos-relative",
overflow: 'hidden',
bc: 'transparent',
animation: 'lazy',
enterStyle: {
opacity: 0
},
exitStyle: {
opacity: 0
},
$gtXs: {
w: 400
},
$gtSm: {
p: '$6'
},
$gtMd: {
flex: 1,
w: 320,
mx: 0
},
$gtXl: {
w: 400
}
});
export const QualifyingStepCardBackground = styled(Card.Background, {
name: 'QualifyingStepCardBackground',
opacity: 0.9,
br: '$8',
bg: 'black',
zIndex: -1
});
export const QualifyingStepCardBody = styled(YStack, {
name: 'QualifyingStepCardBody',
"zIndex": "_zi-1"
});
export const QualifyingStepCard = withStaticProperties(QualifyingStepCardFrame, {
Background: QualifyingStepCardBackground,
Body: QualifyingStepCardBody
});
export type QualifyingStepCardProps = React.ComponentProps<typeof QualifyingStepCard>;
export default (({
children,
...props
}: QualifyingStepCardProps) => <QualifyingStepCard {...props}>
<QualifyingStepCard.Body>{children}</QualifyingStepCard.Body>
<QualifyingStepCard.Background {...props} />
</QualifyingStepCard>);
-------- output style --------
@media (min-width: 661px){:root:root:root:root:root:root:root:root ._maw-_gtXs_400px{max-width:400px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fg-_gtMd_1{flex-grow:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fs-_gtMd_1{flex-shrink:1;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._fb-_gtMd_auto{flex-basis:auto;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_10037{width:100%;}}
@media (min-width: 1281px){:root:root:root:root:root:root:root:root:root:root:root ._maw-_gtLg_3337{max-width:33%;}}
:root ._w-10037{width:100%;}
:root ._bg-d0t1821305091{background-color:rgba(0,0,0,0.00);}
:root ._maw-320px{max-width:320px;}
@media (min-width: 661px){:root:root:root:root:root:root:root:root ._w-_gtXs_400px{width:400px;}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pt-_gtSm_1316330269{padding-top:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pr-_gtSm_1316330269{padding-right:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pb-_gtSm_1316330269{padding-bottom:var(--space-15);}}
@media (min-width: 801px){:root:root:root:root:root:root:root:root:root ._pl-_gtSm_1316330269{padding-left:var(--space-15);}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._w-_gtMd_320px{width:320px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._mr-_gtMd_0px{margin-right:0px;}}
@media (min-width: 1021px){:root:root:root:root:root:root:root:root:root:root ._ml-_gtMd_0px{margin-left:0px;}}
@media (min-width: 1421px){:root:root:root:root:root:root:root:root:root:root:root:root ._w-_gtXl_400px{width:400px;}}
:root ._pt-1316330145{padding-top:var(--space-11);}
:root ._pr-1316330145{padding-right:var(--space-11);}
:root ._pb-1316330145{padding-bottom:var(--space-11);}
:root ._pl-1316330145{padding-left:var(--space-11);}
:root ._o-1{opacity:1;}
:root ._btlr-1307610122{border-top-left-radius:var(--radius-9);}
:root ._btrr-1307610122{border-top-right-radius:var(--radius-9);}
:root ._bbrr-1307610122{border-bottom-right-radius:var(--radius-9);}
:root ._bblr-1307610122{border-bottom-left-radius:var(--radius-9);}
:root ._w-320px{width:320px;}
:root ._maw-10037{max-width:100%;}
:root ._mr-auto{margin-right:auto;}
:root ._ml-auto{margin-left:auto;}
:root ._pos-relative{position:relative;}
:root ._ox-hidden{overflow-x:hidden;}
:root ._oy-hidden{overflow-y:hidden;}
:root ._zi-1{z-index:1;}
web | QualifyingStepCard 0 · 0 · 0 · 3 7ms
web | NativeToast 1 · 0 · 1 · 0 2ms
- info Compiled successfully
- info Collecting page data...
- info Generating static pages (0/7)
- info Generating static pages (1/7)
- info Generating static pages (3/7)
- info Generating static pages (5/7)
- info Generating static pages (7/7)
- info Finalizing page optimization...
Route (pages) Size First Load JS
┌ ○ / (1673 ms) 447 B 294 kB
├ /_app 0 B 249 kB
├ ○ /404 (1675 ms) 2.92 kB 291 kB
├ └ css/cbba9ec7ed0b2fd1.css 1.14 kB
├ λ /api/phone-verify/[phone] 0 B 249 kB
├ ○ /dashboard (1692 ms) 433 B 294 kB
├ ○ /distributions (1712 ms) 6.35 kB 300 kB
├ └ css/168f147c2795d9f1.css 1.85 kB
├ ○ /leaderboard (1685 ms) 456 B 294 kB
└ ○ /signup (1702 ms) 34.5 kB 325 kB
└ css/1713dcab23f7f24d.css 1.97 kB
+ First Load JS shared by all 539 kB
├ chunks/framework-19f3649580393c10.js 45.2 kB
├ chunks/main-81b795f17dc15579.js 27 kB
├ chunks/pages/_app-c50f46ddb716efd1.js 174 kB
├ chunks/webpack-0897642b90796710.js 1.9 kB
└ css/a7fcd51eb84546d3.css 290 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment