search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.79k stars 3.5k forks source link

Browserslist from package.json does not have affect to autoprefixer #6638

Closed krychu90 closed 4 years ago

krychu90 commented 4 years ago

I want to get -webkit- prefix to flexbox and when I setup browserlist in package.json :

"browserslist": [
    "last 2 versions",
    "not ie <= 10"
]

it does not work but when I change .postcssrc.js file to:

const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer({
      browsers: ['last 2 versions', 'not ie <= 10']
    })
  ]
}

It works but with warning to do this in browserslist.

OS: Windows 10 Node: 12.13.0 NPM: 6.12.0 quasar: 1.9.10

rstoenescu commented 4 years ago

Hi,

You can use overrideBrowserslist prop for autoprefixer until this gets investigated and dealt with.

rstoenescu commented 4 years ago

Took a quick look. The bug is not valid.

Edit .postcssrc.js for debugging purposes:

// https://github.com/michael-ciniawsky/postcss-load-config
const ap = require('autoprefixer')

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    ap
  ]
}

console.log(ap.info())

Test 1: leave default browserslist in package.json then see the output Test 2: change browserslist to [ '> 30%' ] then see the output

Changes are reflected.

krychu90 commented 4 years ago

For:

"browserslist": [
    "defaults"
  ]

results:

Browsers:
  Chrome for Android: 84
  Firefox for Android: 68
  And_qq: 10.4
  UC for Android: 12.12
  Android: 81
  Baidu: 7.12
  Chrome: 84, 83
  Edge: 84, 83, 18
  Firefox: 79, 78, 77, 68
  IE: 11
  iOS: 13.4-13.5, 13.3, 12.2-12.4
  Kaios: 2.5
  Opera Mini: all
  Opera Mobile: 46
  Opera: 69, 68
  Safari: 13.1, 13
  Samsung: 12.0, 11.1-11.2

These browsers account for 89.98% of all users globally

At-Rules:
  @keyframes: webkit
  @resolution: webkit
  @viewport: ms, o

Selectors:
  ::backdrop: webkit
  ::placeholder: moz, -ms- old, ms
  ::selection: moz
  :any-link: webkit, moz
  :fullscreen: webkit, ms
  :placeholder-shown: moz, ms
  :read-only: moz
  :read-write: moz

Properties:
  animation-delay: webkit
  animation-direction: webkit
  animation-duration: webkit
  animation-fill-mode: webkit
  animation-iteration-count: webkit
  animation-name: webkit
  animation-play-state: webkit
  animation-timing-function: webkit
  animation: webkit
  appearance: webkit, moz
  backdrop-filter: webkit
  backface-visibility: webkit
  background-clip: webkit
  border-block-end: webkit
  border-block-start: webkit
  border-image: o
  border-inline-end: webkit
  border-inline-start: webkit
  box-decoration-break: webkit
  break-after: moz
  break-before: moz
  break-inside: moz
  clip-path: webkit
  color-adjust: webkit
  column-count: moz
  column-fill: moz
  column-gap: moz
  column-rule-color: moz
  column-rule-style: moz
  column-rule-width: moz
  column-rule: moz
  column-span: moz
  column-width: moz
  columns: moz
  filter: webkit
  flow-from: ms
  flow-into: ms
  font-kerning: webkit
  grid-area *: ms
  grid-column *: ms
  grid-column-align *: ms
  grid-column-end *: ms
  grid-column-start *: ms
  grid-row *: ms
  grid-row-align *: ms
  grid-row-end *: ms
  grid-row-start *: ms
  grid-template *: ms
  grid-template-areas *: ms
  grid-template-columns *: ms
  grid-template-rows *: ms
  hyphens: webkit, ms
  image-rendering: ms
  margin-block-end: webkit
  margin-block-start: webkit
  margin-inline-end: webkit
  margin-inline-start: webkit
  mask-border-outset: webkit
  mask-border-repeat: webkit
  mask-border-slice: webkit
  mask-border-source: webkit
  mask-border-width: webkit
  mask-border: webkit
  mask-clip: webkit
  mask-composite: webkit
  mask-image: webkit
  mask-origin: webkit
  mask-position: webkit
  mask-repeat: webkit
  mask-size: webkit
  mask: webkit
  object-fit: o
  object-position: o
  overscroll-behavior: ms
  padding-block-end: webkit
  padding-block-start: webkit
  padding-inline-end: webkit
  padding-inline-start: webkit
  place-self: ms
  region-fragment: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  scroll-snap-type: ms
  tab-size: moz, o
  text-align-last: moz
  text-decoration-color: webkit
  text-decoration-line: webkit
  text-decoration-skip-ink: webkit
  text-decoration-skip: webkit
  text-decoration-style: webkit
  text-decoration: webkit
  text-emphasis-color: webkit
  text-emphasis-position: webkit
  text-emphasis-style: webkit
  text-emphasis: webkit
  text-orientation: webkit
  text-size-adjust: webkit, moz, ms
  text-spacing: ms
  user-select: webkit, moz, ms
  writing-mode: ms

