Add first debug functions & mixins

index.local.scss

@@ -1,2 +1,9 @@
-// Output
-@import 'src/index';
+@import 'node_modules/@henris/default/index.scss';
+@import 'node_modules/@henris/utils/index.scss';
+@import 'node_modules/@henris/custom/index.scss';
+
+$output: set-output(css, true);
+$output: set-output(debug-full, false);
+
+@import 'node_modules/@henris/output/index.scss';
+@import 'src/index';

index.scss

@@ -1,2 +1,2 @@
 // Output
-@import 'src/index';
+@import 'src/index';

package.json

@@ -41,7 +41,10 @@
     "stylelint-order": "^3.1.0"
   },
   "dependencies": {
-    "@henris/output": "^0.0.6",
+    "@henris/custom": "0.0.2",
+    "@henris/default": "0.0.2",
+    "@henris/grid": "0.0.11",
+    "@henris/output": "0.0.6",
     "@henris/utils": "^0.0.14"
   }
 }

src/functions/index.scss

@@ -0,0 +1,127 @@
+@if output(debug-full) or output(debug-layout){
+	body * { background-color: rgba(255,0,0,.2); }
+	body * * { background-color: rgba(0,255,0,.2); }
+	body * * * { background-color: rgba(0,0,255,.2); }
+	body * * * * { background-color: rgba(255,0,255,.2); }
+	body * * * * * { background-color: rgba(0,255,255,.2); }
+	body * * * * * * { background-color: rgba(255,255,0,.2); }
+	body * * * * * * * { background-color: rgba(255,0,0,.2); }
+	body * * * * * * * * { background-color: rgba(0,255,0,.2); }
+	body * * * * * * * * * { background-color: rgba(0,0,255,.2); }
+
+	b > div,
+	i > div,
+	q > div,
+	em > div,
+	abbr > div,
+	cite > div,
+	span > div,
+	small > div,
+	label > div,
+	strong > div {
+		@include debug-warning("You shouldn\'t use a div in an inline element");
+	}
+}
+
+@if output(debug-full) or output(debug-image){
+	img:not([alt]),
+	img[alt=''] {
+		@include debug-warning('Images always need an alt text.');
+	}
+}
+
+@if output(debug-full) or output(debug-link){
+	a:not([href]),
+	a[href=''] {
+		@include debug-warning('Link always required a href.');
+	}
+	//
+	a[target$='blank']:not([rel]),
+	a[target$='blank']:not([rel*='noopener']):not([rel*='noreferrer']){
+		@include debug-warning('a[target=_blank] always needs a rel=noopener');
+	}
+	//
+	a[href^='javascript']:not([role='button']) {
+		@include debug-warning(
+			'Don\'t add javascript to a link attribute, use a button instead'
+		);
+	}
+}
+
+@if output(debug-full) or output(debug-details){
+	details > summary:not(:first-child) {
+		@include debug-warning(
+			'Summary should always be the first child in a details'
+		);
+	}
+	//
+	dt + :not(dd),
+	:not(dt):not(dd) + dd {
+		@include debug-warning('DL can only have DT or DD as children');
+	}
+	:not(dl) > dt,
+	:not(dl) > dd,
+	dl > :not(dt):not(dd):not(div) {
+		@include debug-warning('DT and DD can only be used in a DL');
+	}
+}
+
+@if output(debug-full) or output(debug-list) {
+	:not(ul):not(ol) > li {
+		@include debug-warning('LI can only be used in a OL or UL');
+	}
+}
+
+@if output(debug-full) or output(debug-form) {
+	label:not([for]):not(>input),
+	label[for=' ']:not(>input),
+	label[for='']:not(>input) {
+		@include debug-warning('Label always requires an for attribute');
+	}
+	input:not([type]),
+	input[type=' '],
+	input[type=''] {
+		@include debug-warning('Input always requires an input type');
+	}
+	input:not([name]),
+	input[name=' '],
+	input[name=''] {
+		@include debug-warning('Input always requires an name attribute');
+	}
+
+}
+
+@if output(debug-full) or output(debug-legend) {
+	fieldset > legend:not(:first-child) {
+		@include debug-warning(
+			'Legend should always be the first child in a fieldset'
+		);
+	}
+}
+
+@if output(debug-full) or output(debug-abbr) {
+	abbr:not([title]),
+	abbr[title=' '],
+	abbr[title=''] {
+		@include debug-warning(
+			'Summary should always be the first child in a details'
+		);
+	}
+}
+
+@if output(debug-full) or output(debug-figcaption) {
+	:not(figure) > figcaption {
+		@include debug-warning('Figcaption can only be used in a DL');
+	}
+}
+
+@if output(debug-bad-compute) {
+	[id*="NaN"],
+	[id*="null"],
+	[class*="NaN"],
+	[class*="null"],
+	[id*="undefined"],
+	[class*="undefined"] {
+		@include debug-warning("There is probably something wrong with this element, check the ID or class");
+	}
+}

src/index.scss

@@ -1 +1,2 @@
-// Debugging 
+@import 'mixins/index';
+@import 'functions/index';

src/mixins/_index.scss

@@ -0,0 +1,39 @@
+@mixin debug-warning($text) {
+	position: relative;
+	outline: 1px dashed red;
+	&::before {
+		content: "#{$text}";
+		position: absolute;
+		top: 0;
+		left: 0;
+		background-color: red;
+		color: white;
+		padding: 0.25rem 0.5rem;
+	}
+}
+
+
+@mixin debug-layout{
+	body * { background-color: rgba(255,0,0,.2); }
+	body * * { background-color: rgba(0,255,0,.2); }
+	body * * * { background-color: rgba(0,0,255,.2); }
+	body * * * * { background-color: rgba(255,0,255,.2); }
+	body * * * * * { background-color: rgba(0,255,255,.2); }
+	body * * * * * * { background-color: rgba(255,255,0,.2); }
+	body * * * * * * * { background-color: rgba(255,0,0,.2); }
+	body * * * * * * * * { background-color: rgba(0,255,0,.2); }
+	body * * * * * * * * * { background-color: rgba(0,0,255,.2); }
+
+	b > div,
+	i > div,
+	q > div,
+	em > div,
+	abbr > div,
+	cite > div,
+	span > div,
+	small > div,
+	label > div,
+	strong > div {
+		@include debug-warning("You shouldn\'t use a div in an inline element");
+	}
+}

test/index.scss

@@ -1,2 +1,5 @@
 @import "../node_modules/ssst/index.scss";
-// @debug 'Tests yet to be made';
+@import '../index.local.scss';
+
+
+@include debug-layout;