I want to use autoprefixer in my node application to compile css. For my specific needs, I want to call autoprefixer without callback or promise.
Just plain:
var result = autoprefixer.process(css);
or
var result = myPrefixerWrap(css);
I am fighting with this for a while, can you help me please?
ps: I already tried postcss-js, but it result an json object for react use, and not pure css. For example {borderRadius:"5px"}
var prefixer = postcssJs.sync([ autoprefixer ]);
var cssCompiled = postcss.parse(css);
var cssObject = postcssJS.objectify(cssCompiled);
var autoResult = prefixer(cssObject);
PostCSS has an API for synchronously getting the results of Processor#process
(process().css
, aliased as toString()
), which will work as long as all of the PostCSS plugins being used are synchronous (like Autoprefixer). The code to do that is as simple as:
var postcss = require('postcss'); // import postcss from 'posts';
var autoprefixer = require('autoprefixer'); // import autoprefixer from 'autoprefixer';
postcss([autoprefixer]).process(styleString).css;
Note: I had issues with using postcss-js in Webpack, so for those who see errors like:
Module parse failed: /path/to/node_modules/autoprefixer/node_modules/caniuse-db/features-json/css-regions.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
Or:
ERROR in ./~/autoprefixer/~/browserslist/index.js
Module not found: Error: Cannot resolve module 'fs' in /path/to/node_modules/autoprefixer/node_modules/browserslist
@ ./~/autoprefixer/~/browserslist/index.js 3:14-27
Check out the Troubleshooting section of the postcss-js GitHub readme to find out what you need to add to your Webpack config to get it working.