yisibl / postcss-aspect-ratio-mini Goto Github PK

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

.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出现

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;
}

ESlint Unknown property: 'aspect-ratio'

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

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

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

Maybe that level of precision is not needed in CSS ?

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.