Values:
  cross-fade: webkit
  element: moz
  fill-available: webkit, moz
  fill: webkit, moz
  fit-content: webkit, moz
  grab: webkit
  grabbing: webkit
  grid *: ms
  image-set: webkit
  inline-grid *: ms
  isolate-override: moz
  isolate: webkit, moz
  max-content: webkit, moz
  min-content: webkit, moz
  pixelated: moz
  plaintext: moz
  sticky: webkit
  stretch: webkit, moz

* - Prefixes will be added only on grid: true option.

For:

"browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions",
    "Android > 4",
    "> 0.1%"
  ]

results:

Browsers:
  Chrome for Android: 84
  Firefox for Android: 68
  And_qq: 10.4
  UC for Android: 12.12
  Android: 81, 4.4.3-4.4.4, 4.4, 4.2-4.3, 4.1
  Chrome: 84, 83, 81, 80, 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 49
  Edge: 84, 83, 81, 80, 18
  Firefox: 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 68, 52
  IE: 11, 9
  iOS: 13.4-13.5, 13.3, 13.2, 13.0-13.1, 12.2-12.4, 12.0-12.1, 11.3-11.4, 11.0-11.2, 10.3, 10.0-10.2, 9.3
  Opera Mini: all
  Opera: 69, 68, 67, 66, 65
  Safari: 13.1, 13, 12.1, 12, 11.1, 11, 10.1, 5.1
  Samsung: 12.0, 11.1-11.2, 10.1, 9.2, 4

These browsers account for 96.46% of all users globally

At-Rules:
  @keyframes: webkit
  @resolution: webkit
  @viewport: ms, o

Selectors:
  ::backdrop: webkit
  ::placeholder: webkit, -ms- old, ms
  ::selection: moz
  :any-link: webkit
  :fullscreen: webkit, moz, ms
  :placeholder-shown: ms
  :read-only: moz
  :read-write: moz

Properties:
  align-content: -webkit- 2009
  align-items: -webkit- 2009
  align-self: -webkit- 2009
  animation-delay: webkit
  animation-direction: webkit
  animation-duration: webkit
  animation-fill-mode: webkit
  animation-iteration-count: webkit
  animation-name: webkit
  animation-play-state: webkit
  animation-timing-function: webkit
  animation: webkit
  appearance: webkit, moz
  backdrop-filter: webkit
  backface-visibility: webkit
  background-clip: webkit
  border-block-end: webkit
  border-block-start: webkit
  border-image: webkit, o
  border-inline-end: webkit
  border-inline-start: webkit
  box-decoration-break: webkit
  break-after: webkit
  break-before: webkit
  break-inside: webkit
  clip-path: webkit
  color-adjust: webkit
  column-count: webkit
  column-fill: webkit
  column-gap: webkit
  column-rule-color: webkit
  column-rule-style: webkit
  column-rule-width: webkit
  column-rule: webkit
  column-span: webkit
  column-width: webkit
  columns: webkit
  filter: webkit
  flex-basis: -webkit- 2009
  flex-direction: -webkit- 2009
  flex-flow: -webkit- 2009
  flex-grow: -webkit- 2009
  flex-shrink: -webkit- 2009
  flex-wrap: -webkit- 2009
  flex: -webkit- 2009
  flow-from: webkit, ms
  flow-into: webkit, ms
  font-feature-settings: webkit
  font-kerning: webkit
  font-language-override: webkit
  font-variant-ligatures: webkit
  grid-area *: ms
  grid-column *: ms
  grid-column-align *: ms
  grid-column-end *: ms
  grid-column-start *: ms
  grid-row *: ms
  grid-row-align *: ms
  grid-row-end *: ms
  grid-row-start *: ms
  grid-template *: ms
  grid-template-areas *: ms
  grid-template-columns *: ms
  grid-template-rows *: ms
  hyphens: webkit, ms
  image-rendering: ms
  justify-content: -webkit- 2009
  margin-block-end: webkit
  margin-block-start: webkit
  margin-inline-end: webkit
  margin-inline-start: webkit
  mask-border-outset: webkit
  mask-border-repeat: webkit
  mask-border-slice: webkit
  mask-border-source: webkit
  mask-border-width: webkit
  mask-border: webkit
  mask-clip: webkit
  mask-composite: webkit
  mask-image: webkit
  mask-origin: webkit
  mask-position: webkit
  mask-repeat: webkit
  mask-size: webkit
  mask: webkit
  object-fit: o
  object-position: o
  order: -webkit- 2009
  overscroll-behavior: ms
  padding-block-end: webkit
  padding-block-start: webkit
  padding-inline-end: webkit
  padding-inline-start: webkit
  perspective-origin: webkit
  perspective: webkit
  place-self: ms
  region-fragment: webkit, ms
  scroll-snap-coordinate: webkit, ms
  scroll-snap-destination: webkit, ms
  scroll-snap-points-x: webkit, ms
  scroll-snap-points-y: webkit, ms
  scroll-snap-type: webkit, ms
  shape-image-threshold: webkit
  shape-margin: webkit
  shape-outside: webkit
  tab-size: moz, o
  text-decoration-color: webkit
  text-decoration-line: webkit
  text-decoration-skip-ink: webkit
  text-decoration-skip: webkit
  text-decoration-style: webkit
  text-decoration: webkit
  text-emphasis-color: webkit
  text-emphasis-position: webkit
  text-emphasis-style: webkit
  text-emphasis: webkit
  text-orientation: webkit
  text-size-adjust: webkit, moz, ms
  text-spacing: ms
  transform-origin: webkit, ms
  transform-style: webkit
  transform: webkit, ms
  transition-delay: webkit
  transition-duration: webkit
  transition-property: webkit
  transition-timing-function: webkit
  transition: webkit
  user-select: webkit, moz, ms
  writing-mode: webkit, ms

