yisibl/postcss-aspect-ratio-mini

A PostCSS plugin to fix an element's dimensions to an aspect ratio

PostCSS Aspect Ratio Mini

A PostCSS plugin to fix an element's dimensions to an aspect ratio.

There is already a standard aspect-ratio in the CSS specification, and Chrome has experimental support. So it is recommended to use / to separate values, the next version may deprecate : separator.

Install

npm i postcss-aspect-ratio-mini --save

Usage

var postcss = require('postcss')

var output = postcss()
  .use(require('postcss-aspect-ratio-mini'))
  .process(require('fs').readFileSync('input.css', 'utf8'))
  .css

Example

A simple example using the custom ratio value 16 / 9.

Input

.aspect-box {
    position: relative;
}

.aspect-box {
    aspect-ratio: 16 / 9;
}

.aspect-box2 {
    aspect-ratio: 0.1 / 0.3;
}

Output

.aspect-box {
    position: relative;
}

.aspect-box:before {
    padding-top: 56.25%;
}

.aspect-box2:before {
    padding-top: 300%;
}

Test

npm test

Changelog

License

postcss-aspect-ratio-mini's Issues

.postcssrc.js配置转vue里的css没效果

.postcssrc.js

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": { utf8: false },
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units":{},
"cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false }
}
}

vue

`<style scoped>
[aspectratio] {
position: relative;
}
[aspectratio]::before {
content: ''; display: block; width: 1px; margin-left: -1px; height: 0;
}
[aspectratio-content] {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
}
[w-188-246] { aspect-ratio: '188:246'; }
/* [w-188-246] { width: 188px; background-color: red; } */

</style>`

浏览器结果：没有padding-top出现

Update to match the upcoming native aspect-ratio syntax

The new CSS Sizing lv4 will introduce the native css aspect-ratio property:

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

The valye syntax is a bit different, this regex (((?:\d*\.?\d*)?)(?:\/|\|)(\d+)) should match the new A/B syntax. This is useful to polyfill the future syntax without rewriting the rule if the plugin is removed.

ESlint Unknown property: 'aspect-ratio'

ESlint Unknown property: 'aspect-ratio'

大神，双引号有问题，能不能支持双引号

如图，单引号编译出来是正常的，双引号编译出来会有单引号，能不能把双引号也支持一下

Introduce test cases for WPT to make the syntax more compliant

https://chromium-review.googlesource.com/c/chromium/src/+/2437698

Migration of Travis to GitHub Action

为啥 padding-top 里面的内容 是引号引起来的？

奇怪了。。
跟哪个冲突了？
win10
vue cli 3.01
@yisibl

关于配置

请问有没有webpack 2.0的配置方式

Remove support for | and : separators

Now that browsers natively support the aspect-ratio property, we try to align ourselves with the specification.

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

.aspect-box {
    aspect-ratio: 16 : 9;
}

.aspect-box {
    aspect-ratio: 16 | 9;
}

17777777777777776 is beyond boundary when transfer to integer

Maybe that level of precision is not needed in CSS ?