Skip to content

Commit 73e6127

Browse files
jacobcassidyjacobcassidy
committed
Add "issues" CSS files
1 parent 722907e commit 73e6127

14 files changed

+422
-0
lines changed

‎examples/issues/bugs/aspect-ratio-issue.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.class {
2+
aspect-ratio: 1;
3+
}

‎examples/issues/bugs/at-page-issue.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* AT PAGE
3+
*/
4+
5+
@page {
6+
content: "Page " counter(pageNumber);
7+
}
8+
9+
@page {
10+
/* margin box at top right showing page number */
11+
@top-right {
12+
content: "Page " counter(pageNumber);
13+
}
14+
}

‎examples/issues/bugs/at-supports-issue.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* Correctly nested */
2+
:root {
3+
--supports-red: false;
4+
@supports (color: red) {
5+
--supports-red: true;
6+
width: 100%;
7+
row-gap: 1rem;
8+
section {
9+
display: flex;
10+
row-gap: 1rem;
11+
}
12+
}
13+
--x: 1;
14+
}
15+
16+
@supports (color: red) {
17+
section {
18+
display: flex;
19+
row-gap: 1rem;
20+
}
21+
}
22+
23+
/* Invalid first-level properties not nested within a selector should not have syntax highlighting */
24+
@supports (color: red) {
25+
--supports-red: true;
26+
width: 100%;
27+
row-gap: 1rem;
28+
}

‎examples/issues/bugs/calc-in-at-media-issue.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* CALC FUNCTION IN @MEDIA
3+
*/
4+
5+
:root {
6+
--size: 500px;
7+
}
8+
9+
.example {
10+
max-width: calc(var(--size) * 1rem);
11+
}
12+
13+
@media screen and (min-width: calc( var(--size) * 1rem)) {
14+
.example {
15+
max-width: calc(var(--size) * 1rem);
16+
}
17+
}
18+
19+
/* With CSS nesting */
20+
@media only screen and (max-width: calc( var(--size) * 1rem)) {
21+
.example {
22+
span {
23+
max-width: calc(var(--size) * 1rem);
24+
}
25+
}
26+
}
27+
28+
.example {
29+
@media only screen and (max-width: calc( var(--size) * 1rem)) {
30+
span {
31+
max-width: calc(var(--size) * 1rem);
32+
}
33+
}
34+
}

‎examples/issues/bugs/calc-nesting-issue.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* NESTED CALC FUNCTIONS
3+
*/
4+
5+
.example {
6+
margin-top: calc(600 / 16 * 1rem);
7+
margin-bottom: calc( (768 / 16) * 1rem);
8+
margin-right: calc( (768 / 16 * (768 / 16) ) * 1rem);
9+
margin-left: calc( (768 / 16 * (768 / 16 + (768 / 16) ) ) * 1rem);
10+
padding-top: calc( (768 / 16 * (768 / 16 + (768 / 16 - (768 / 16) ) ) ) * 1rem);
11+
}
12+
13+
/* Without CSS nesting */
14+
@media screen and (max-width: calc( (1280 / 16) * 1rem)) {
15+
.example {
16+
max-width: calc((768 / 16) * 1rem);
17+
}
18+
}
19+
20+
/* With CSS nesting */
21+
@media only screen and (max-width: calc( (768 / 16) * 1rem )) {
22+
.example {
23+
max-width: calc((768 / 16) * 1rem);
24+
span {
25+
max-width: calc((600 / 16) * 1rem);
26+
}
27+
}
28+
}
29+
30+
.example {
31+
@media only screen and (max-width: calc( var(--size) * 1rem)) {
32+
max-width: calc((768 / 16) * 1rem);
33+
span {
34+
max-width: calc((600 / 16) * 1rem);
35+
}
36+
}
37+
}

