Began: 2021 | Status: Early Research
CSS Error Messages
By using some of the more obscure css selectors it's possible to create rules for how html components and classes are used statically.
@mixin goal($message) {
&:not(.ignore) {
visibility: hidden;
}
&:not(.ignore-error)::after {
visibility: visible;
color: rgb(138, 198, 255);
content: '==> #{$message}';
padding: 20px;
}
}
@mixin error($message) {
&:not(.ignore-error) {
visibility: hidden;
}
&:not(.ignore)::after {
visibility: visible;
color: red;
content: 'error: #{$message}';
padding: 20px;
}
}.article {
margin: 60px;
&:nth-child(2n + 0) {
background-color: grey;
}
&:empty {
@include goal(':not(.article)');
}
.article {
@include error('.article cannot be a child of .article');
}
&:not(div) {
@include error('.article must be placed on <div>');
}
&:not([class^='article s-']):not([class$='article s-']) {
// the s- is so that svelte's generated classes still work
@include error('.article must be exclusive');
}
}goal of element/class
incorrect class usage
unallowed nesting
checking for other classes