Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autoprefixer as a plugin stopped working with the new version of rollup-plugin-postcss #57

Closed
David-Else opened this issue Jan 10, 2018 · 2 comments

Comments

@David-Else
Copy link

David-Else commented Jan 10, 2018

Hello,

I don't know if it's the recent update, or me changing something accidentally that has caused this error, but autoprefxer now does nothing when it used to work!

If i set minimize: true if minifies OK. Has something broken in the new version, or changed with the API?

I took the last lines of CSS in the source file from https://autoprefixer.github.io/ , it should add prefixes at any default setting.

Here are some details of my settings, thanks for your help!:

** EDIT I just saw that there were breaking API changes using the node-update utility, but the new 1.0+ docs on the front page don't really explain how to use any other plugins and gives no examples like the old front page used to. I still have no idea how to make autoprefixer work, maybe I am stupid? :)

EDIT 2 - Just saw your Twitter, THANKS for this amazing application and your continued support! I really love it, I spent the day looking into switching to webpack, and it was dependency hell. I hate how bloated JS development has become, every extra package in the tool-chain is another point of failure, I am not about to install 5,000 NPM packages by 100 different people just to print my name on the screen in JS :) I am spending more time with tooling than programming, I am hoping this will all end with my 'final' Rollup set-up.

**package.json**

"devDependencies": {
    "autoprefixer": "^7.2.4",
    "rollup": "^0.53.4",
    "rollup-plugin-postcss": "^1.0.2"
  }
**rollup.config.js**

import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    banner: '/* http://www.elsewebdevelopment.com/ */',
  },
  plugins: [
    postcss({
      plugins: [
        autoprefixer(),
      ],
      sourceMap: true,
      extract: true,
      extensions: ['.css'],
      // minimize: true,
    }),
  ],
  sourcemap: true,
};
**The source file**

* {
    box-sizing: border-box;
}

#canvas {
    outline: black 2px solid;
}

.example {
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}
**the destination file**

* {
    box-sizing: border-box;
}

#canvas {
    outline: black 2px solid;
}

.example {
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

/*# sourceMappingURL=bundle.css.map */
@egoist egoist closed this as completed in 92f1394 Jan 11, 2018
@egoist
Copy link
Owner

egoist commented Jan 11, 2018

Fixed in v1.0.3, btw extensions option is no longer needed.

@BiYuqi
Copy link

BiYuqi commented Apr 12, 2019

@egoist Can you provide the doc about how to use autoprefixer with this plugin? now It is difficult to set up. no friendly to usage, thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants