@tailwindcss/aspect-ratio - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

.github/workflows/release-insiders.yml

+name: Release Insiders
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Use cached node_modules
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm install
+        env:
+          CI: true
+
+      - name: Resolve version
+        id: vars
+        run: echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+
+      - name: "Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}"
+        run: npm version 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version
+
+      - name: Publish
+        run: npm publish --tag insiders
+        env:
+          CI: true
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

tests/test.js

+const postcss = require('postcss')
+
+let expectedV3 = `
+.aspect-w-1 {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: 1
+}
+.aspect-w-1 > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.aspect-w-2 {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: 2
+}
+.aspect-w-2 > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.aspect-h-2 {
+    --tw-aspect-h: 2
+}
+.aspect-w-\\[123\\] {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: 123
+}
+.aspect-w-\\[123\\] > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.aspect-w-\\[var\\(--width\\)\\] {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: var(--width)
+}
+.aspect-w-\\[var\\(--width\\)\\] > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.aspect-h-\\[123\\] {
+    --tw-aspect-h: 123
+}
+.aspect-h-\\[var\\(--height\\)\\] {
+    --tw-aspect-h: var(--height)
+}
+.aspect-none {
+    position: static;
+    padding-bottom: 0
+}
+.aspect-none > * {
+    position: static;
+    height: auto;
+    width: auto;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto
+}
+`
+
+it('v3', () => {
+  let css = postcss([
+    require('tailwindcss')({
+      content: [
+        {
+          raw: 'aspect-none aspect-w-1 aspect-w-2 aspect-h-2 aspect-w-[123] aspect-w-[var(--width)] aspect-h-[123] aspect-h-[var(--height)]',
+        },
+      ],
+      plugins: [require('../')],
+    }),
+  ]).process('@tailwind components').css
+
+  expect(css).toBe(expectedV3.trim())
+})
+
+let expectedV2 = `
+.aspect-w-1,
+.aspect-w-2 {
+  position: relative;
+  padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)
+}
+
+.aspect-w-1 > *,
+.aspect-w-2 > * {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0
+}
+
+.aspect-none {
+  position: static;
+  padding-bottom: 0
+}
+
+.aspect-none > * {
+  position: static;
+  height: auto;
+  width: auto;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto
+}
+
+.aspect-w-1 {
+  --tw-aspect-w: 1
+}
+
+.aspect-w-2 {
+  --tw-aspect-w: 2
+}
+
+.aspect-h-2 {
+  --tw-aspect-h: 2
+}
+`
+
+it('v2', () => {
+  postcss([
+    require('tailwindcss-v2')({
+      purge: { enabled: true, content: [{ raw: 'aspect-none aspect-w-1 aspect-w-2 aspect-h-2' }] },
+      variants: [],
+      plugins: [require('../')],
+    }),
+  ])
+    .process('@tailwind components', { from: undefined })
+    .then(({ css }) => {
+      expect(css).toBe(expectedV2.trim())
+    })
+})

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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 low supply chain risk alerts

3

50%

Number of medium supply chain risk alerts

2

Infinity%

No dependency changes