It appears you have a well-structured Git repository with various files, including SVG icons and HTML documents. Here's a brief overview:

This commit is contained in:
2025-06-11 09:05:15 +02:00
parent 36c2466e53
commit 6d6aa954dd
15556 changed files with 1076330 additions and 1 deletions

View File

@@ -0,0 +1,38 @@
name: Bug Report
description: Create a bug report for @tailwindcss/aspect-ratio.
labels: []
body:
- type: input
attributes:
label: What version of @tailwindcss/aspect-ratio are you using?
description: 'For example: v0.2.0'
validations:
required: true
- type: input
attributes:
label: What version of Node.js are you using?
description: 'For example: v12.0.0'
validations:
required: true
- type: input
attributes:
label: What browser are you using?
description: 'For example: Chrome, Safari, or N/A'
validations:
required: true
- type: input
attributes:
label: What operating system are you using?
description: 'For example: macOS, Windows'
validations:
required: true
- type: input
attributes:
label: Reproduction repository
description: A public GitHub repo that includes a minimal reproduction of the bug. Unfortunately we can't provide support without a reproduction, and your issue will be closed and locked with no comment if this is not provided.
validations:
required: true
- type: textarea
attributes:
label: Describe your issue
description: Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead

View File

@@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: Feature Request
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=ideas
about: 'Suggest any ideas you have using our discussion forums.'
- name: Help
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=help
about: 'If you have a question or need help, ask a question on the discussion forums.'
- name: Kind Words
url: https://github.com/tailwindlabs/tailwindcss/discussions/new?category=kind-words
about: "Have something nice to say about @tailwindcss/aspect-ratio or Tailwind CSS in general? We'd love to hear it!"

View File

@@ -0,0 +1,50 @@
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 }}

View File

