ssr
v4.15.0arrow_drop_downv4.15.0
STATUS
Passing
DOWNLOADS
1
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
5 years ago
SIZE
N/A
You shouldn't have to manually run this.
1 contributor
Like
Install ssr as a package?
Copied
npm i @bit/segmentio.evergreen.ssr
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example Snapshot report for
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just any of the 1 million components
and packages in Bit or NPM to the example.toggle layout
chevron_left
chevron_right
Snapshot report for src/ssr/test/extractStyles.js
The actual snapshot is saved in extractStyles.js.snap.
Generated by AVA.
returns styles for a Box
Snapshot 1
{
cache: {
glamorIds: [
'ng405l',
'fv6wzy',
],
uiBoxCache: [
[
'height11',
'p &h_11px',
],
[
'boxSizingborder-box',
'p &box-szg_border-box',
],
],
},
css: `b
.p &h_11px {b
height: 11px;b
}b
.p &box-szg_border-box {b
box-sizing: border-box;b
}b
@-webkit-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-moz-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-o-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-moz-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-o-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}`,
hydrationScript: <script
dangerouslySetInnerHTML={
{
__html: '{"uiBoxCache":[["height11","p &h_11px"],["boxSizingborder-box","p &box-szg_border-box"]],"glamorIds":["ng405l","fv6wzy"]}',
}
}
id="evergreen-hydrate"
nonce="abcd1234"
type="application/json"
/>,
}
returns styles for a Button
Snapshot 1
{
cache: {
glamorIds: [
'ng405l',
'fv6wzy',
'69cngj',
],
uiBoxCache: [
[
'fontFamily"SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
'p &fnt-fam_b77syt',
],
[
'marginTop0',
'p &mt_0px',
],
[
'fontSize12px',
'p &fnt-sze_12px',
],
[
'fontWeight500',
'p &f-wght_500',
],
[
'lineHeight32px',
'p &ln-ht_32px',
],
[
'letterSpacing0',
'p <r-spc_0',
],
[
'borderTopRightRadius3',
'p &btrr_3px',
],
[
'borderBottomRightRadius3',
'p &bbrr_3px',
],
[
'borderTopLeftRadius3',
'p &btlr_3px',
],
[
'borderBottomLeftRadius3',
'p &bblr_3px',
],
[
'paddingTop0',
'p &pt_0px',
],
[
'paddingBottom0',
'p &pb_0px',
],
[
'paddingRight16',
'p &pr_16px',
],
[
'paddingLeft16',
'p &pl_16px',
],
[
'marginLeft0',
'p &ml_0px',
],
[
'marginRight0',
'p &mr_0px',
],
[
'marginBottom0',
'p &mb_0px',
],
[
'height32',
'p &h_32px',
],
[
'positionrelative',
'p &pst_relative',
],
[
'displayinline-flex',
'p &dspl_inline-flex',
],
[
'alignItemscenter',
'p &algn-itms_center',
],
[
'flexWrapnowrap',
'p &flx-wrap_nowrap',
],
[
'boxSizingborder-box',
'p &box-szg_border-box',
],
],
},
css: `b
.p &fnt-fam_b77syt {b
font-family: "SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";b
}b
.p &mt_0px {b
margin-top: 0px;b
}b
.p &fnt-sze_12px {b
font-size: 12px;b
}b
.p &f-wght_500 {b
font-weight: 500;b
}b
.p &ln-ht_32px {b
line-height: 32px;b
}b
.p <r-spc_0 {b
letter-spacing: 0;b
}b
.p &btrr_3px {b
border-top-right-radius: 3px;b
}b
.p &bbrr_3px {b
border-bottom-right-radius: 3px;b
}b
.p &btlr_3px {b
border-top-left-radius: 3px;b
}b
.p &bblr_3px {b
border-bottom-left-radius: 3px;b
}b
.p &pt_0px {b
padding-top: 0px;b
}b
.p &pb_0px {b
padding-bottom: 0px;b
}b
.p &pr_16px {b
padding-right: 16px;b
}b
.p &pl_16px {b
padding-left: 16px;b
}b
.p &ml_0px {b
margin-left: 0px;b
}b
.p &mr_0px {b
margin-right: 0px;b
}b
.p &mb_0px {b
margin-bottom: 0px;b
}b
.p &h_32px {b
height: 32px;b
}b
.p &pst_relative {b
position: relative;b
}b
.p &dspl_inline-flex {b
display: -webkit-inline-box;b
display: -moz-inline-box;b
display: -ms-inline-flexbox;b
display: -webkit-inline-flex;b
display: inline-flex;b
}b
.p &algn-itms_center {b
align-items: center;b
-webkit-box-align: center;b
}b
.p &flx-wrap_nowrap {b
flex-wrap: nowrap;b
-webkit-box-lines: nowrap;b
}b
.p &box-szg_border-box {b
box-sizing: border-box;b
}b
@-webkit-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-moz-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-o-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-moz-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-o-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}.css-69cngj,[data-css-69cngj]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;-moz-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:#425A70;background-color:white;background-image:-webkit-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: -moz-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: linear-gradient(to bottom, #FFFFFF, #F4F5F7);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);}.css-69cngj::-moz-focus-inner ,[data-css-69cngj]::-moz-focus-inner {border:0;}.css-69cngj[disabled],[data-css-69cngj][disabled],.css-69cngj [data-disabled],[data-css-69cngj] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);pointer-events:none;}.css-69cngj:not([disabled]):not([data-disabled]):hover,[data-css-69cngj]:not([disabled]):not([data-disabled]):hover{background-image:-webkit-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: -moz-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: linear-gradient(to bottom, #FAFBFB, #EAECEE);}.css-69cngj:not([disabled]):not([data-disabled]):focus,[data-css-69cngj]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.14);}.css-69cngj:not([disabled]):not([data-disabled]):active,[data-css-69cngj]:not([disabled]):not([data-disabled]):active, .css-69cngj:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-69cngj]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-69cngj:not([disabled]):not([data-disabled])[data-active], [data-css-69cngj]:not([disabled]):not([data-disabled])[data-active]{background-image:none;background-color:rgba(16, 112, 202, 0.09);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-69cngj:not([disabled]):not([data-disabled]):focus:active,[data-css-69cngj]:not([disabled]):not([data-disabled]):focus:active, .css-69cngj:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, [data-css-69cngj]:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, .css-69cngj:not([disabled]):not([data-disabled])[data-active]:focus, [data-css-69cngj]:not([disabled]):not([data-disabled])[data-active]:focus{box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}`,
hydrationScript: <script
dangerouslySetInnerHTML={
{
__html: '{"uiBoxCache":[["fontFamily\\"SF UI Text\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"","p &fnt-fam_b77syt"],["marginTop0","p &mt_0px"],["fontSize12px","p &fnt-sze_12px"],["fontWeight500","p &f-wght_500"],["lineHeight32px","p &ln-ht_32px"],["letterSpacing0","p <r-spc_0"],["borderTopRightRadius3","p &btrr_3px"],["borderBottomRightRadius3","p &bbrr_3px"],["borderTopLeftRadius3","p &btlr_3px"],["borderBottomLeftRadius3","p &bblr_3px"],["paddingTop0","p &pt_0px"],["paddingBottom0","p &pb_0px"],["paddingRight16","p &pr_16px"],["paddingLeft16","p &pl_16px"],["marginLeft0","p &ml_0px"],["marginRight0","p &mr_0px"],["marginBottom0","p &mb_0px"],["height32","p &h_32px"],["positionrelative","p &pst_relative"],["displayinline-flex","p &dspl_inline-flex"],["alignItemscenter","p &algn-itms_center"],["flexWrapnowrap","p &flx-wrap_nowrap"],["boxSizingborder-box","p &box-szg_border-box"]],"glamorIds":["ng405l","fv6wzy","69cngj"]}',
}
}
id="evergreen-hydrate"
type="application/json"
/>,
}