tailwindcss-children - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -8,2 +8,7 @@ # Changelog
 
+## [1.3.0] - 2019-12-20
+
+### Added
+- Added `children-visited` and `children-disabled` variants
+
 ## [1.2.0] - 2019-09-02
@@ -23,5 +28,6 @@
 
-[Unreleased]: https://github.com/benface/tailwindcss-children/compare/v1.2.0...HEAD
+[Unreleased]: https://github.com/benface/tailwindcss-children/compare/v1.3.0...HEAD
+[1.3.0]: https://github.com/benface/tailwindcss-children/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/benface/tailwindcss-children/compare/v1.1.0...v1.2.0
 [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

@@ -35,2 +35,14 @@ const _ = require('lodash');
 
+    addVariant('children-visited', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}visited${separator}${className}`)} > :visited`;
+      });
+    });
+
+    addVariant('children-disabled', ({ modifySelectors, separator }) => {
+      modifySelectors(({ className }) => {
+        return `.${e(`children${separator}disabled${separator}${className}`)} > :disabled`;
+      });
+    });
+
     addVariant('odd-children', ({ modifySelectors, separator }) => {
@@ -37,0 +49,0 @@ modifySelectors(({ className }) => {

package.json

 {
   "name": "tailwindcss-children",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Tailwind CSS plugin to add variants that target child elements",
@@ -18,9 +18,9 @@ "author": "Benoît Rouleau <[e-mail]>",
   "devDependencies": {
-    "github-release-from-changelog": "^1.3.2",
+    "github-release-from-changelog": "^2.1.0",
     "jest": "^24.9.0",
     "jest-matcher-css": "^1.1.0",
-    "postcss": "^7.0.17",
-    "release-it": "^12.3.6",
-    "tailwindcss": "^1.1.2"
+    "postcss": "^7.0.25",
+    "release-it": "^12.4.3",
+    "tailwindcss": "^1.1.4"
   }
 }

README.md

@@ -15,3 +15,3 @@ # Children Variant Plugin for Tailwind CSS
   variants: {
-    display: ['children', 'default', 'odd-children', 'even-children', 'first-child', 'last-child', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'responsive'],
+    display: ['children', 'default', 'odd-children', 'even-children', 'first-child', 'last-child', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'children-visited', 'visited', 'children-disabled', 'disabled', 'responsive'],
   },
@@ -83,2 +83,18 @@ plugins: [
 
+.children\:visited\:block > :visited {
+  display: block;
+}
+
+.visited\:block:visited {
+  display: block;
+}
+
+.children\:disabled\:block > :disabled {
+  display: block;
+}
+
+.disabled\:block:disabled {
+  display: block;
+}
+
 /* etc. */
@@ -85,0 +101,0 @@ ```

test.js

@@ -7,3 +7,3 @@ const _ = require('lodash');
 
-const generatePluginCss = (variants = []) => {
+const generatePluginCss = (variants = [], tailwindOptions = {}, css = null) => {
   return postcss(
@@ -19,4 +19,4 @@ tailwindcss({
         childrenPlugin(),
-        ({ e, addUtilities }) => {
-          addUtilities({
+        ({ addUtilities }) => {
+          addUtilities(css ? css : {
             '.block': {
@@ -28,2 +28,3 @@ 'display': 'block',
       ],
+      ...tailwindOptions,
     })
@@ -80,3 +81,3 @@ )
 test('all the variants are working', () => {
-  return generatePluginCss(['children', 'default', 'odd-children', 'even-children', 'first-child', 'last-child', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active']).then(css => {
+  return generatePluginCss(['children', 'default', 'odd-children', 'even-children', 'first-child', 'last-child', 'children-hover', 'hover', 'children-focus', 'focus', 'children-focus-within', 'focus-within', 'children-active', 'active', 'children-visited', 'visited', 'children-disabled', 'disabled']).then(css => {
     expect(css).toMatchCss(`
@@ -125,2 +126,14 @@ .children\\:block > * {
       }
+      .children\\:visited\\:block > :visited {
+        display: block;
+      }
+      .visited\\:block:visited {
+        display: block;
+      }
+      .children\\:disabled\\:block > :disabled {
+        display: block;
+      }
+      .disabled\\:block:disabled {
+        display: block;
+      }
     `);
@@ -131,3 +144,3 @@ });
 test('all variants can be chained with the responsive variant', () => {
-  return generatePluginCss(['children', 'default', 'odd-children', 'even-children', 'first-child', 'last-child', 'children-hover', 'children-focus', 'children-focus-within', 'children-active', 'responsive']).then(css => {
+  return generatePluginCss(['children', 'default', 'odd-children', 'even-children', 'first-child', 'last-child', 'children-hover', 'children-focus', 'children-focus-within', 'children-active', 'children-visited', 'children-disabled', 'responsive']).then(css => {
     expect(css).toMatchCss(`
@@ -164,2 +177,8 @@ .children\\:block > * {
       }
+      .children\\:visited\\:block > :visited {
+        display: block;
+      }
+      .children\\:disabled\\:block > :disabled {
+        display: block;
+      }
       @media (min-width: 640px) {
@@ -196,2 +215,8 @@ .sm\\:children\\:block > * {
         }
+        .sm\\:children\\:visited\\:block > :visited {
+          display: block;
+        }
+        .sm\\:children\\:disabled\\:block > :disabled {
+          display: block;
+        }
       }
@@ -201,1 +226,42 @@ `);
 });
+
+test('the variants work well with Tailwind’s prefix option', () => {
+  return generatePluginCss(['children', 'default', 'first-child'], {
+    prefix: 'tw-',
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .children\\:tw-block > * {
+        display: block;
+      }
+      .tw-block {
+        display: block;
+      }
+      .first-child\\:tw-block > :first-child {
+        display: block;
+      }
+    `);
+  });
+});
+
+/* TODO: This test fails */
+/*
+test('the variants work on utilities that include pseudo-elements', () => {
+  return generatePluginCss(['children', 'default', 'first-child'], {}, {
+    '.placeholder-gray-400::placeholder': {
+      'color': '#cbd5e0',
+    },
+  }).then(css => {
+    expect(css).toMatchCss(`
+      .children\\:placeholder-gray-400 > *::placeholder {
+        color: #cbd5e0;
+      }
+      .placeholder-gray-400::placeholder {
+        color: #cbd5e0;
+      }
+      .first-child\\:placeholder-gray-400 > :first-child::placeholder {
+        color: #cbd5e0;
+      }
+    `);
+  });
+});
+*/

No alert changes

Improved metrics

Total package byte prevSize

13568

25.26%

Lines of code

315

31.25%

Number of lines in readme file

137

13.22%

No dependency changes