Merge pull request #240 from shgysk8zer0/feature/nesting

Implement CSS Nesting
shgysk8zer0 · Jul 18, 2023 · 5e72f60 · 5e72f60
2 parents 7c37072 + ca716b9
commit 5e72f60
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 204 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [v2.5.0] - 2023-07-03
 
 ### Changed
-- Update to node 200
+- Update to node 20
+- Implement CSS Nesting
 - Update GH Action for npm publish
 - Update npm scripts for versioning and locks
 

diff --git a/accordion.css b/accordion.css
@@ -2,40 +2,40 @@ details.accordion {
 	position: relative;
 	z-index: 0;
 	overflow: hidden;
-}
 
-details.accordion > summary {
-	background-color: var(--accordion-theme-color, var(--button-primary-background));
-	color: var(--accordion-header-color, var(--button-primary-color));
-	padding: 0.8em;
-	position: relative;
-	z-index: 1;
-	font-weight: 800;
-}
+	& > summary {
+		background-color: var(--accordion-theme-color, var(--button-primary-background));
+		color: var(--accordion-header-color, var(--button-primary-color));
+		padding: 0.8em;
+		position: relative;
+		z-index: 1;
+		font-weight: 800;
+	}
 
-details.accordion.no-marker > summary {
-	list-style: none;
-}
+	&.no-marker > summary {
+		list-style: none;
+	}
 
-details.accordion.no-marker > summary::marker {
-	display: none;
-}
+	&.no-marker > summary::marker {
+		display: none;
+	}
 
