feat: customize font size #98
huozhiAnnotations
7 errors
|
src/code/code.test.tsx > Code > default props:
src/code/code.test.tsx#L7
Error: Snapshot `Code > default props 1` mismatched
- Expected
+ Received
- "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+ "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">:scope [data-codice-code] {
--codice-code-line-number-color: #a4a4a4;
--codice-code-highlight-color: #555555;
--codice-control-color: #8d8989;
}
- [data-codice-code] pre {
+ :scope [data-codice-code] pre {
white-space: pre-wrap;
margin: 0;
}
- [data-codice-code] code {
+ :scope [data-codice-code] code {
border: none;
}
- [data-codice-code] .sh__line {
+ :scope [data-codice-code] .sh__line {
display: inline-block;
width: 100%;
}
- [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
+ :scope [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
padding-left: 40px;
}
- [data-codice-code] .sh__line[data-highlight] {
+ :scope [data-codice-code] .sh__line[data-highlight] {
background-color: var(--codice-code-highlight-color);
}
+ :scope { font-size: inherit; }
</style><pre data-codice-code-content="true"><code><span class="sh__line"><span data-sh-token-type="element" class="sh__token--identifier" style="color:var(--sh-identifier)">test</span></span></code></pre></div>"
❯ src/code/code.test.tsx:7:47
|
|
src/code/code.test.tsx > Code > with title:
src/code/code.test.tsx#L35
Error: Snapshot `Code > with title 1` mismatched
- Expected
+ Received
@@ -1,53 +1,54 @@
- "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+ "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">:scope [data-codice-code] {
--codice-code-line-number-color: #a4a4a4;
--codice-code-highlight-color: #555555;
--codice-control-color: #8d8989;
}
- [data-codice-code] pre {
+ :scope [data-codice-code] pre {
white-space: pre-wrap;
margin: 0;
}
- [data-codice-code] code {
+ :scope [data-codice-code] code {
border: none;
}
- [data-codice-code] .sh__line {
+ :scope [data-codice-code] .sh__line {
display: inline-block;
width: 100%;
}
- [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
+ :scope [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
padding-left: 40px;
}
- [data-codice-code] .sh__line[data-highlight] {
+ :scope [data-codice-code] .sh__line[data-highlight] {
background-color: var(--codice-code-highlight-color);
}
- </style><div data-codice-header="true" data-codice-header-controls="false"><style data-codice-style="true">[data-codice-header] {
+ :scope { font-size: inherit; }
+ </style><div data-codice-header="true" data-codice-header-controls="false"><style data-codice-style="true">:scope [data-codice-header] {
position: relative;
display: flex;
padding: 16px 22px 8px;
align-items: center;
}
- [data-codice-header] [data-codice-title] {
+ :scope [data-codice-header] [data-codice-title] {
display: inline-block;
flex: 1 0;
text-align: center;
line-height: 1;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
display: inline-flex;
align-self: center;
justify-self: start;
align-items: center;
justify-content: center;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
width: 52px;
}
[data-codice-header-controls="true"] [data-codice-title] {
padding-right: 52px;
}
- [data-codice-header] [data-codice-control] {
+ :scope [data-codice-header] [data-codice-control] {
display: flex;
width: 10px;
height: 10px;
margin: 3px;
border-radius: 50%;
❯ src/code/code.test.tsx:35:63
|
|
src/code/code.test.tsx > Code > with controls:
src/code/code.test.tsx#L96
Error: Snapshot `Code > with controls 1` mismatched
- Expected
+ Received
@@ -1,53 +1,54 @@
- "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+ "<div data-codice="code" data-codice-code="true"><style data-codice-style="true">:scope [data-codice-code] {
--codice-code-line-number-color: #a4a4a4;
--codice-code-highlight-color: #555555;
--codice-control-color: #8d8989;
}
- [data-codice-code] pre {
+ :scope [data-codice-code] pre {
white-space: pre-wrap;
margin: 0;
}
- [data-codice-code] code {
+ :scope [data-codice-code] code {
border: none;
}
- [data-codice-code] .sh__line {
+ :scope [data-codice-code] .sh__line {
display: inline-block;
width: 100%;
}
- [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
+ :scope [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
padding-left: 40px;
}
- [data-codice-code] .sh__line[data-highlight] {
+ :scope [data-codice-code] .sh__line[data-highlight] {
background-color: var(--codice-code-highlight-color);
}
- </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">[data-codice-header] {
+ :scope { font-size: inherit; }
+ </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">:scope [data-codice-header] {
position: relative;
display: flex;
padding: 16px 22px 8px;
align-items: center;
}
- [data-codice-header] [data-codice-title] {
+ :scope [data-codice-header] [data-codice-title] {
display: inline-block;
flex: 1 0;
text-align: center;
line-height: 1;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
display: inline-flex;
align-self: center;
justify-self: start;
align-items: center;
justify-content: center;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
width: 52px;
}
[data-codice-header-controls="true"] [data-codice-title] {
padding-right: 52px;
}
- [data-codice-header] [data-codice-control] {
+ :scope [data-codice-header] [data-codice-control] {
display: flex;
width: 10px;
height: 10px;
margin: 3px;
border-radius: 50%;
❯ src/code/code.test.tsx:96:56
|
|
src/editor/editor.test.tsx > Code > default props:
src/editor/editor.test.tsx#L11
Error: Snapshot `Code > default props 1` mismatched
- Expected
+ Received
@@ -1,44 +1,45 @@
- "<div data-codice="editor" data-codice-title="" data-codice-controls="true" data-codice-line-numbers="true"><style data-codice-style="true">[data-codice="editor"] {
+ "<div data-codice="editor" data-codice-title="" data-codice-controls="true" data-codice-line-numbers="true"><style data-codice-style="true">:scope {
+ --codice-text-color: transparent;
+ --codice-background-color: transparent;
+ --codice-caret-color: inherit;
+ }
+ :scope {
position: relative;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: stretch;
- scrollbar-width: none;
-
- --codice-text-color: transparent;
- --codice-background-color: transparent;
- --codice-caret-color: inherit;
- }
- [data-codice="editor"] code,
- [data-codice="editor"] textarea {
+ scrollbar-width: none;
+ }
+ :scope code,
+ :scope textarea {
font-family: Consolas, Monaco, monospace;
line-break: anywhere;
overflow-wrap: break-word;
scrollbar-width: none;
padding: 24px 16px;
- font-size: 16px;
line-height: 20px;
+ font-size: var(--codice-font-size);
caret-color: var(--codice-caret-color);
border: none;
outline: none;
width: 100%;
}
- [data-codice="editor"] code {
+ :scope code {
display: inline-block;
width: 100%;
}
- [data-codice="editor"] textarea::-webkit-scrollbar,
+ :scope textarea::-webkit-scrollbar,
- [data-codice="editor"] textarea:focus::-webkit-scrollbar,
+ :scope textarea:focus::-webkit-scrollbar,
- [data-codice="editor"] textarea:hover::-webkit-scrollbar {
+ :scope textarea:hover::-webkit-scrollbar {
width: 0;
}
- [data-codice="editor"] [data-codice-content] {
+ :scope [data-codice-content] {
position: relative;
}
- [data-codice="editor"] textarea {
+ :scope textarea {
resize: none;
display: block;
color: var(--codice-text-color);
background-color: var(--codice-background-color);
position: absolute;
@@ -47,81 +48,79 @@
left: 0;
right: 0;
height: 100%;
overflow: hidden;
}
- [data-codice="editor"][data-codice-line-numbers="true"] textarea {
+ :scope [data-codice-line-numbers="true"] textarea {
padding-left: 55px;
}
- </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">[data-codice-header] {
+ </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">:scope [data-codice-header] {
position: relative;
display: flex;
padding: 16px 22px 8px;
align-items: center;
}
- [data-codice-header] [data-codice-title] {
+ :scope [data-codice-header] [data-codice-title] {
display: inline-block;
flex: 1 0;
text-align: center;
line-height: 1;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
display: inline-flex;
align-self: center;
justify-self: start;
align-items: center;
justify-content: center;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
width: 52px;
}
[data-codice-header-controls="true"] [data-codice-title] {
padding-right: 52px;
}
- [data-codice-header] [data-codice-control] {
+ :scope [data-codice-header] [data-codice-control] {
display: flex;
width: 10px;
height: 10px;
margin: 3px;
border-radius: 50%;
background-color: var(--codice-control-color);
}
- </style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div></div><div data-codice-content="true"><div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+ </style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div></div><div data-codice-content="true"><div data-codice="code" data-codice-code="true"><styl
|
|
src/editor/editor.test.tsx > Code > with title:
src/editor/editor.test.tsx#L147
Error: Snapshot `Code > with title 1` mismatched
- Expected
+ Received
@@ -1,44 +1,45 @@
- "<div data-codice="editor" data-codice-title="file.js" data-codice-controls="true" data-codice-line-numbers="true"><style data-codice-style="true">[data-codice="editor"] {
+ "<div data-codice="editor" data-codice-title="file.js" data-codice-controls="true" data-codice-line-numbers="true"><style data-codice-style="true">:scope {
+ --codice-text-color: transparent;
+ --codice-background-color: transparent;
+ --codice-caret-color: inherit;
+ }
+ :scope {
position: relative;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: stretch;
- scrollbar-width: none;
-
- --codice-text-color: transparent;
- --codice-background-color: transparent;
- --codice-caret-color: inherit;
- }
- [data-codice="editor"] code,
- [data-codice="editor"] textarea {
+ scrollbar-width: none;
+ }
+ :scope code,
+ :scope textarea {
font-family: Consolas, Monaco, monospace;
line-break: anywhere;
overflow-wrap: break-word;
scrollbar-width: none;
padding: 24px 16px;
- font-size: 16px;
line-height: 20px;
+ font-size: var(--codice-font-size);
caret-color: var(--codice-caret-color);
border: none;
outline: none;
width: 100%;
}
- [data-codice="editor"] code {
+ :scope code {
display: inline-block;
width: 100%;
}
- [data-codice="editor"] textarea::-webkit-scrollbar,
+ :scope textarea::-webkit-scrollbar,
- [data-codice="editor"] textarea:focus::-webkit-scrollbar,
+ :scope textarea:focus::-webkit-scrollbar,
- [data-codice="editor"] textarea:hover::-webkit-scrollbar {
+ :scope textarea:hover::-webkit-scrollbar {
width: 0;
}
- [data-codice="editor"] [data-codice-content] {
+ :scope [data-codice-content] {
position: relative;
}
- [data-codice="editor"] textarea {
+ :scope textarea {
resize: none;
display: block;
color: var(--codice-text-color);
background-color: var(--codice-background-color);
position: absolute;
@@ -47,81 +48,79 @@
left: 0;
right: 0;
height: 100%;
overflow: hidden;
}
- [data-codice="editor"][data-codice-line-numbers="true"] textarea {
+ :scope [data-codice-line-numbers="true"] textarea {
padding-left: 55px;
}
- </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">[data-codice-header] {
+ </style><div data-codice-header="true" data-codice-header-controls="true"><style data-codice-style="true">:scope [data-codice-header] {
position: relative;
display: flex;
padding: 16px 22px 8px;
align-items: center;
}
- [data-codice-header] [data-codice-title] {
+ :scope [data-codice-header] [data-codice-title] {
display: inline-block;
flex: 1 0;
text-align: center;
line-height: 1;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
display: inline-flex;
align-self: center;
justify-self: start;
align-items: center;
justify-content: center;
}
- [data-codice-header] [data-codice-controls] {
+ :scope [data-codice-header] [data-codice-controls] {
width: 52px;
}
[data-codice-header-controls="true"] [data-codice-title] {
padding-right: 52px;
}
- [data-codice-header] [data-codice-control] {
+ :scope [data-codice-header] [data-codice-control] {
display: flex;
width: 10px;
height: 10px;
margin: 3px;
border-radius: 50%;
background-color: var(--codice-control-color);
}
- </style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div><div data-codice-title="true">file.js</div></div><div data-codice-content="true"><div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+ </style><div data-codice-controls="true"><span data-codice-control="true"></span><span data-codice-control="true"></span><span data-codice-control="true"></span></div><div data-codice-title="true">file.js
|
|
src/editor/editor.test.tsx > Code > without controls and with className:
src/editor/editor.test.tsx#L283
Error: Snapshot `Code > without controls and with className 1` mismatched
- Expected
+ Received
@@ -1,44 +1,45 @@
- "<div class="editor" data-codice="editor" data-codice-title="" data-codice-controls="false" data-codice-line-numbers="true"><style data-codice-style="true">[data-codice="editor"] {
+ "<div class="editor" data-codice="editor" data-codice-title="" data-codice-controls="false" data-codice-line-numbers="true"><style data-codice-style="true">:scope {
+ --codice-text-color: transparent;
+ --codice-background-color: transparent;
+ --codice-caret-color: inherit;
+ }
+ :scope {
position: relative;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: stretch;
- scrollbar-width: none;
-
- --codice-text-color: transparent;
- --codice-background-color: transparent;
- --codice-caret-color: inherit;
- }
- [data-codice="editor"] code,
- [data-codice="editor"] textarea {
+ scrollbar-width: none;
+ }
+ :scope code,
+ :scope textarea {
font-family: Consolas, Monaco, monospace;
line-break: anywhere;
overflow-wrap: break-word;
scrollbar-width: none;
padding: 24px 16px;
- font-size: 16px;
- line-height: 20px;
+ line-height: 20px;
+ font-size: var(--codice-font-size);
caret-color: var(--codice-caret-color);
border: none;
outline: none;
width: 100%;
}
- [data-codice="editor"] code {
+ :scope code {
display: inline-block;
width: 100%;
}
- [data-codice="editor"] textarea::-webkit-scrollbar,
+ :scope textarea::-webkit-scrollbar,
- [data-codice="editor"] textarea:focus::-webkit-scrollbar,
+ :scope textarea:focus::-webkit-scrollbar,
- [data-codice="editor"] textarea:hover::-webkit-scrollbar {
+ :scope textarea:hover::-webkit-scrollbar {
width: 0;
}
- [data-codice="editor"] [data-codice-content] {
+ :scope [data-codice-content] {
position: relative;
}
- [data-codice="editor"] textarea {
+ :scope textarea {
resize: none;
display: block;
color: var(--codice-text-color);
background-color: var(--codice-background-color);
position: absolute;
@@ -47,48 +48,46 @@
left: 0;
right: 0;
height: 100%;
overflow: hidden;
}
- [data-codice="editor"][data-codice-line-numbers="true"] textarea {
+ :scope [data-codice-line-numbers="true"] textarea {
padding-left: 55px;
}
- </style><div data-codice-content="true"><div data-codice="code" data-codice-code="true"><style data-codice-style="true">[data-codice-code] {
+ </style><div data-codice-content="true"><div data-codice="code" data-codice-code="true"><style data-codice-style="true">:scope [data-codice-code] {
--codice-code-line-number-color: #a4a4a4;
--codice-code-highlight-color: #555555;
--codice-control-color: #8d8989;
}
- [data-codice-code] pre {
+ :scope [data-codice-code] pre {
white-space: pre-wrap;
margin: 0;
}
- [data-codice-code] code {
+ :scope [data-codice-code] code {
border: none;
}
- [data-codice-code] .sh__line {
+ :scope [data-codice-code] .sh__line {
display: inline-block;
width: 100%;
}
- [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
+ :scope [data-codice-code] .sh__line:has(> [data-codice-code-line-number]) {
padding-left: 40px;
}
- [data-codice-code] .sh__line[data-highlight] {
+ :scope [data-codice-code] .sh__line[data-highlight] {
background-color: var(--codice-code-highlight-color);
}
- @scope {
- code {
- counter-reset: codice-code-line-number;
- padding-left
- }
- [data-codice-code-line-number] {
+ :scope code {
+ counter-reset: codice-code-line-number;
+ }
+ :scope [data-codice-code-line-number] {
- counter-increment: codice-code-line-number 1;
+ counter-increment: codice-code-line-number 1;
- content: counter(codice-code-line-number);
+ content: counter(codice-code-line-number);
- display: inline-block;
+ display: inline-block;
- min-width: 24px;
+ min-width: 24px;
- margin-left: -40px;
+ margin-left: -40px;
- margin-right: 16px;
+ margin-right: 16px;
- text-align: right;
+ te
|
|
Node 20
Process completed with exit code 1.
|