Added: attribute case insensitive support (#306)

Specification: https://www.w3.org/TR/selectors4/#attribute-case
Plugin documentation: https://github.com/Semigradsky/postcss-attribute-case-insensitive

Author: Semigradsky

docs/content/features.md

@@ -428,6 +428,20 @@ body {
 |
 [Plugin documentation](https://github.com/MattDiMu/postcss-replace-overflow-wrap)
 
+## attribute case insensitive
+
+Allows you to use case insensitive attributes.
+
+```css
+[frame=hsides i] {
+  border-style: solid none;
+}
+```
+
+[Specification](https://www.w3.org/TR/selectors4/#attribute-case)
+|
+[Plugin documentation](https://github.com/Semigradsky/postcss-attribute-case-insensitive)
+
 ## @todo
 
 Any omissions of the CSS specifications (even in draft) that are subject to be

docs/content/index.md

@@ -135,6 +135,9 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
           (<code>word-wrap</code> fallback)
         </small>
       </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#attribute-case-insensitive">attribute case insensitive</a>
+      </li>
     </ul>
     <small
       class="cssnext-FeaturesList-small"

docs/content/playground.html

@@ -79,6 +79,11 @@
 /* overflow-wrap fallback */
 body {
 overflow-wrap: break-word;
+}
+
+/* attribute case insensitive */
+[frame=hsides i] {
+border-style: solid none;
 }
 
     </textarea>

package.json

@@ -28,6 +28,7 @@
     "pleeease-filters": "^3.0.0",
     "postcss": "^5.0.4",
     "postcss-apply": "^0.3.0",
+    "postcss-attribute-case-insensitive": "^1.0.1",
     "postcss-calc": "^5.0.0",
     "postcss-color-function": "^2.0.0",
     "postcss-color-gray": "^3.0.0",

src/__tests__/fixtures/features/attribute-case-insensitive.css

@@ -0,0 +1,3 @@
+[data-foo=test i] {
+  display: block;
+}

src/__tests__/fixtures/features/attribute-case-insensitive.expected.css

@@ -0,0 +1,3 @@
+[data-foo=test],[data-foo=Test],[data-foo=tEst],[data-foo=TEst],[data-foo=teSt],[data-foo=TeSt],[data-foo=tESt],[data-foo=TESt],[data-foo=tesT],[data-foo=TesT],[data-foo=tEsT],[data-foo=TEsT],[data-foo=teST],[data-foo=TeST],[data-foo=tEST],[data-foo=TEST] {
+  display: block;
+}

src/features.js

@@ -27,6 +27,9 @@ export default {
   // https://npmjs.com/package/postcss-custom-selectors
   customSelectors: (options) => require("postcss-custom-selectors")(options),
 
+  // https://npmjs.com/package/postcss-attribute-case-insensitive
+  attributeCaseInsensitive: (options) => require("postcss-attribute-case-insensitive")(options),
+
   // https://npmjs.com/package/postcss-color-rebeccapurple
   colorRebeccapurple: (options) => require("postcss-color-rebeccapurple")(options),