tailwind-child-cap 2.0.0 → 2.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Swen de Haan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,89 +1,109 @@
 # tailwind-child-cap
 
-`tailwind-child-cap` is a Tailwind CSS plugin designed to control the maximum number of visible child elements within a container. This utility is particularly useful for creating responsive designs where the number of displayed elements needs to be adjusted based on the screen size.
+`tailwind-child-cap` is a Tailwind CSS plugin that limits how many direct child elements are visible in a container.
 
 ## Features
 
-- Generates utility classes `.child-cap-{n}` to specify the number of visible child elements.
-- Provides `.child-cap-none` to display all child elements, overriding previous cap settings.
-- Fully responsive, allowing different caps at different breakpoints.
+- Generates `.child-cap-1` to `.child-cap-N` utilities
+- Includes `.child-cap-none` to remove the cap
+- Works with responsive variants (`sm:`, `md:`, `lg:`, and so on)
 
 ## Installation
 
-Install the plugin via npm:
-
 ```bash
-npm install -D tailwind-child-cap
+npm install --save-dev tailwind-child-cap
 ```
 
-## Usage
+## Usage with Tailwind 4 (`app.css`)
 
-Add `tailwind-child-cap` to your Tailwind CSS configuration file (`tailwind.config.js`):
+```css
+@import "tailwindcss";
 
-```javascript
-// tailwind.config.js
-module.exports = {
-  // ...
-  plugins: [
-    require("tailwind-child-cap"),
-    // ... other plugins
-  ],
-};
+@plugin "tailwind-child-cap";
+```
+
+Custom range:
+
+```css
+@import "tailwindcss";
+
+@plugin "tailwind-child-cap" {
+    maxrange: 42;
+}
 ```
 
-Optionally, you can customize the maximum range of the child-cap classes:
+## Usage with `tailwind.config.js`
 
-```javascript
-// tailwind.config.js
+```js
 module.exports = {
-  // ...
-  plugins: [
-    require("tailwind-child-cap")({ maxRange: 30 }),
-    // ...
-  ],
+  plugins: [require("tailwind-child-cap")({ maxRange: 30 })],
 };
 ```
 
+## Options
+
+Use `maxRange` in JavaScript config or `maxrange` in the Tailwind 4 `@plugin` block.
+
+- Type: positive integer
+- Default: `24`
+- Invalid values (non-number, `0`, negative) fall back to `24`
+
 ## Examples
 
-### Basic Usage
+### Basic usage
 
 ```html
-<div class="child-cap-3">
-  <div class="item">Item 1</div>
-  <div class="item">Item 2</div>
-  <div class="item">Item 3</div>
-  <div class="item">Item 4</div>
-  <!-- Hidden -->
-</div>
+<ul class="child-cap-3">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+  <!-- Hidden from here -->
+  <li>Item 4</li>
+  <li>Item 5</li>
+</ul>
 ```
 
-In this example, only the first three child elements will be visible.
+In this example, only the first three child elements are visible.
 
-### Responsive Design
+### Responsive design
 
 ```html
-<div class="child-cap-2 md:child-cap-4 lg:child-cap-6">
-  <!-- Child elements here -->
-</div>
+<ul class="child-cap-2 md:child-cap-4 lg:child-cap-6">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <!-- Hidden until md -->
+  <li>Item 3</li>
+  <li>Item 4</li>
+  <!-- Hidden until lg -->
+  <li>Item 5</li>
+  <li>Item 6</li>
+  <!-- Hidden at all breakpoints -->
+  <li>Item 7</li>
+</ul>
 ```
 
-This setup displays 2 child elements by default, 4 on medium screens, and 6 on large screens.
+This setup shows 2 items by default, 4 on `md`, and 6 on `lg`.
 
-### Removing the Cap
+### Removing the cap
 
 ```html
-<div class="md:child-cap-3 lg:child-cap-none">
-  <!-- Child elements here -->
-</div>
+<ul class="md:child-cap-3 lg:child-cap-none">
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+  <!-- Hidden on md, visible again on lg -->
+  <li>Item 4</li>
+  <li>Item 5</li>
+</ul>
 ```
 