‎examples/issues/bugs/clamp-arithmetic-operators-issue.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* FUNCTION ARITHMETIC OPERATORS
3+
*/
4+
5+
.example {
6+
margin-block-start: clamp(15px, 0.805rem + 0.64vw, 18px);
7+
margin-block-end: clamp(15px, 0.805rem - 0.64vw, 18px);
8+
}
9+
10+
.other-examples {
11+
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
12+
width: min(1000px, calc(70% + 100px));
13+
font-size: clamp(1.1rem, 0.7153rem + 1.6368vw, 1.5rem);
14+
width: max(300px, 50% + 20px);
15+
width: min(300px, 50% + 20px);
16+
height: calc(var(--base-height) + 10%);
17+
font-size: clamp(15px, 0.805rem + 0.64vw, 18px);
18+
width: calc(100% - 20px);
19+
}

‎examples/issues/bugs/property-value-slash-issue.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* GRID PLACEMENT SLASH
3+
*/
4+
5+
/* Property value slash doesn't have its own syntax highlighting */
6+
.example {
7+
grid-column: 1/-1;
8+
grid-row: 1 / 3;
9+
10+
width: clamp(100px, calc(30% / 2rem - 10px), 900px);
11+
width: some-edgy-new-function(30% / 2rem + 10px);
12+
}

‎examples/issues/bugs/scss-issues.scss

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
#footer {
2+
p {
3+
color: var(--color-re);
4+
margin-block-end: 16px;
5+
}
6+
}
7+
8+
.re-wrap #footer p {
9+
color: var(--color-mc-100);
10+
}
11+
12+
.footer-blurb {
13+
max-inline-size: 584px;
14+
}
15+
16+
.footer-copyright {
17+
margin-block-end: 0;
18+
font-size: 16px;
19+
}
20+
21+
.footer-license {
22+
font-size: 16px;
23+
}
24+
25+
.footer-notice {
26+
display: flex;
27+
flex-direction: column;
28+
29+
a {
30+
color: var(--color-mc-100);
31+
margin-block-end: 8px;
32+
font-size: 16px;
33+
text-decoration: none;
34+
}
35+
}
36+
37+
.connect-btn-wrap {
38+
display: flex;
39+
gap: 16px;
40+
}
41+
42+
.connect-btn {
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
border: 1px solid var(--color-re);
47+
border-radius: var(--border-radius-box);
48+
block-size: 3.125rem;
49+
inline-size: 3.125rem;
50+
margin-block-end: 16px;
51+
text-decoration: none;
52+
53+
.logo {
54+
opacity: 0.8;
55+
transition: opacity 300ms;
56+
}
57+
58+
&:hover {
59+
.logo {
60+
opacity: 1;
61+
}
62+
}
63+
64+
.re-wrap & {
65+
border: 1px solid var(--color-mc-100);
66+
}
67+
}

