Questions tagged [postcss]

PostCSS is a tool for transforming styles with JavaScript plugins. These plugins can support variables, mixins, transpile future CSS syntax, inline images, and more.

PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.

1028 questions
0
votes
1 answer

Error with gulp-ruby-sass Error: must provide pattern

I'm using Ruby sass with PostCSS. This is my gulp css task. gulp.task('css', function () { var processors = [ short, rucksack, postcssmodules ]; return gulp.src('./css/src/*.scss') .pipe(postcss(processors, {syntax:…
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
0
votes
1 answer

Grunt PostCSS compilation very slow

I'm giving postCSS a go by pure curiosity but I'm having a compilation time around ~2sec already. I'm only using 3 plugins : autoprefixer, postcss-import and postcss-nested I've got app.css that imports 2 files : @import "_base/_base.css"; @import…
bonhomme
  • 89
  • 2
  • 8
0
votes
1 answer

Gulp-postcss with precss plugin throws an error when importing scss files

Im trying to import multiple scss files in my app.scss file but gulp is throwing an error: //app.scss @import "base"; body { background: #fff; } gulpfile.js gulp.task('build-css', function () { return gulp.src(assetsDev + 'scss/*.scss') …
Antonio Papa
  • 1,596
  • 3
  • 20
  • 38
0
votes
3 answers

how to add a browser list to cssnext

I am using postcss-cssnext and in my webpack.config I removed autoprefixer postcss: [autoprefixer({ browsers: ['last 2 versions'] }) ], and included cssnext. I understand that cssnext already includes autoprefixer so we don't need both included. I…
svnm
  • 22,878
  • 21
  • 90
  • 105
0
votes
1 answer

Webpack / PostCSS - Unable to use classes from the inline styles generated by Webpack

I am trying to setup Webpack(PostCSS) within a CherryPy application. Webpack appears to be generating inline styles correctly, the following is my my loader within webpack.config.js { test: /\.css$/, loader:…
matt-p
  • 1,017
  • 2
  • 12
  • 21
0
votes
1 answer

Can I run postcss plugins directly against a postcss Result object?

According to the postcss docs, I should be able to execute plugins against a postcss Result object the same way I execute them against a string of CSS (using Processor.process). Unfortunately, this doesn't seem to work. I've demonstrated this "bug"…
Shawn
  • 10,931
  • 18
  • 81
  • 126
0
votes
1 answer

How to use lost, autoprefixer and postcss-flexibility?

I want to know the order in which we should use autoprefixer, lost, postcssflexibility in webpack ?
Nirmalya Ghosh
  • 2,298
  • 3
  • 18
  • 33
0
votes
1 answer

How to use autoprefixer with postcss and Grunt on more than one file?

The title says it all. My postcss task is as follows: postcss: { options: { processors: [ require('autoprefixer')({browsers: ['last 2 versions']}), require('cssnext')(), …
Yavor
  • 129
  • 1
  • 14
0
votes
1 answer

How to add a selector to an existing rule?

Is there a way to add a selector to an existing rule with Postcss API? Something like myRule.addSelector(".newSelector")? Currently I have to do this: myRule.selector = myRule.selector ? myRule.selector + ", .newSelector" : ".newSelector";
François Romain
  • 13,617
  • 17
  • 89
  • 123
0
votes
2 answers

Converting from cssnext to postcss-cssnext in webpack

I'm having trouble converting my webpack config from using the now deprecated cssnext and cssnext-loader to postcss-cssnext and the postcss-loader. Doc's state clearly that the functionality I'm trying to recreate has been delegated to function…
Kevin
  • 388
  • 7
  • 23
0
votes
1 answer

gulp + postCSS + typescript ... throws on // syntax

am using postcss-scss and it should allow // inside scss files. instead, getting... ` Unknown word // injector here is my gulp task. var postcss = require('gulp-postcss'); var reporter = require('postcss-reporter'); var syntax_scss =…
0101adm
  • 119
  • 1
  • 9
0
votes
1 answer

Gulp postcss lost grid system - framework

I have got a gulp file with lost package installed however it seems that the css is not compiled properly when running my task. var gulp = require('gulp'), $ = require('gulp-load-plugins')({ lazy: true }), browsersync =…
JWip
  • 1
  • 1
0
votes
1 answer

Using PostCSS with Sass in Gulp to run font-awesome

Hi guys am trying to use font-awesome in my postcss layout but it seems not to work. So i tried installing sass with posts to see if it will work but i do not know how to go about it. I already installed npm gulp for sass This is my gulp file…
Arthur Decker
  • 1,191
  • 3
  • 15
  • 45
0
votes
1 answer

How do I import open-sass.scss using precss postcss?

currently using webpack and loading open sans isn't working. does everything need to be a .css file to work? ERROR in ./~/css-loader!./~/postcss-loader!./src/containers/LoginLayout/styles.scss Module build failed: Error: ENOENT: no such file or…
mike james
  • 8,840
  • 3
  • 18
  • 21
0
votes
1 answer

transition with -webkit- transform in shorthand rule

I have grunt with postcss running autoprefixer, and the code: transition: transform .3s, color .3s; ... is outputting: transition: color .3s, -webkit-transform .3s; transition: transform .3s, color .3s; transition: transform .3s, color .3s,…
Ming
  • 4,468
  • 1
  • 21
  • 21