Values:
  cross-fade: webkit
  element: moz
  fill-available: webkit, moz
  fill: webkit, moz
  filter: webkit
  fit-content: webkit, moz
  flex: -webkit- 2009
  grab: webkit
  grabbing: webkit
  grid *: ms
  image-set: webkit
  inline-flex: -webkit- 2009
  inline-grid *: ms
  isolate: webkit
  linear-gradient: -webkit- old, webkit
  max-content: webkit, moz
  min-content: webkit, moz
  pixelated: moz
  radial-gradient: -webkit- old, webkit
  repeating-linear-gradient: -webkit- old, webkit
  repeating-radial-gradient: -webkit- old, webkit
  sticky: webkit
  stretch: webkit, moz
  zoom-in: webkit
  zoom-out: webkit

* - Prefixes will be added only on grid: true option.

But still there is no -webkit- prefix for flex in css... obraz

krychu90 commented 4 years ago

When I edit file .postcssrc.js to:

// https://github.com/michael-ciniawsky/postcss-load-config
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer({
      browsers: [
        "last 10 Chrome versions",
        "last 10 Firefox versions",
        "last 4 Edge versions",
        "last 7 Safari versions",
        "last 8 ChromeAndroid versions",
        "last 8 FirefoxAndroid versions",
        "last 10 iOS versions",
        "last 5 Opera versions",
        "Android > 4",
        "> 0.1%"
      ]
    })
  ]
}
console.log(autoprefixer.info())

results:

Browsers:
  Chrome for Android: 84
  Firefox for Android: 68
  And_qq: 10.4
  UC for Android: 12.12
  Android: 81, 4.4.3-4.4.4, 4.4, 4.2-4.3, 4.1
  Chrome: 84, 83, 81, 80, 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 49
  Edge: 84, 83, 81, 80, 18
  Firefox: 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 68, 52
  IE: 11, 9
  iOS: 13.4-13.5, 13.3, 13.2, 13.0-13.1, 12.2-12.4, 12.0-12.1, 11.3-11.4, 11.0-11.2, 10.3, 10.0-10.2, 9.3
  Opera Mini: all
  Opera: 69, 68, 67, 66, 65
  Safari: 13.1, 13, 12.1, 12, 11.1, 11, 10.1, 5.1
  Samsung: 12.0, 11.1-11.2, 10.1, 9.2, 4

These browsers account for 96.46% of all users globally

At-Rules:
  @keyframes: webkit
  @resolution: webkit
  @viewport: ms, o

Selectors:
  ::backdrop: webkit
  ::placeholder: webkit, -ms- old, ms
  ::selection: moz
  :any-link: webkit
  :fullscreen: webkit, moz, ms
  :placeholder-shown: ms
  :read-only: moz
  :read-write: moz