‎examples/issues/missing/at-container-issue.css

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/**
2+
* AT CONTAINER
3+
*/
4+
5+
/* AND */
6+
@container (width > 400px) and (height > 400px) {
7+
}
8+
@container (min-width: 600px) and (orientation: landscape) {
9+
}
10+
11+
/* NOT */
12+
@container not (width < 400px) {
13+
}
14+
@container not (width < 400px) not (width > 800px) {
15+
}
16+
@container sidebar not (orientation: landscape) and (min-width: 600px) {
17+
}
18+
@container sidebar not (orientation: landscape) and (min-width: 600px) or (min-width: 600px) {
19+
}
20+
21+
/* OR */
22+
@container (width > 400px) or (height > 400px) {''
23+
}
24+
@container (display: grid) or (display: flex) {
25+
}
26+
27+
/* CONTAINER-NAME */
28+
@container name (width > 400px) and (height > 400px) {
29+
}
30+
@container name1 name2 name3 not (width > 400px) not (height > 400px) {
31+
}
32+
33+
@container default (width > 400px) {
34+
}
35+
@container none default (width > 400px) {
36+
}
37+
38+
/* CONTAINER-QUERY */
39+
@container (min-aspect-ratio: 3 / 2) {
40+
.video-player {
41+
border: 5px solid #fff;
42+
}
43+
}
44+
45+
@container (min-width: calc( var(--width) * 1rem)) {
46+
.card {
47+
margin: 0;
48+
}
49+
}
50+
51+
/* STYLE-QUERY */
52+
@container style( --accent-color : currentColor ) {
53+
}
54+
55+
@container style(small --cards: /*comment*/ small 333px) {
56+
}
57+
@container card (inline-size > 30em) and style(--responsive: true) {
58+
}
59+
@container style( --width : calc( var(--hello) ) ) {
60+
}
61+
62+
@container style(--themeBackground), not style(--themeColor: blue), style(--themeColor: blue) and style(--themeColor: purple), style(--themeColor: blue) or style(--themeColor: purple) {
63+
}
64+
@container card (inline-size > 30em) and style(--responsive: true) {
65+
}
66+
@container style(--cards: 333px) {
67+
article {
68+
border: thin solid silver;
69+
border-radius: 0.5em;
70+
padding: 1em;
71+
}
72+
}
73+
74+
/* NESTED @CONTAINER */
75+
@container summary (width > 400px) {
76+
@container (min-width: 800px) {
77+
.card {
78+
margin: 50px;
79+
}
80+
@container (min-width: calc( var(--width) * 1rem)) {
81+
.card {
82+
margin: 0;
83+
}
84+
}
85+
}
86+
}
87+
@container card (inline-size > 30em) {
88+
@container style(--responsive: true) {
89+
/* styles */
90+
}
91+
}
92+
93+
/* EVERYTHING */
94+
@container /*comment*/ tall /*comment*/ short not invalidName (width > 400px) and invalidName not (min-height: 400px /*comment*/ invalidName) /*comment*/ or style(--accent-color: currentColor) {
95+
.card {
96+
margin: 0;
97+
.example {
98+
margin: 0;
99+
}
100+
}
101+
}
102+
103+
@container name1 name2 not (max-width: calc( (768 / 16) * 1rem)) invalidName {
104+
invalidName .wp-block-buttons {
105+
margin: calc(var(--wp--custom--element-spacing) * 3) auto;
106+
.wp-block-button,
107+
.wp-element-button {
108+
width: 100%;
109+
}
110+
}
111+
}
112+
113+
@container (10em <= width <= 20em) {
114+
/* styles */
115+
}
116+
117+
@container (inline-size >= 0px) {
118+
/* only applies when an inline-size container is available */
119+
h2 {
120+
font-size: calc(1.2em + 1cqi);
121+
}
122+
}
123+
124+
@container (width > 40em) {
125+
h2 {
126+
font-size: 1.5em;
127+
}
128+
}
129+
130+
@container my-page-layout (block-size > 12em) {
131+
.card {
132+
margin-block: 2em;
133+
}
134+
}
135+
136+
@container (inline-size >= 0px) {
137+
/* only applies when an inline-size container is available */
138+
h2 {
139+
font-size: calc(1.2em + 1cqi);
140+
}
141+
}

‎examples/issues/missing/at-import-issue.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* AT IMPORT
3+
*/
4+
5+
/* new syntax rules for @import have no syntax highlighting */
6+
@import "/css/styles.css" supports(color: red);
7+
@import url("green.css") layer supports(selector(&)) (min-width: calc(10px));
8+
9+
/* layer as a function */
10+
@import url("green.css") layer(bar) supports(selector(&))
11+
(min-width: calc(10px));

‎examples/issues/missing/at-layer-issue.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* AT LAYER
3+
*/
4+
5+
/* layer name has no unique syntax highlighting scope */
6+
.foo {
7+
@layer base {
8+
block-size: 100%;
9+
@layer support {
10+
& .bar {
11+
min-block-size: 100%;
12+
}
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)