Not add prefix

[mcosta-dada]

I have tried many ways but I can't get it to add any prefix to my css.

I have a scss adding the code in the compilation if it compresses the code but does not add the prefixes.

gulp            = require("gulp"),
sass            = require("gulp-sass"),
postcss         = require("gulp-postcss"),
concat          = require("gulp-concat"),
autoprefixer    = require('autoprefixer'),
cssnano         = require("cssnano"),
sourcemaps      = require("gulp-sourcemaps"),
browserSync     = require("browser-sync").create(),
ugly            = require('gulp-uglify'),
imgMin          = require('gulp-imagemin'),
casht           = require('gulp-cache'),
dL              = require('del'),
merge           = require("merge-stream"),
newer           = require('gulp-newer'),
wpPot           = require('gulp-wp-pot'),
cleanCSS        = require('gulp-clean-css');

function style() {

  var plugins = [
  autoprefixer({Browserslist: ['last 1 version']}),
  cssnano()
  ];

  var _scss = gulp
  .src([paths.src.scss])
  .pipe(sourcemaps.init())
  .pipe(sass())
  .on("error", sass.logError)
  .pipe(concat('main.css'))
  .pipe(postcss([autoprefixer(), cssnano()]))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(paths.dest.css));

  return merge(_scss)
  .pipe(browserSync.stream());

}

I have thought that maybe it is a compatibility problem with the sass and I created the css first and then compiled the css and it has not worked either.

function style() {

  var plugins = [
  autoprefixer({Browserslist: ['last 1 version']}),
  cssnano()
  ];

  var _scss = gulp
  .src([paths.src.scss])
  .pipe(sourcemaps.init())
  .pipe(sass())
  .on("error", sass.logError)
  .pipe(concat('main.css'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(paths.dest.css));

  var _css = gulp
  .src(paths.dest.css +"/main.css")
  .pipe(postcss(plugins))
  .pipe(concat('main2.css'))
  .pipe(gulp.dest(paths.dest.css));

  return merge(_scss, _css)
  .pipe(browserSync.stream());

}

What am I doing wrong?

package.json :

"devDependencies": {
        "autoprefixer": "^9.6.1",
        "browser-sync": "^2.26.13",
        "cssnano": "^4.1.10",
        "del": "^5.0.0",
        "gulp": "^4.0.2",
        "gulp-cache": "^1.1.2",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-imagemin": "^6.0.0",
        "gulp-newer": "^1.4.0",
        "gulp-postcss": "^8.0.0",
        "gulp-sass": "^4.0.2",
        "gulp-sourcemaps": "^2.6.5",
        "gulp-uglify": "^3.0.2",
        "gulp-wp-pot": "^2.5.0",
        "merge-stream": "^2.0.0",
        "postcss": "^8.2.6"
    }

Node version: v14.15.3 Gulp: CLI version: 2.2.1 Local version: 4.0.2

Thanks

[ai]

What is input CSS, expected output, and actual output?

[mcosta-dada]

I have done the test with several elements. (Now I add animation, and is only that found)

Input:

@keyframes MyAnimation {
    0% { left: 0; } 
    50% { left: 200px; }    
    100% { left: 20px; }    
}

#productes-archive {
    transition: height .5s ease;
    flex:1;
    display: flex; 
    transform: rotate(30deg);

    .example.is-animating {
        animation: MyAnimation 2s;
    }
}

Output without nano:

@-webkit-keyframes MyAnimation {
  0% {
    left: 0; }
  50% {
    left: 200px; }
  100% {
    left: 20px; } }

@keyframes MyAnimation {
  0% {
    left: 0; }
  50% {
    left: 200px; }
  100% {
    left: 20px; } }

#productes-archive {
  transition: height .5s ease;
  flex: 1;
  display: flex;
  transform: rotate(30deg); }
  #productes-archive .example.is-animating {
    -webkit-animation: MyAnimation 2s;
            animation: MyAnimation 2s; }
}

I expected add webkit and moz on all elements no?

• Now I realize that maybe what I hope is no longer necessary? -

[ai]

Now I realize that maybe what I hope is no longer necessary?

Yeap.