-details.accordion > * {
-	border-bottom: 1px solid var(--accordion-border-color, #6a6a6a);
-}
+	& > * {
+		border-bottom: 1px solid var(--accordion-border-color, #6a6a6a);
+	}
 
-details.accordion > :not(summary) {
-	background-color: var(--accordion-body-background,  var(--primary-color));
-	color: var(--accordion-body-color, var(--default-color));
-	padding: 0.6em 1.7em;
-	border-left: 8px solid transparent;
-	transform-origin: top;
-	transition: border-color 400ms ease-in-out;
-}
+	& > :not(summary) {
+		background-color: var(--accordion-body-background,  var(--primary-color));
+		color: var(--accordion-body-color, var(--default-color));
+		padding: 0.6em 1.7em;
+		border-left: 8px solid transparent;
+		transform-origin: top;
+		transition: border-color 400ms ease-in-out;
+	}
 
-details.accordion > :not(summary):hover {
-	border-color: var(--accordion-theme-color, var(--button-primary-active-background));
+	& > :not(summary):hover {
+		border-color: var(--accordion-theme-color, var(--button-primary-active-background));
+	}
 }
 
 :root.no-details details.accordion.no-marker > summary::before {

diff --git a/class-rules.css b/class-rules.css
@@ -44,25 +44,24 @@
 	text-align: center;
 	margin-top: 0.7em;
 	border-radius: 8px;
-}
 
-.status-box.alert, .status-box.error {
-	color: var(--alert-color, #6f0606);
-	background-color: var(--alert-background, #e88a8a);
-}
+	&.alert, &.error {
+		color: var(--alert-color, #6f0606);
+		background-color: var(--alert-background, #e88a8a);
+	}
 
-.status-box.warn {
-	color: var(--warn-color, #51430c);
-	background-color: var(--warn-background, #f0d155);
-}
+	&.warn {
+		color: var(--warn-color, #51430c);
+		background-color: var(--warn-background, #f0d155);
+	}
 
-.status-box.info {
-	color: var(--info-color, #555553);
-	background-color: var(--info-background, #d2d2d2);
-}
+	&.info {
+		color: var(--info-color, #555553);
+		background-color: var(--info-background, #d2d2d2);
+	}
 
-.status-box.success {
-	color: var(--success-color, #1d4f01);
-	background-color: var(--success-background, #8cee69);
+	&.success {
+		color: var(--success-color, #1d4f01);
+		background-color: var(--success-background, #8cee69);
+	}
 }
-
diff --git a/element.css b/element.css
@@ -108,27 +108,34 @@ input[type="reset"], input[type="image"] {
 	font-family: var(--button-font, inherit);
 	border-radius: var(--button-border-radius, initial);
 	box-sizing: border-box;
-}
 
-.btn.round {
-	border-radius: 50%;
-}
+	&.round {
+		border-radius: 50%;
+	}
+
+	&.rounded, &.outline.rounded {
+		border-radius: var(--button-rounded-border-radius, 2em);
+	}
 
-.btn.rounded, .btn.outline.rounded {
-	border-radius: var(--button-rounded-border-radius, 2em);
+	&:disabled, &.disabled, &._state--disabled {
+		box-shadow: 0 0 0.3rem var(--shadow-color, rgba(0,0,0,0.4)) inset;
+		border: var(--button-disabled-border, var(--button-border, 0.2rem inset black));
+	}
+
+	&:focus {
+		outline-width: var(--focus-outline-width, thin);
+		outline-style: var(--focus-outline-style, dotted);
+		outline-color: var(--focus-outline-color, currentColor);
+		outline-offset: var(--focus-outline-offset, 0);
+	}
 }
 
 :disabled, .disabled, [disabled], ._state--disabled {
 	cursor: not-allowed;
 	pointer-events: none;
 }
 
-.btn:disabled, .btn.disabled, .btn._state--disabled {
-	box-shadow: 0 0 0.3rem var(--shadow-color, rgba(0,0,0,0.4)) inset;
-	border: var(--button-disabled-border, var(--button-border, 0.2rem inset black));
-}
-
-.btn:focus, summary:focus, input:focus,
+summary:focus, input:focus,
 select:focus, textarea:focus, .input:focus, [tabindex]:focus, a:focus {
 	outline-width: var(--focus-outline-width, thin);
 	outline-style: var(--focus-outline-style, dotted);

diff --git a/forms.css b/forms.css
@@ -4,66 +4,65 @@
 	margin-bottom: 0.4em;
 	border-radius: 6px;
 	transition: border-color 200ms ease-in-out;
-}
 
-.form-group:focus-within {
-	border-color: var(--form-group-border, #cacaca);
-}
+	&:focus-within {
+		border-color: var(--form-group-border, #cacaca);
+	}
 
-.form-group .input-label {
-	display: block;
-	margin: 0.4em 0;
-}
+	& .input-label {
+		display: block;
+		margin: 0.4em 0;
+	}
 
-.form-group .input-label.required::after {
-	content: ' *';
-	display: inline;
-	font-size: 0.8em;
-	font-weight: 800;
-}
+	& .input-label.required::after {
+		content: ' *';
+		display: inline;
+		font-size: 0.8em;
+		font-weight: 800;
+	}
 
-.form-group .input,
-.form-group .input:required:invalid:placeholder-shown {
-	display: block;
-	width: var(--input-width, 100%);
-	max-width: 100%;
-	color: currentColor;
-	border-style: solid;
-	border-color: var(--input-border, #cacaca);
-	border-width: 0 0 1px 0;
-	background: transparent;
-	padding: var(--form-group-padding, 0.5em 0.3em);
-	transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
-}
+	& .input, & .input:required:invalid:placeholder-shown {
+		display: block;
+		width: var(--input-width, 100%);
+		max-width: 100%;
+		color: currentColor;
+		border-style: solid;
+		border-color: var(--input-border, #cacaca);
+		border-width: 0 0 1px 0;
+		background: transparent;
+		padding: var(--form-group-padding, 0.5em 0.3em);
+		transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
+	}
 
-.form-group textarea.input {
-	resize: vertical;
-}
+	& textarea.input {
+		resize: vertical;
+	}
 
-.form-group .input:invalid {
-	box-shadow: none;
-}
+	& .input:invalid {
+		box-shadow: none;
+	}
 
-.form-group .input:invalid:not(:focus) {
-	color: var(--invalid-color, #-871717);
-	border-color: currentColor;
-	background-color: var(--invalid-background, #F7C1C1);
-}
+	& .input:invalid:not(:focus) {
+		color: var(--invalid-color, #-871717);
+		border-color: currentColor;
+		background-color: var(--invalid-background, #F7C1C1);
+	}
 
-.form-group input[hidden] + label[for].btn-toggle {
-	background-color: var(--button-disabled-background);
-	margin: var(--form-group-margin, 0.3rem);
-	transition: background-color 300ms ease-in-out;
-}
+	& input[hidden] + label[for].btn-toggle {
+		background-color: var(--button-disabled-background);
+		margin: var(--form-group-margin, 0.3rem);
+		transition: background-color 300ms ease-in-out;
+	}
 
-.form-group input[hidden]:checked + label[for].btn-toggle {
-	background-color: var(--button-background);
-}
+	& input[hidden]:checked + label[for].btn-toggle {
+		background-color: var(--button-background);
+	}
 
-.form-group input[hidden]:not(:checked) + label[for].btn-toggle .when-checked {
-	display: none;
-}
+	& input[hidden]:not(:checked) + label[for].btn-toggle .when-checked {
+		display: none;
+	}
 
-.form-group input[hidden]:checked + label[for].btn-toggle .when-unchecked {
-	display: none;
+	& input[hidden]:checked + label[for].btn-toggle .when-unchecked {
+		display: none;
+	}
 }