Hidden Attribute: Enforce display none

Closes gh-109

Author: cvrebert

.csslintrc

@@ -8,5 +8,7 @@
 	"important": false,
 	"outline-none": false,
 	"overqualified-elements": false,
+	"unique-headings": false,
+	"unqualified-attributes": false,
 	"text-indent": false
 }

scss/_utilities/_hidden.scss

@@ -0,0 +1,17 @@
+/*
+* ==========================================================================
+* Hidden attribute
+*
+* Make the [hidden] global HTML attribute much more useful.
+* It's intended to be used to hide elements, but since it's not `!important`
+* by default, it's normally trumped by mere CSS classes that were only meant
+* to set a default `display` value. Making it `!important` (which is fine
+* because this is a utility attribute) corrects this shortcoming.
+* https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
+* https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS
+* ==========================================================================
+*/
+
+[hidden] {
+	display: none !important;
+}

scss/lint.scss

@@ -11,7 +11,8 @@
 
 @import
 	"_utilities/clearfix",
-	"_utilities/colors";
+	"_utilities/colors",
+	"_utilities/hidden";
 
 @import
 	"atoms/icons/icons",

scss/style.scss

@@ -3,7 +3,8 @@
 // ==========================================================================
 
 @import
-	"_utilities/clearfix";
+	"_utilities/clearfix",
+	"_utilities/hidden";
 
 @import
 	"atoms/icons/icons",

tasks/options/csslint.js

@@ -1,3 +1,6 @@
 module.exports = {
-	src: [ "dist/css/*.css" ]
+	src: [ "dist/css/*.css" ],
+	options: {
+		csslintrc: ".csslintrc"
+	}
 };