@@ -0,0 +1,95 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
- Nothing yet!
## [0.4.2] - 2022-09-02
### Fixed
- Update TypeScript types ([#34](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/34))
## [0.4.1] - 2022-09-01
### Added
- Remove `dist` folder and related dependencies ([#29](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/29))
- Add typescript types ([#33](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/33))
## [0.4.0] - 2021-12-09
### Added
- Make sure that Tailwind CSS v3 is in peerDependencies ([ae97a25](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/ae97a25))
## [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
### Fixed
- Mark `tailwindcss` as peer-dependency for better monorepo support ([#14](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/pull/14))
## [0.2.0] - 2020-11-16
### Changed
- Prefix custom properties with `tw-` to match Tailwind CSS v2.0 convention ([6802588](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/6802588))
## [0.1.4] - 2020-11-06
### Added
- Add `aspect-none` clas ([73b57ef](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/73b57ef))
## [0.1.3] - 2020-11-06
### Fixed
- Remove debugging statements ([32d68f5](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/32d68f5))
## [0.1.2] - 2020-11-06
### Fixed
- Remove incorrect peer dependencies ([d46bf8f](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/d46bf8f))
## [0.1.1] - 2020-11-06
### Fixed
- Fix entry point so it even works at all ([88fd2f1](https://github.com/tailwindlabs/tailwindcss-aspect-ratio/commit/88fd2f1))
## [0.1.0] - 2020-11-06
Initial release!
[unreleased]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.2...HEAD
[0.4.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.1...v0.4.2
[0.4.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.4.0...v0.4.1
[0.4.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.3.0...v0.4.0
[0.3.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.2.2...v0.3.0
[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
[0.2.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.4...v0.2.0
[0.1.4]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.3...v0.1.4
[0.1.3]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.2...v0.1.3
[0.1.2]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.1...v0.1.2
[0.1.1]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/compare/v0.1.0...v0.1.1
[0.1.0]: https://github.com/tailwindlabs/tailwindcss-aspect-ratio/releases/tag/v0.1.0

View File

@@ -0,0 +1,141 @@
# @tailwindcss/aspect-ratio
A plugin that provides a composable API for giving elements a fixed aspect ratio.
## Installation
Install the plugin from npm:
```sh
npm install -D @tailwindcss/aspect-ratio
```
Then add the plugin to your `tailwind.config.js` file, and disable the `aspectRatio` core plugin to avoid conflicts with the native `aspect-ratio` utilities included in Tailwind CSS v3.0:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
],
}
```
## Usage
Combine the `aspect-w-{n}` and `aspect-h-{n}` classes to specify the aspect ratio for an element:
```html
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
Use `aspect-none` to remove any aspect ratio behavior:
```html
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
<!-- ... -->
</div>
```
When removing aspect ratio behavior, if nested elements have `w-{n}` or `h-{n}` classes, ensure they are re-declared with a matching breakpoint prefix:
```html
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
<img src="..." alt="..." class="w-full h-full object-center object-cover lg:w-full lg:h-full" />
</div>
```
Note that due to the way this currently needs to be implemented ([the old padding-bottom trick](https://css-tricks.com/aspect-ratio-boxes/)) you need to assign the aspect ratio to a _parent_ element, and make the actual element you are trying to size the only child of that parent.
Once the [`aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) is supported in modern browsers, we'll add official support to Tailwind CSS itself and deprecate this plugin.
Aspect ratio classes up to 16 are generated by default:
| Width | Height |
| --- | --- |
| `aspect-w-1` | `aspect-h-1` |
| `aspect-w-2` | `aspect-h-2` |
| `aspect-w-3` | `aspect-h-3` |
| `aspect-w-4` | `aspect-h-4` |
| `aspect-w-5` | `aspect-h-5` |
| `aspect-w-6` | `aspect-h-6` |
| `aspect-w-7` | `aspect-h-7` |
| `aspect-w-8` | `aspect-h-8` |
| `aspect-w-9` | `aspect-h-9` |
| `aspect-w-10` | `aspect-h-10` |
| `aspect-w-11` | `aspect-h-11` |
| `aspect-w-12` | `aspect-h-12` |
| `aspect-w-13` | `aspect-h-13` |
| `aspect-w-14` | `aspect-h-14` |
| `aspect-w-15` | `aspect-h-15` |
| `aspect-w-16` | `aspect-h-16` |
## Configuration
You can configure which values and variants are generated by this plugin under the `aspectRatio` key in your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
aspectRatio: {
1: '1',
2: '2',
3: '3',
4: '4',
}
},
variants: {
aspectRatio: ['responsive', 'hover']
}
}
```
## Compatibility with default aspect-ratio utilities
Tailwind CSS v3.0 shipped with [native aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) support, and while these new utilities are great, the `aspect-ratio` property isn't supported in Safari 14, which still has [significant global usage](https://caniuse.com/mdn-css_properties_aspect-ratio). If you need to support Safari 14, this plugin is still the best way to do that.
While it's technically possible to use the new native `aspect-ratio` utilities as well as this plugin in the same project, it doesn't really make a lot of sense to do so. If you're able to use the new native aspect-ratio utilities, just use them instead of this plugin, as they are a lot simpler and work much better.
However, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your `tailwind.config.js` file:
```js
module.exports = {
// ...
theme: {
aspectRatio: {
auto: 'auto',
square: '1 / 1',
video: '16 / 9',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
},
},
}
```
This is necessary, as the default `aspectRatio` values are overwritten by this plugin's values.

View File

@@ -0,0 +1,29 @@
{
"name": "@tailwindcss/aspect-ratio",
"version": "0.4.2",
"main": "src/index.js",
"types": "src/index.d.ts",
"license": "MIT",
"repository": "https://github.com/tailwindlabs/tailwindcss-aspect-ratio",
"publishConfig": {
"access": "public"
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
},
"scripts": {
"test": "jest"
},
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
},
"devDependencies": {
"jest": "^27.2.4",
"postcss": "^8.2.4",
"tailwindcss": "^3.0.0",
"tailwindcss-v2": "npm:tailwindcss@^2.2.16"
}
}

View File

@@ -0,0 +1,2 @@
declare const plugin: { handler: () => void }
export = plugin

View File

@@ -0,0 +1,124 @@
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, 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)
.map(([key, value]) => {
return `.${e(`aspect-w-${key}`)}`
})
.join(',\n')
const childSelectors = Object.entries(values)
.map(([key, value]) => {
return `.${e(`aspect-w-${key}`)} > *`
})
.join(',\n')
addComponents(
[
{
[baseSelectors]: baseStyles,
[childSelectors]: childStyles,
},
noneComponent,
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`aspect-w-${key}`)}`]: {
'--tw-aspect-w': value,
},
}
}),
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`aspect-h-${key}`)}`]: {
'--tw-aspect-h': value,
},
}
}),
],
variants('aspectRatio')
)
},
{
theme: {
aspectRatio: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
},
},
variants: {
aspectRatio: ['responsive'],
},
}
)
module.exports = aspectRatio

View File

@@ -0,0 +1,157 @@
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())
})
})