@igorkowalczyk/is-browser 5.0.4 → 5.1.1

package/README.md

@@ -16,7 +16,7 @@
 
 ## 📥 Installation
 
-**Tailwind.css v3 or newer is required**.
+Install the package using your package manager of choice. Tailwind CSS v3 and v4 are supported.
 
 ```
 npm install @igorkowalczyk/is-browser
@@ -26,23 +26,38 @@ pnpm add @igorkowalczyk/is-browser
 
 ## 📦 Usage
 
-Add to `plugins` in your **tailwind.config.js**:
+### Tailwind CSS v4
+
+Import the plugin in your CSS file.
+
+```css
+@import "tailwindcss";
+@plugin "@igorkowalczyk/is-browser";
+```
+
+That's it! You can now use the plugin in your components.
+
+### Tailwind CSS v3
+
+Add to `plugins` in your `tailwind.config.js`.
 
 ```js
 module.exports = {
- // ...
- plugins: [
-  require("@igorkowalczyk/is-browser"),
-  // ...other plugins.
- ],
+  // ...
+  plugins: [
+    require("@igorkowalczyk/is-browser"),
+    // ...other plugins.
+  ],
 };
 ```
 
+## 🎨 Examples
+
 Style your components using `{browser_name}:{class}`, e.g. `firefox:bg-red-100`, `chrome:bg-blue-100`, etc.
 
 ```jsx
 <div className="firefox:bg-red-400 chrome:bg-blue-400 bg-yellow-400">
- <p>On firefox background should be red, on chrome should be blue and on other browsers it should be yellow</p>
+  <p>On firefox background should be red, on chrome should be blue and on other browsers it should be yellow</p>
 </div>
 ```
 
@@ -56,15 +71,15 @@ Style your components using `{browser_name}:{class}`, e.g. `firefox:bg-red-100`,
 
 ## ⁉️ Issues
 
-If you have any issues with the page please create [new issue here](https://github.com/igorkowalczyk/is-browser/issues)
+If you come across any errors or have suggestions for improvements, please create a [new issue here](https://github.com/igorkowalczyk/is-browser/issues) and describe it clearly.
 
 ## 📥 Pull Requests
 
-When submitting a pull request:
+When submitting a pull request, please follow these steps:
 
-- Clone the repo.
-- Create a branch off of `main` and give it a meaningful name (e.g. `my-awesome-new-feature`).
-- Open a [pull request](https://github.com/igorkowalczyk/is-browser/pulls) on [GitHub](https://github.com) and describe the feature or fix.
+- Clone [this repository](https://github.com/igorkowalczyk/is-browser) `https://github.com/igorkowalczyk/is-browser.git`
+- Create a branch from `main` and give it a meaningful name (e.g. `my-awesome-new-feature`).
+- Open a [pull request](https://github.com/igorkowalczyk/is-browser/pulls) on [GitHub](https://github.com/) and clearly describe the feature or fix you are proposing.
 
 ## 📋 License
 

package/dist/index.cjs

@@ -0,0 +1,7 @@
+'use strict';var createPlugin=require('tailwindcss/plugin');/* eslint-disable func-names */
+const isBrowser = createPlugin(function ({ addVariant }) {
+    addVariant("firefox", "@supports (-moz-appearance: none)");
+    addVariant("safari", "@supports (background: -webkit-named-image(i))");
+    addVariant("chrome", "@supports (-webkit-app-region: inherit)");
+}); // So rollup can infer the return type
+module.exports=isBrowser;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import createPlugin from "tailwindcss/plugin";
+declare const isBrowser: ReturnType<typeof createPlugin>;
+export default isBrowser;

package/dist/index.js

@@ -0,0 +1,7 @@
+import createPlugin from'tailwindcss/plugin';/* eslint-disable func-names */
+const isBrowser = createPlugin(function ({ addVariant }) {
+    addVariant("firefox", "@supports (-moz-appearance: none)");
+    addVariant("safari", "@supports (background: -webkit-named-image(i))");
+    addVariant("chrome", "@supports (-webkit-app-region: inherit)");
+}); // So rollup can infer the return type
+export{isBrowser as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@igorkowalczyk/is-browser",
   "description": "🏔️ Add support for browser specific variants in Tailwind.css",
-  "version": "5.0.4",
+  "version": "5.1.1",
   "author": "Igor Kowalczyk",
   "license": "MIT",
   "sideEffects": false,
@@ -10,20 +10,29 @@
   "bugs": "https://github.com/IgorKowalczyk/is-browser/issues",
   "homepage": "https://github.com/IgorKowalczyk/is-browser#readme",
   "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
-    "import": "./dist/mjs/index.js",
-    "require": "./dist/cjs/index.cjs"
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs",
+    "types": "./dist/index.d.ts"
   },
   "devDependencies": {
-    "@igorkowalczyk/eslint-config": "2.2.0",
-    "@igorkowalczyk/prettier-config": "2.2.0",
-    "eslint": "9.8.0",
-    "prettier": "3.3.3",
-    "rollup": "4.19.1",
-    "tailwindcss": "3.4.7"
+    "@igorkowalczyk/eslint-config": "^3.2.1",
+    "@igorkowalczyk/prettier-config": "^3.2.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "eslint": "^9.39.2",
+    "prettier": "^3.7.4",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.54.0",
+    "tailwindcss": "^4.1.18",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.0.0"
+    "tailwindcss": ">=3.0.0 || >=4.0.0"
   },
   "files": [
     "README.md",
@@ -40,7 +49,8 @@
     "node": ">=16"
   },
   "scripts": {
-    "build": "rollup -c",
+    "build": "pnpm run clean && rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "clean": "rimraf dist",
     "format": "prettier . --write --ignore-unknown --cache",
     "format:check": "prettier . --check --cache",
     "lint": "eslint .",

package/dist/cjs/index.cjs

@@ -1,6 +0,0 @@
-'use strict';var plugin=require('tailwindcss/plugin');/* eslint-disable func-names,prefer-arrow-callback,space-before-function-paren */
-const isBrowser = plugin(function ({ addVariant }) {
- addVariant("firefox", "@supports (-moz-appearance: none)");
- addVariant("safari", "@supports (background: -webkit-named-image(i))");
- addVariant("chrome", "@supports (-webkit-app-region: inherit)");
-});module.exports=isBrowser;

package/dist/mjs/index.js

@@ -1,6 +0,0 @@
-import plugin from'tailwindcss/plugin';/* eslint-disable func-names,prefer-arrow-callback,space-before-function-paren */
-const isBrowser = plugin(function ({ addVariant }) {
- addVariant("firefox", "@supports (-moz-appearance: none)");
- addVariant("safari", "@supports (background: -webkit-named-image(i))");
- addVariant("chrome", "@supports (-webkit-app-region: inherit)");
-});export{isBrowser as default};