tailwindcss-children - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -8,2 +8,7 @@ # Changelog
 
+## [1.1.0] - 2019-07-08
+
+### Added
+- Added 4 variants: `children-hover`, `children-focus`, `children-focus-within`, and `children-active`
+
 ## [1.0.0] - 2019-02-14
@@ -13,3 +18,4 @@
 
-[Unreleased]: https://github.com/benface/tailwindcss-children/compare/v2.0.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-children/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/benface/tailwindcss-children/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/benface/tailwindcss-children/releases/tag/v1.0.0

index.js

@@ -11,2 +11,26 @@ const _ = require('lodash');
 
+    addVariant('children-hover', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}hover${separator}${className}`)} > :hover`;
+      });
+    });
+
+    addVariant('children-focus', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}focus${separator}${className}`)} > :focus`;
+      });
+    });
+
+    addVariant('children-focus-within', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}focus-within${separator}${className}`)} > :focus-within`;
+      });
+    });
+
+    addVariant('children-active', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}active${separator}${className}`)} > :active`;
+      });
+    });
+
     addVariant('first-child', ({ modifySelectors, separator }) => {
@@ -13,0 +37,0 @@ modifySelectors(({ className }) => {

package.json

 {
   "name": "tailwindcss-children",
-  "version": "1.0.0",
-  "description": "Tailwind CSS plugin to add a variant that targets child elements, as well as first child and last child variants",
+  "version": "1.1.0",
+  "description": "Tailwind CSS plugin to add variants that target child elements",
   "author": "Benoît Rouleau <[e-mail]>",
@@ -23,7 +23,7 @@ "license": "ISC",
     "jest": "^24.8.0",
-    "jest-matcher-css": "^1.0.3",
-    "postcss": "^7.0.16",
-    "release-it": "^12.2.1",
-    "tailwindcss": "^1.0.1"
+    "jest-matcher-css": "^1.1.0",
+    "postcss": "^7.0.17",
+    "release-it": "^12.3.2",
+    "tailwindcss": "^1.0.4"
   }
 }

README.md

@@ -15,5 +15,3 @@ # Children Variant Plugin for Tailwind CSS
   variants: {
-    display: ['children', 'default', 'first-child', 'last-child', 'responsive'],
-    borderWidth: ['children', 'default', 'first-child', 'last-child', 'responsive'],
-    borderColor: ['children', 'default', 'first-child', 'last-child', 'responsive'],
+    display: ['children', 'default', 'first-child', 'last-child', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'responsive'],
   },
@@ -26,3 +24,3 @@ plugins: [
 
-The above configuration would generate the following classes:
+The above configuration would generate the following CSS:
 
@@ -38,10 +36,42 @@ ```css
 
-.first-child\:block:first-child {
+.first-child\:block > :first-child {
   display: block;
 }
 
-.last-child\:block:last-child {
+.last-child\:block > :last-child {
   display: block;
 }
 
+.children\:hover\:block > :hover {
+  display: block;
+}
+
+.hover\:block:hover {
+  display: block;
+}
+
+.children\:focus\:block > :focus {
+  display: block;
+}
+
+.focus\:block:focus {
+  display: block;
+}
+
+.children\:focus-within\:block > :focus-within {
+  display: block;
+}
+
+.focus-within\:block:focus-within {
+  display: block;
+}
+
+.children\:active\:block > :active {
+  display: block;
+}
+
+.active\:block:active {
+  display: block;
+}
+
 /* etc. */
@@ -53,3 +83,3 @@ ```
 ```html
-<ul class="children:block children:border-b children:border-black last-child:border-b-0">
+<ul class="children:block children:border-b children:border-gray last-child:border-b-0 children:hover:bg-gray">
   <li>
@@ -86,2 +116,2 @@ First item
 
-The above depends on the order of the generated CSS, so make sure to add the `default` variant *after* the `children` one in the array of variants.
+The above depends on the order of the generated CSS, so make sure to add the `default` variant *after* the `children` one in the array of variants (as well as the `hover` variant after the `children-hover` variant if you want to override a `children-hover:` utility, etc.).

test.js

@@ -44,3 +44,3 @@ const _ = require('lodash');
       .block {
-        display: block
+        display: block;
       }
@@ -55,6 +55,6 @@ `);
       .block {
-        display: block
+        display: block;
       }
       .children\\:block > * {
-        display: block
+        display: block;
       }
@@ -69,6 +69,6 @@ `);
       .children\\:block > * {
-        display: block
+        display: block;
       }
       .block {
-        display: block
+        display: block;
       }
@@ -79,17 +79,41 @@ `);
 
-test('the first-child and last-child variants are working', () => {
-  return generatePluginCss(['children', 'default', 'first-child', 'last-child']).then(css => {
+test('all the variants are working', () => {
+  return generatePluginCss(['children', 'default', 'first-child', 'last-child', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active']).then(css => {
     expect(css).toMatchCss(`
       .children\\:block > * {
-        display: block
+        display: block;
       }
       .block {
-        display: block
+        display: block;
       }
       .first-child\\:block > :first-child {
-        display: block
+        display: block;
       }
       .last-child\\:block > :last-child {
-        display: block
+        display: block;
       }
+      .children\\:hover\\:block > :hover {
+        display: block;
+      }
+      .hover\\:block:hover {
+        display: block;
+      }
+      .children\\:focus\\:block > :focus {
+        display: block;
+      }
+      .focus\\:block:focus {
+        display: block;
+      }
+      .children\\:focus-within\\:block > :focus-within {
+        display: block;
+      }
+      .focus-within\\:block:focus-within {
+        display: block;
+      }
+      .children\\:active\\:block > :active {
+        display: block;
+      }
+      .active\\:block:active {
+        display: block;
+      }
     `);
@@ -100,29 +124,53 @@ });
 test('all variants can be chained with the responsive variant', () => {
-  return generatePluginCss(['children', 'default', 'first-child', 'last-child', 'responsive']).then(css => {
+  return generatePluginCss(['children', 'default', 'first-child', 'last-child', 'children-hover', 'children-focus', 'children-focus-within', 'children-active', 'responsive']).then(css => {
     expect(css).toMatchCss(`
       .children\\:block > * {
-        display: block
+        display: block;
       }
       .block {
-        display: block
+        display: block;
       }
       .first-child\\:block > :first-child {
-        display: block
+        display: block;
       }
       .last-child\\:block > :last-child {
-        display: block
+        display: block;
       }
+      .children\\:hover\\:block > :hover {
+        display: block;
+      }
+      .children\\:focus\\:block > :focus {
+        display: block;
+      }
+      .children\\:focus-within\\:block > :focus-within {
+        display: block;
+      }
+      .children\\:active\\:block > :active {
+        display: block;
+      }
       @media (min-width: 640px) {
         .sm\\:children\\:block > * {
-          display: block
+          display: block;
         }
         .sm\\:block {
-          display: block
+          display: block;
         }
         .sm\\:first-child\\:block > :first-child {
-          display: block
+          display: block;
         }
         .sm\\:last-child\\:block > :last-child {
-          display: block
+          display: block;
         }
+        .sm\\:children\\:hover\\:block > :hover {
+          display: block;
+        }
+        .sm\\:children\\:focus\\:block > :focus {
+          display: block;
+        }
+        .sm\\:children\\:focus-within\\:block > :focus-within {
+          display: block;
+        }
+        .sm\\:children\\:active\\:block > :active {
+          display: block;
+        }
       }
@@ -129,0 +177,0 @@ `);

No alert changes

Improved metrics

Lines of code

212

47.22%

Number of lines in readme file

113

36.14%

Worsened metrics

Total package byte prevSize

9537

-24.51%

Number of package files

6

-14.29%

No dependency changes