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:
38
backend/node_modules/@tailwindcss/aspect-ratio/.github/ISSUE_TEMPLATE/1.bug_report.yml
generated
vendored
Normal file
38
backend/node_modules/@tailwindcss/aspect-ratio/.github/ISSUE_TEMPLATE/1.bug_report.yml
generated
vendored
Normal 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
|
11
backend/node_modules/@tailwindcss/aspect-ratio/.github/ISSUE_TEMPLATE/config.yml
generated
vendored
Normal file
11
backend/node_modules/@tailwindcss/aspect-ratio/.github/ISSUE_TEMPLATE/config.yml
generated
vendored
Normal 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!"
|
50
backend/node_modules/@tailwindcss/aspect-ratio/.github/workflows/release-insiders.yml
generated
vendored
Normal file
50
backend/node_modules/@tailwindcss/aspect-ratio/.github/workflows/release-insiders.yml
generated
vendored
Normal 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 }}
|
95
backend/node_modules/@tailwindcss/aspect-ratio/CHANGELOG.md
generated
vendored
Normal file
95
backend/node_modules/@tailwindcss/aspect-ratio/CHANGELOG.md
generated
vendored
Normal 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
|
141
backend/node_modules/@tailwindcss/aspect-ratio/README.md
generated
vendored
Normal file
141
backend/node_modules/@tailwindcss/aspect-ratio/README.md
generated
vendored
Normal 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.
|
29
backend/node_modules/@tailwindcss/aspect-ratio/package.json
generated
vendored
Normal file
29
backend/node_modules/@tailwindcss/aspect-ratio/package.json
generated
vendored
Normal 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"
|
||||
}
|
||||
}
|
2
backend/node_modules/@tailwindcss/aspect-ratio/src/index.d.ts
generated
vendored
Normal file
2
backend/node_modules/@tailwindcss/aspect-ratio/src/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const plugin: { handler: () => void }
|
||||
export = plugin
|
124
backend/node_modules/@tailwindcss/aspect-ratio/src/index.js
generated
vendored
Normal file
124
backend/node_modules/@tailwindcss/aspect-ratio/src/index.js
generated
vendored
Normal 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
|
157
backend/node_modules/@tailwindcss/aspect-ratio/tests/test.js
generated
vendored
Normal file
157
backend/node_modules/@tailwindcss/aspect-ratio/tests/test.js
generated
vendored
Normal 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())
|
||||
})
|
||||
})
|
Reference in New Issue
Block a user