Properties:
  align-content: -webkit- 2009
  align-items: -webkit- 2009
  align-self: -webkit- 2009
  animation-delay: webkit
  animation-direction: webkit
  animation-duration: webkit
  animation-fill-mode: webkit
  animation-iteration-count: webkit
  animation-name: webkit
  animation-play-state: webkit
  animation-timing-function: webkit
  animation: webkit
  appearance: webkit, moz
  backdrop-filter: webkit
  backface-visibility: webkit
  background-clip: webkit
  border-block-end: webkit
  border-block-start: webkit
  border-image: webkit, o
  border-inline-end: webkit
  border-inline-start: webkit
  box-decoration-break: webkit
  break-after: webkit
  break-before: webkit
  break-inside: webkit
  clip-path: webkit
  color-adjust: webkit
  column-count: webkit
  column-fill: webkit
  column-gap: webkit
  column-rule-color: webkit
  column-rule-style: webkit
  column-rule-width: webkit
  column-rule: webkit
  column-span: webkit
  column-width: webkit
  columns: webkit
  filter: webkit
  flex-basis: -webkit- 2009
  flex-direction: -webkit- 2009
  flex-flow: -webkit- 2009
  flex-grow: -webkit- 2009
  flex-shrink: -webkit- 2009
  flex-wrap: -webkit- 2009
  flex: -webkit- 2009
  flow-from: webkit, ms
  flow-into: webkit, ms
  font-feature-settings: webkit
  font-kerning: webkit
  font-language-override: webkit
  font-variant-ligatures: webkit
  grid-area *: ms
  grid-column *: ms
  grid-column-align *: ms
  grid-column-end *: ms
  grid-column-start *: ms
  grid-row *: ms
  grid-row-align *: ms
  grid-row-end *: ms
  grid-row-start *: ms
  grid-template *: ms
  grid-template-areas *: ms
  grid-template-columns *: ms
  grid-template-rows *: ms
  hyphens: webkit, ms
  image-rendering: ms
  justify-content: -webkit- 2009
  margin-block-end: webkit
  margin-block-start: webkit
  margin-inline-end: webkit
  margin-inline-start: webkit
  mask-border-outset: webkit
  mask-border-repeat: webkit
  mask-border-slice: webkit
  mask-border-source: webkit
  mask-border-width: webkit
  mask-border: webkit
  mask-clip: webkit
  mask-composite: webkit
  mask-image: webkit
  mask-origin: webkit
  mask-position: webkit
  mask-repeat: webkit
  mask-size: webkit
  mask: webkit
  object-fit: o
  object-position: o
  order: -webkit- 2009
  overscroll-behavior: ms
  padding-block-end: webkit
  padding-block-start: webkit
  padding-inline-end: webkit
  padding-inline-start: webkit
  perspective-origin: webkit
  perspective: webkit
  place-self: ms
  region-fragment: webkit, ms
  scroll-snap-coordinate: webkit, ms
  scroll-snap-destination: webkit, ms
  scroll-snap-points-x: webkit, ms
  scroll-snap-points-y: webkit, ms
  scroll-snap-type: webkit, ms
  shape-image-threshold: webkit
  shape-margin: webkit
  shape-outside: webkit
  tab-size: moz, o
  text-decoration-color: webkit
  text-decoration-line: webkit
  text-decoration-skip-ink: webkit
  text-decoration-skip: webkit
  text-decoration-style: webkit
  text-decoration: webkit
  text-emphasis-color: webkit
  text-emphasis-position: webkit
  text-emphasis-style: webkit
  text-emphasis: webkit
  text-orientation: webkit
  text-size-adjust: webkit, moz, ms
  text-spacing: ms
  transform-origin: webkit, ms
  transform-style: webkit
  transform: webkit, ms
  transition-delay: webkit
  transition-duration: webkit
  transition-property: webkit
  transition-timing-function: webkit
  transition: webkit
  user-select: webkit, moz, ms
  writing-mode: webkit, ms

Values:
  cross-fade: webkit
  element: moz
  fill-available: webkit, moz
  fill: webkit, moz
  filter: webkit
  fit-content: webkit, moz
  flex: -webkit- 2009
  grab: webkit
  grabbing: webkit
  grid *: ms
  image-set: webkit
  inline-flex: -webkit- 2009
  inline-grid *: ms
  isolate: webkit
  linear-gradient: -webkit- old, webkit
  max-content: webkit, moz
  min-content: webkit, moz
  pixelated: moz
  radial-gradient: -webkit- old, webkit
  repeating-linear-gradient: -webkit- old, webkit
  repeating-radial-gradient: -webkit- old, webkit
  sticky: webkit
  stretch: webkit, moz
  zoom-in: webkit
  zoom-out: webkit

* - Prefixes will be added only on grid: true option.

And it works: obraz

krychu90 commented 4 years ago

I did some tests. I used clean quasar app for this. I found that autoprefixer do not work with vendor sass when it load browserlist from package.json. It only prefixes code from my app.sass and other project styles.

How it looks like:

app.sass

.row
   display: flex

.package.json

"browserslist": [
    "last 2 versions",
    "not ie <= 10",
    "ie 11"
  ]

And for:

.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    require('autoprefixer')
  ]
}

obraz (no prefixes for .row from quasar.sass)

For:

.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer({
      overrideBrowserslist: ['last 2 versions', 'not ie <= 10', 'ie 11']
    })
  ]
}

obraz (with prefixes for .row from quasar.sass)