tailwindcss-content-visibility - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

package.json

 {
 	"name": "tailwindcss-content-visibility",
-	"version": "0.2.0",
+	"version": "1.0.0",
 	"repository": "https://github.com/Cherry/tailwindcss-content-visibility",
 	"license": "MIT",
-	"main": "src/index.js",
+	"type": "module",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		"import": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"require": {
+			"types": "./dist/index.d.cts",
+			"require": "./dist/index.cjs"
+		}
+	},
 	"files": [
-		"src"
+		"src",
+		"dist"
 	],
 	"scripts": {
+		"build": "tsup src/index.ts --format cjs,esm --dts --clean --sourcemap",
+		"check-types": "tsc --noEmit",
 		"lint": "npm run lint:js",
-		"lint:js": "eslint \"**/*.js\"",
-		"lint:js:fix": "eslint \"**/*.js\" --fix",
-		"test": "npm run lint && jest"
+		"lint:js": "eslint \"**/*.{js,ts}\"",
+		"lint:js:fix": "eslint \"**/*.{js,ts}\" --fix",
+		"test": "npm run lint && npm run check-types && vitest run"
 	},
 	"devDependencies": {
-		"@nodecraft/eslint-config": "^38.0.0",
+		"@nodecraft/eslint-config": "^43.1.0",
+		"@typescript-eslint/eslint-plugin": "^8.7.0",
+		"@vitest/eslint-plugin": "^1.1.4",
 		"eslint": "^8.57.0",
-		"eslint-plugin-jest": "^28.5.0",
-		"eslint-plugin-json": "^3.1.0",
-		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-unicorn": "^53.0.0",
-		"jest": "^29.7.0",
-		"postcss": "^8.4.38",
-		"tailwindcss": "^3.4.3"
+		"eslint-plugin-json": "^4.0.1",
+		"eslint-plugin-unicorn": "^55.0.0",
+		"postcss": "^8.4.47",
+		"tailwindcss": "^3.4.13",
+		"tsup": "^8.3.0",
+		"vitest": "^2.1.1"
 	},
@@ -27,0 +44,0 @@ "peerDependencies": {

README.md

@@ -24,10 +24,10 @@ # tailwindcss-content-visibility
 module.exports = {
-  theme: {
-    // ...
-  },
-  plugins: [
-    require('tailwindcss-content-visibility'),
-    // ...
-  ],
-}
+	theme: {
+		// ...
+	},
+	plugins: [
+		require("tailwindcss-content-visibility"),
+		// ...
+	],
+};
 ```
@@ -41,6 +41,8 @@
 <div class="content-visibility-auto contain-intrinsic-size-[auto_1000px]">
-  ...
+	...
 </div>
 ```
+
 This would output something like:
+
 ```css
@@ -57,6 +59,6 @@ .content-visibility-auto {
 
-| Class | Output |
-| --- | --- |
-| `content-visibility-auto` | `auto` |
-| `content-visibility-hidden` | `hidden` |
+| Class                        | Output    |
+| ---------------------------- | --------- |
+| `content-visibility-auto`    | `auto`    |
+| `content-visibility-hidden`  | `hidden`  |
 | `content-visibility-visible` | `visible` |
@@ -71,23 +73,23 @@
 module.exports = {
-  theme: {
+	theme: {
 		extend: {
 			contentVisibility: {
-				'foo': 'bar',
+				foo: "bar",
 			},
 			containIntrinsicSize: {
-				example: '1px 20px',
+				example: "1px 20px",
 			},
-		}
-  },
-}
+		},
+	},
+};
 ```
+
 With the above configuration, you could then use:
 
 ```html
-<div class="content-visibility-foo contain-intrinsic-size-example">
-  ...
-</div>
+<div class="content-visibility-foo contain-intrinsic-size-example">...</div>
 ```
 
 And this would output something like:
+
 ```css
@@ -100,2 +102,2 @@ .content-visibility-foo {
 }
-```
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11558

145.76%

Number of package files

10

150%

Lines of code

152

310.81%

Number of low quality alerts

1

-50%

Number of lines in readme file

99

3.13%

Is type module

Yes

NaN

Worsened metrics

Dev dependency count

10

11.11%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes