mirror of
https://github.com/swc-project/swc.git
synced 2024-11-23 00:32:15 +03:00
fix(css/parser): Parse legacy calcs (#4320)
This commit is contained in:
Alexander Akait
GitHub
parent
876baeb77a
commit
81370d16cb
@ -0,0 +1,20 @@
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--geist-gap-double);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
max-width: calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
}
|
||||
|
||||
@media (max-width: __styled-jsx-placeholderpx) {
|
||||
main {
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
}
|
||||
div {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--geist-gap-double);
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
max-width: calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
}
|
||||
@media (max-width: __styled-jsx-placeholderpx) {
|
||||
main {
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
}
|
||||
div {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
1
crates/swc_css_codegen/tests/fixture/preserved-token/calc/output.min.css
vendored
Normal file
1
crates/swc_css_codegen/tests/fixture/preserved-token/calc/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
main{display:flex;flex-direction:__styled-jsx-placeholder;justify-content:space-between;margin-bottom:var(--geist-gap-double)}div{width:100%;max-width:calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double))}@media(max-width:__styled-jsx-placeholderpx){main{flex-direction:__styled-jsx-placeholder}div{max-width:unset}}
|
||||
@ -0,0 +1,30 @@
|
||||
main.jsx-4089915715{
|
||||
display:-webkit-box;
|
||||
display:-webkit-flex;
|
||||
display:-moz-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-flex-direction:row;
|
||||
-ms-flex-direction:row;
|
||||
flex-direction:row;
|
||||
-webkit-box-pack:justify;
|
||||
-webkit-justify-content:space-between;
|
||||
justify-content:space-between;
|
||||
margin-bottom:var(--geist-gap-double)
|
||||
}
|
||||
|
||||
div.jsx-4089915715{
|
||||
width:100%;
|
||||
max-width:-webkit-calc(100% - 230px - var(--geist-gap-double));
|
||||
max-width:-moz-calc(100% - 230px - var(--geist-gap-double));
|
||||
max-width:calc(100% - 230px - var(--geist-gap-double))
|
||||
}
|
||||
@media(max-width:730px){
|
||||
main.jsx-4089915715{
|
||||
-webkit-flex-direction:column;
|
||||
-ms-flex-direction:column;
|
||||
flex-direction:column
|
||||
}
|
||||
|
||||
div.jsx-4089915715{max-width:unset}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
main.jsx-4089915715 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--geist-gap-double);
|
||||
}
|
||||
div.jsx-4089915715 {
|
||||
width: 100%;
|
||||
max-width: -webkit-calc(100% - 230px - var(--geist-gap-double));
|
||||
max-width: -moz-calc(100% - 230px - var(--geist-gap-double));
|
||||
max-width: calc(100% - 230px - var(--geist-gap-double));
|
||||
}
|
||||
@media (max-width: 730px) {
|
||||
main.jsx-4089915715 {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
div.jsx-4089915715 {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
1
crates/swc_css_codegen/tests/fixture/values/function/calc/output.min.css
vendored
Normal file
1
crates/swc_css_codegen/tests/fixture/values/function/calc/output.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
main.jsx-4089915715{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:var(--geist-gap-double)}div.jsx-4089915715{width:100%;max-width:-webkit-calc(100% - 230px - var(--geist-gap-double));max-width:-moz-calc(100% - 230px - var(--geist-gap-double));max-width:calc(100% - 230px - var(--geist-gap-double))}@media(max-width:730px){main.jsx-4089915715{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}div.jsx-4089915715{max-width:unset}}
|
||||
@ -156,8 +156,8 @@ where
|
||||
let mut values = vec![];
|
||||
|
||||
match function_name {
|
||||
"calc" | "sin" | "cos" | "tan" | "asin" | "acos" | "atan" | "sqrt" | "exp" | "abs"
|
||||
| "sign" => {
|
||||
"calc" | "-moz-calc" | "-webkit-calc" | "sin" | "cos" | "tan" | "asin" | "acos"
|
||||
| "atan" | "sqrt" | "exp" | "abs" | "sign" => {
|
||||
self.input.skip_ws()?;
|
||||
|
||||
let calc_sum = ComponentValue::CalcSum(self.parse()?);
|
||||
|
||||
20
crates/swc_css_prefixer/tests/fixture/recovery/input.css
Normal file
20
crates/swc_css_prefixer/tests/fixture/recovery/input.css
Normal file
@ -0,0 +1,20 @@
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--geist-gap-double);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
max-width: calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
}
|
||||
|
||||
@media (max-width: __styled-jsx-placeholderpx) {
|
||||
main {
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
}
|
||||
div {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
32
crates/swc_css_prefixer/tests/fixture/recovery/output.css
Normal file
32
crates/swc_css_prefixer/tests/fixture/recovery/output.css
Normal file
@ -0,0 +1,32 @@
|
||||
main {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: __styled-jsx-placeholder;
|
||||
-ms-flex-direction: __styled-jsx-placeholder;
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-moz-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--geist-gap-double);
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
max-width: -webkit-calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
max-width: -moz-calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
max-width: calc(100% - __styled-jsx-placeholderpx - var(--geist-gap-double));
|
||||
}
|
||||
@media (max-width: __styled-jsx-placeholderpx) {
|
||||
main {
|
||||
-webkit-flex-direction: __styled-jsx-placeholder;
|
||||
-ms-flex-direction: __styled-jsx-placeholder;
|
||||
flex-direction: __styled-jsx-placeholder;
|
||||
}
|
||||
div {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,438 @@
|
||||
TestSnapshot {
|
||||
vars: [
|
||||
(
|
||||
(
|
||||
Atom('React' type=static),
|
||||
#1,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 4,
|
||||
cond_init: false,
|
||||
declared: false,
|
||||
declared_count: 0,
|
||||
declared_as_fn_param: false,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 0,
|
||||
usage_count: 4,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: false,
|
||||
has_property_access: true,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: true,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: None,
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('Sidebar' type=inline),
|
||||
#1,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 1,
|
||||
cond_init: false,
|
||||
declared: false,
|
||||
declared_count: 0,
|
||||
declared_as_fn_param: false,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 1,
|
||||
usage_count: 1,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: true,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: None,
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: true,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('WithSidebar' type=dynamic),
|
||||
#1,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 1,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: false,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 0,
|
||||
usage_count: 1,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: false,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: false,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: true,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: true,
|
||||
used_as_callee: true,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('_JSXStyle' type=dynamic),
|
||||
#1,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 3,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: false,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 1,
|
||||
usage_count: 3,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: true,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: false,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: None,
|
||||
var_initialized: true,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: true,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('breakpoint' type=dynamic),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 5,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 5,
|
||||
usage_count: 5,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('children' type=dynamic),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 1,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 1,
|
||||
usage_count: 1,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: true,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('hideOnMobile' type=dynamic),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 1,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 1,
|
||||
usage_count: 1,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('right' type=inline),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 7,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 7,
|
||||
usage_count: 7,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('sidebar' type=inline),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 1,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 1,
|
||||
usage_count: 1,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: true,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('sidebarWidth' type=dynamic),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 7,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 7,
|
||||
usage_count: 7,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
(
|
||||
(
|
||||
Atom('top' type=inline),
|
||||
#2,
|
||||
),
|
||||
VarUsageInfo {
|
||||
inline_prevented: false,
|
||||
ref_count: 6,
|
||||
cond_init: false,
|
||||
declared: true,
|
||||
declared_count: 1,
|
||||
declared_as_fn_param: true,
|
||||
declared_as_fn_expr: false,
|
||||
assign_count: 0,
|
||||
mutation_by_call_count: 6,
|
||||
usage_count: 6,
|
||||
reassigned_with_assignment: false,
|
||||
reassigned_with_var_decl: false,
|
||||
mutated: true,
|
||||
has_property_access: false,
|
||||
has_property_mutation: false,
|
||||
accessed_props: {},
|
||||
exported: false,
|
||||
used_above_decl: false,
|
||||
is_fn_local: true,
|
||||
used_by_nested_fn: true,
|
||||
executed_multiple_time: false,
|
||||
used_in_cond: false,
|
||||
var_kind: Some(
|
||||
"const",
|
||||
),
|
||||
var_initialized: false,
|
||||
declared_as_catch_param: false,
|
||||
no_side_effect_for_member_access: false,
|
||||
used_as_callee: false,
|
||||
used_as_arg: false,
|
||||
pure_fn: false,
|
||||
infects: [],
|
||||
},
|
||||
),
|
||||
],
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
import _JSXStyle from "styled-jsx/style";
|
||||
const WithSidebar = ({ right =false , top =false , sidebar , sidebarWidth =230 , hideOnMobile =false , breakpoint =730 , children , })=>/*#__PURE__*/ React.createElement("main", {
|
||||
className: _JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])
|
||||
}, /*#__PURE__*/ React.createElement(Sidebar, {
|
||||
width: sidebarWidth,
|
||||
right: right,
|
||||
hide: hideOnMobile,
|
||||
breakpoint: breakpoint
|
||||
}, sidebar), /*#__PURE__*/ React.createElement("div", {
|
||||
className: _JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])
|
||||
}, children), /*#__PURE__*/ React.createElement(_JSXStyle, {
|
||||
id: "4507deac72c40d6c",
|
||||
dynamic: [
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
}, `main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:${right ? 'row-reverse' : 'row'};-ms-flex-direction:${right ? 'row-reverse' : 'row'};flex-direction:${right ? 'row-reverse' : 'row'};-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--geist-gap-double)}div.__jsx-style-dynamic-selector{width:100%;max-width:-webkit-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:-moz-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:calc(100% - ${sidebarWidth}px - var(--geist-gap-double))}@media(max-width:${breakpoint}px){main.__jsx-style-dynamic-selector{-webkit-flex-direction:${top ? 'column' : 'column-reverse'};-ms-flex-direction:${top ? 'column' : 'column-reverse'};flex-direction:${top ? 'column' : 'column-reverse'}}div.__jsx-style-dynamic-selector{max-width:unset}}`))
|
||||
;
|
||||
|
||||
WithSidebar({});
|
||||
@ -0,0 +1,40 @@
|
||||
import _JSXStyle from "styled-jsx/style";
|
||||
(({ right =!1 , top =!1 , sidebar , sidebarWidth =230 , hideOnMobile =!1 , breakpoint =730 , children , })=>React.createElement("main", {
|
||||
className: _JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])
|
||||
}, React.createElement(Sidebar, {
|
||||
width: sidebarWidth,
|
||||
right: right,
|
||||
hide: hideOnMobile,
|
||||
breakpoint: breakpoint
|
||||
}, sidebar), React.createElement("div", {
|
||||
className: _JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])
|
||||
}, children), React.createElement(_JSXStyle, {
|
||||
id: "4507deac72c40d6c",
|
||||
dynamic: [
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
}, `main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:${right ? 'row-reverse' : 'row'};-ms-flex-direction:${right ? 'row-reverse' : 'row'};flex-direction:${right ? 'row-reverse' : 'row'};-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--geist-gap-double)}div.__jsx-style-dynamic-selector{width:100%;max-width:-webkit-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:-moz-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:calc(100% - ${sidebarWidth}px - var(--geist-gap-double))}@media(max-width:${breakpoint}px){main.__jsx-style-dynamic-selector{-webkit-flex-direction:${top ? 'column' : 'column-reverse'};-ms-flex-direction:${top ? 'column' : 'column-reverse'};flex-direction:${top ? 'column' : 'column-reverse'}}div.__jsx-style-dynamic-selector{max-width:unset}}`))
|
||||
)({});
|
||||
@ -0,0 +1,44 @@
|
||||
import _JSXStyle from "styled-jsx/style";
|
||||
const WithSidebar = ({ right =false , top =false , sidebar , sidebarWidth =230 , hideOnMobile =false , breakpoint =730 , children , })=><main className={_JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])}>
|
||||
|
||||
<Sidebar width={sidebarWidth} right={right} hide={hideOnMobile} breakpoint={breakpoint}>
|
||||
|
||||
{sidebar}
|
||||
|
||||
</Sidebar>
|
||||
|
||||
|
||||
|
||||
<div className={_JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])}>{children}</div>
|
||||
|
||||
|
||||
|
||||
<_JSXStyle id={"4507deac72c40d6c"} dynamic={[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]}>{`main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:${right ? 'row-reverse' : 'row'};-ms-flex-direction:${right ? 'row-reverse' : 'row'};flex-direction:${right ? 'row-reverse' : 'row'};-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--geist-gap-double)}div.__jsx-style-dynamic-selector{width:100%;max-width:-webkit-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:-moz-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:calc(100% - ${sidebarWidth}px - var(--geist-gap-double))}@media(max-width:${breakpoint}px){main.__jsx-style-dynamic-selector{-webkit-flex-direction:${top ? 'column' : 'column-reverse'};-ms-flex-direction:${top ? 'column' : 'column-reverse'};flex-direction:${top ? 'column' : 'column-reverse'}}div.__jsx-style-dynamic-selector{max-width:unset}}`}</_JSXStyle>
|
||||
|
||||
</main>
|
||||
;
|
||||
@ -0,0 +1,40 @@
|
||||
import _JSXStyle from "styled-jsx/style";
|
||||
const WithSidebar = ({ right =false , top =false , sidebar , sidebarWidth =230 , hideOnMobile =false , breakpoint =730 , children , })=>/*#__PURE__*/ React.createElement("main", {
|
||||
className: _JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])
|
||||
}, /*#__PURE__*/ React.createElement(Sidebar, {
|
||||
width: sidebarWidth,
|
||||
right: right,
|
||||
hide: hideOnMobile,
|
||||
breakpoint: breakpoint
|
||||
}, sidebar), /*#__PURE__*/ React.createElement("div", {
|
||||
className: _JSXStyle.dynamic([
|
||||
[
|
||||
"4507deac72c40d6c",
|
||||
[
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
]
|
||||
])
|
||||
}, children), /*#__PURE__*/ React.createElement(_JSXStyle, {
|
||||
id: "4507deac72c40d6c",
|
||||
dynamic: [
|
||||
right ? 'row-reverse' : 'row',
|
||||
sidebarWidth,
|
||||
breakpoint,
|
||||
top ? 'column' : 'column-reverse'
|
||||
]
|
||||
}, `main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:${right ? 'row-reverse' : 'row'};-ms-flex-direction:${right ? 'row-reverse' : 'row'};flex-direction:${right ? 'row-reverse' : 'row'};-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--geist-gap-double)}div.__jsx-style-dynamic-selector{width:100%;max-width:-webkit-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:-moz-calc(100% - ${sidebarWidth}px - var(--geist-gap-double));max-width:calc(100% - ${sidebarWidth}px - var(--geist-gap-double))}@media(max-width:${breakpoint}px){main.__jsx-style-dynamic-selector{-webkit-flex-direction:${top ? 'column' : 'column-reverse'};-ms-flex-direction:${top ? 'column' : 'column-reverse'};flex-direction:${top ? 'column' : 'column-reverse'}}div.__jsx-style-dynamic-selector{max-width:unset}}`))
|
||||
;
|
||||
Loading…
Reference in New Issue
Block a user