@igorkowalczyk/is-browser 2.1.2 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/package.json +13 -10
- package/readme.md +8 -6
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const o=require("tailwindcss/plugin");module.exports=o(function({addVariant:e}){e("firefox","
|
|
1
|
+
const o=require("tailwindcss/plugin");module.exports=o(function({addVariant:e}){e("firefox","@supports (-moz-appearance: none)"),e("safari","@supports (background: -webkit-named-image(i))"),e("chrome","@supports (-webkit-app-region: inherit)")});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@igorkowalczyk/is-browser",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "🏔️ Add support for browser specific variants in Tailwind.css",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"repository": {
|
|
@@ -24,13 +24,16 @@
|
|
|
24
24
|
},
|
|
25
25
|
"homepage": "https://github.com/IgorKowalczyk/is-browser#readme",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"
|
|
28
|
-
"prettier-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
27
|
+
"@igorkowalczyk/eslint-config": "1.1.0",
|
|
28
|
+
"@igorkowalczyk/prettier-config": "1.1.0",
|
|
29
|
+
"esbuild": "0.17.14",
|
|
30
|
+
"eslint": "8.36.0",
|
|
31
|
+
"prettier": "2.8.7",
|
|
32
|
+
"prettier-plugin-tailwindcss": "0.2.5",
|
|
33
|
+
"tailwindcss": "3.3.0"
|
|
31
34
|
},
|
|
32
35
|
"peerDependencies": {
|
|
33
|
-
"tailwindcss": "
|
|
36
|
+
"tailwindcss": "3.0 || 3.2 || 3.3"
|
|
34
37
|
},
|
|
35
38
|
"files": [
|
|
36
39
|
"README.md",
|
|
@@ -39,11 +42,11 @@
|
|
|
39
42
|
"exports": {
|
|
40
43
|
"require": "./dist/index.cjs"
|
|
41
44
|
},
|
|
42
|
-
"packageManager": "pnpm@
|
|
45
|
+
"packageManager": "pnpm@8.0.0",
|
|
43
46
|
"scripts": {
|
|
44
|
-
"format": "prettier --write . --ignore-unknown",
|
|
45
|
-
"format:check": "prettier --check .",
|
|
47
|
+
"format": "prettier --write . --ignore-unknown --cache",
|
|
48
|
+
"format:check": "prettier --check . --cache",
|
|
46
49
|
"build": "esbuild index.js --format=cjs --platform=node --minify --outfile=dist/index.cjs",
|
|
47
|
-
"
|
|
50
|
+
"lint": "eslint . --ext .js,.ts"
|
|
48
51
|
}
|
|
49
52
|
}
|
package/readme.md
CHANGED
|
@@ -31,19 +31,21 @@ module.exports = {
|
|
|
31
31
|
};
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
Style your components using `{browser_name}:{class}`, e.g. `firefox:bg-red-100`, `
|
|
34
|
+
Style your components using `{browser_name}:{class}`, e.g. `firefox:bg-red-100`, `chrome:bg-blue-100`, etc.
|
|
35
35
|
|
|
36
36
|
```jsx
|
|
37
|
-
<div className="firefox:bg-red-
|
|
38
|
-
<p>On firefox background should be red, on other browsers it should be
|
|
37
|
+
<div className="firefox:bg-red-400 chrome:bg-blue-400 bg-yellow-400">
|
|
38
|
+
<p>On firefox background should be red, on chrome should be blue and on other browsers it should be yellow</p>
|
|
39
39
|
</div>
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
## 🔐 Supported browsers
|
|
43
43
|
|
|
44
|
-
| Browser |
|
|
45
|
-
| ------- |
|
|
46
|
-
| Firefox | `
|
|
44
|
+
| Browser | Variant | CSS Property | Example |
|
|
45
|
+
| ------- | ---------- | ------------------------------------ | ----------------------- |
|
|
46
|
+
| Firefox | `firefox:` | `-moz-appearance: none` | `firefox:bg-yellow-400` |
|
|
47
|
+
| Chrome | `chrome:` | `background: -webkit-named-image(i)` | `chrome:bg-red-400` |
|
|
48
|
+
| Safari | `safari:` | `-webkit-app-region: inherit` | `safari:bg-blue-400` |
|
|
47
49
|
|
|
48
50
|
## ⁉️ Issues
|
|
49
51
|
|