-This configuration caps the children to 3 on medium screens and removes the cap on large screens, displaying all children.
+On medium screens this caps at 3 items, and on large screens the cap is removed.
 
-## Contributing
+## Compatibility
 
-Contributions to `tailwind-child-cap` are welcome! Feel free to submit issues or pull requests on GitHub for any bugs, improvements, or new features.
+- Tailwind CSS: `^4.0.0`
+- Node.js: `>=14`
 
 ## License
 
-This plugin is licensed under the MIT License. See [LICENSE](LICENSE) for more information.
+MIT, see [LICENSE](LICENSE).

package/package.json

@@ -1,14 +1,28 @@
 {
   "name": "tailwind-child-cap",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "A Tailwind CSS plugin to control the maximum number of visible child elements in a container.",
   "main": "tailwind-child-cap.js",
+  "exports": {
+    ".": "./tailwind-child-cap.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "tailwind-child-cap.js",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "node --check tailwind-child-cap.js && node --check test/tailwind-child-cap.test.js",
+    "test": "node test/tailwind-child-cap.test.js",
+    "prepack": "npm run lint && npm test"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0"
   },
+  "devDependencies": {
+    "tailwindcss": "^4.0.3"
+  },
   "keywords": [
     "tailwindcss",
     "tailwind",
@@ -21,9 +35,18 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/tailwind-child-cap.git"
+    "url": "git+https://github.com/Swennet/tailwind-child-cap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Swennet/tailwind-child-cap/issues"
+  },
+  "homepage": "https://github.com/Swennet/tailwind-child-cap#readme",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "engines": {
     "node": ">=14.0.0"
-  }
+  },
+  "sideEffects": false
 }

package/tailwind-child-cap.js

@@ -1,36 +1,67 @@
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
+
+const DEFAULT_MAX_RANGE = 24;
+
+function normalizeOptions(options) {
+    if (!options || typeof options !== "object" || Array.isArray(options)) {
+        return {};
+    }
+
+    return Object.fromEntries(
+        Object.entries(options).map(([key, value]) => [
+            key.toLowerCase().replace(/[-_]/g, ""),
+            value,
+        ]),
+    );
+}
+
+function resolveMaxRange(options = {}) {
+    const normalized = normalizeOptions(options);
+    const raw = normalized.maxrange ?? DEFAULT_MAX_RANGE;
+    const parsed = Number.parseInt(String(raw).trim(), 10);
+
+    if (!Number.isFinite(parsed) || parsed < 1) {
+        return DEFAULT_MAX_RANGE;
+    }
+
+    return parsed;
+}
+
+function createUtilities(maxRange) {
+    const utilities = {};
+
+    for (let i = 1; i <= maxRange; i++) {
+        utilities[`.child-cap-${i}`] = {
+            "& > *": {
+                display: "none",
+            },
+            [`& > :where(:nth-child(-n+${i}))`]: {
+                display: "block",
+            },
+        };
+    }
+
+    utilities[".child-cap-none"] = {
+        "& > *": {display: "block"},
+    };
+
+    return utilities;
+}
 
 const childCapPlugin = plugin.withOptions(
     (options = {}) =>
-        ({ addUtilities }) => {
-            const maxRange = options.maxRange || 24
-            const utilities = {}
-
-            // Base utilities
-            for (let i = 1; i <= maxRange; i++) {
-                utilities[`.child-cap-${i}`] = {
-                    '& > *': {
-                        display: 'none',
-                        [`&:nth-child(-n+${i})`]: {
-                            display: 'block'
-                        }
-                    }
-                }
-            }
-
-            // No-cap utility
-            utilities[`.child-cap-none`] = {
-                '& > *': {
-                    display: 'block'
-                }
-            }
-
-            addUtilities(utilities, {
+        ({addUtilities}) => {
+            const maxRange = resolveMaxRange(options);
+            addUtilities(createUtilities(maxRange), {
                 respectPrefix: false,
                 respectImportant: false,
-                variants: ['responsive']
-            })
-        }
-)
+            });
+        },
+);
 
-module.exports = childCapPlugin
+module.exports = childCapPlugin;
+module.exports._private = {
+    DEFAULT_MAX_RANGE,
+    createUtilities,
+    resolveMaxRange,
+};