@tailwindcss/aspect-ratio - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

CHANGELOG.md

@@ -12,2 +12,14 @@ # Changelog
 
+## [0.3.0] - 2021-10-05
+
+### Added
+
+- Support arbitrary values in Tailwind CSS v3.0.0-alpha.1, via the new `matchComponents` API
+
+## [0.2.2] - 2021-10-02
+
+### Fixed
+
+- Fix compatibility with Tailwind CSS v3.0.0-alpha.1
+
 ## [0.2.1] - 2021-05-24
@@ -53,3 +65,4 @@
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.1...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...HEAD
+[0.2.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.0...v0.2.1
@@ -56,0 +69,0 @@ [0.2.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.4...v0.2.0

package.json

 {
   "name": "@tailwindcss/aspect-ratio",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "main": "src/index.js",
@@ -17,2 +17,3 @@ "license": "MIT",
   "scripts": {
+    "test": "jest",
     "prepublishOnly": "node scripts/build.js"
@@ -26,5 +27,7 @@ },
     "clean-css": "^4.2.1",
+    "jest": "^27.2.4",
     "postcss": "^8.2.4",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "^3.0.0-alpha.1",
+    "tailwindcss-v2": "npm:tailwindcss@^2.2.16"
   }
 }

src/index.js

 const plugin = require('tailwindcss/plugin')
 
+const baseStyles = {
+  position: 'relative',
+  paddingBottom: `calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)`,
+}
+
+const childStyles = {
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  left: '0',
+}
+
+const noneComponent = {
+  '.aspect-none': {
+    position: 'static',
+    paddingBottom: '0',
+  },
+  '.aspect-none > *': {
+    position: 'static',
+    height: 'auto',
+    width: 'auto',
+    top: 'auto',
+    right: 'auto',
+    bottom: 'auto',
+    left: 'auto',
+  },
+}
+
 const aspectRatio = plugin(
-  function ({ addComponents, theme, variants, e }) {
+  function ({ addComponents, matchComponents, theme, variants, e }) {
     const values = theme('aspectRatio')
 
+    if (matchComponents) {
+      matchComponents(
+        {
+          'aspect-w': (value) => [
+            {
+              ...baseStyles,
+              '--tw-aspect-w': value,
+            },
+            {
+              '> *': childStyles,
+            },
+          ],
+          'aspect-h': (value) => ({ '--tw-aspect-h': value }),
+        },
+        { values }
+      )
+
+      addComponents(noneComponent)
+
+      return
+    }
+
     const baseSelectors = Object.entries(values)
@@ -22,29 +75,6 @@ .map(([key, value]) => {
         {
-          [baseSelectors]: {
-            position: 'relative',
-            paddingBottom: `calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)`,
-          },
-          [childSelectors]: {
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            top: '0',
-            right: '0',
-            bottom: '0',
-            left: '0',
-          },
-          '.aspect-none': {
-            position: 'static',
-            paddingBottom: '0',
-          },
-          '.aspect-none > *': {
-            position: 'static',
-            height: 'auto',
-            width: 'auto',
-            top: 'auto',
-            right: 'auto',
-            bottom: 'auto',
-            left: 'auto',
-          },
+          [baseSelectors]: baseStyles,
+          [childSelectors]: childStyles,
         },
+        noneComponent,
         Object.entries(values).map(([key, value]) => {
@@ -51,0 +81,0 @@ return {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of package files

11

22.22%

Worsened metrics

Total package byte prevSize

15359

-58.76%

Dev dependency count

6

50%

Lines of code

292

-72%

Number of medium supply chain risk alerts

2

Infinity%

No dependency changes