Stack Overflow
Stack Overflow

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
0 answers

Webpack 2: Cannot read property 'Base64' of undefined

I'm new to Webpack. My React config works, but when I try to import postcssJs from 'postcss-js' the browser throws an Uncaught TypeError: Cannot read property 'Base64' of undefined in the bundle on var _Base64 = global.Base64;. Here is my webpack…
corysimmons
  • 7,296
  • 4
  • 57
  • 65
0
votes
2 answers

Clueless with ember-cli-postcss and autoprefixer

I'm trying to do an ember build that uses autoprefixer. The problem that I'm having is that what normally outputs to 'assets/application-name.css' now outputs to 'app/styles/app.css' and I would like to output it to 'assets/application-name.css'. I…
Folaht
  • 1,053
  • 1
  • 13
  • 32
0
votes
1 answer

Mix css modules classes and boostrap active

In a project I am working on we use css modules with postcss (also postcss-cssnext and postcss-include). We also have bootstrap as a dependency which is globally provided. In a given component I do have a custom class for a button. So my button has…
George Karanikas
  • 1,244
  • 1
  • 12
  • 38
0
votes
2 answers

Configuration of stylelint in Gruntfile

I'm trying to create a separate task called stylelint because for reasons I do not want it to be part of the postcss task. In the gruntfile I'm writing: stylelint: { options: {}, src: './assets/css/precss/**' } When I run grunt stylelint it…
Dimitrios Vythoulkas
  • 571
  • 6
  • 16
0
votes
0 answers

Can Autoprefixer replace linear-gradient with simple color for browsers, that doesn't support gradient?

Have this: style.scss: .example { background: linear-gradient(to top, #45678a, #ab4563); } gulpfile.js: var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('sass',…
g1un
  • 374
  • 5
  • 20
0
votes
1 answer

No autoprefix with webpack config

I'm getting no prefixes with these setup. Cssnano and write to style.css is working but there is no prefixes added from my sass to css. I'm just started with webpack so maybe I'm just not gettings it. Config: var development = process.env.NODE_ENV…
MonkeyBizz
  • 111
  • 3
  • 6
0
votes
1 answer

Autoprefixer not working in NPM

I am creating a taskrunner with NPM — I don't want to use Gulp or Grunt...slow!. The task runner is working and it's fast! But...the autoprefixer is not prefixing. The console.logs it has are also not showing up in the terminal. Looks like it is not…
Jabba Da Hoot
  • 794
  • 2
  • 7
  • 16
0
votes
1 answer

How do I use PostCSS Auto Reset?

There seems to be no documentation and I don't quite understand the code examples on the Github page. I assumed that it would automatically append reset rules to the output CSS file. The documentation uses things like .block but doesn't say what…
BugHunterUK
  • 8,346
  • 16
  • 65
  • 121
0
votes
1 answer

PostCSS: How to conditionally add a new rule based on declaration in current rule?

Hello I’ve been experimenting with PostCSS and am struggling a bit with writing a plugin that appends a new rule when it finds certain CSS properties. What I’m trying to achieve… Starting CSS: .selector { color: red; …
Zaqx
  • 1,401
  • 8
  • 17
0
votes
0 answers

Use PostCSS: Inline-SVG with editable linear gradients

There is this super awesome plugin for postcss called postcss-inline-svg. I use it all the time to load svg icons in different styles from only one source. If you haven't heard of it, make sure to check it out on…
Marten Zander
  • 2,385
  • 3
  • 17
  • 32
0
votes
1 answer

How to use scss with css modules / postcss inside components

I'm failing to figure out how to setup my webpack in order to be able and use scss modules inside my components like: import styles from './ComponentStyles.scss' So far I tried configuring webpack to use sass-loader alongside postcss-loader but had…
Ilja
  • 44,142
  • 92
  • 275
  • 498
0
votes
1 answer

PostCSS nested variable

I have this code in my postcss file .btn.color1>button{background:$graph_1;} .btn.color2>button{background:$graph_2;} .btn.color3>button{background:$graph_3;} .btn.color4>button{background:$graph_4;} .btn.color5>button{background:$graph_5;} well, i…
FourwingsY
  • 669
  • 2
  • 7
  • 18
0
votes
1 answer

PostCSS / Webpack not loading image in stylesheet

I'm not sure if this is a PostCSS problem or a Webpack problem. Here's my relevant image handler in my webpack config: { test: /\.(png|jpg|jpeg|gif|woff|woff2)$/, loader: 'url-loader?limit=10000', }, { test: /\.(eot|ttf|wav|mp3)$/, loader:…
motleydev
  • 3,327
  • 6
  • 36
  • 52
0
votes
1 answer

Laravel elixir stylus error

I've installed the following package: https://github.com/JeffreyWay/laravel-elixir-stylus And it's working. Now I want to use https://github.com/peterramsing/lost lost with stylus. So I've added that but it's not working. My package.json: { …
Jamie
  • 10,302
  • 32
  • 103
  • 186
0
votes
2 answers

PreCSS nesting not working

I have the following CSS declaration using the PostCSS precss plugin: .woocommerce-account.logged-in { .myaccount-hamburger{ display: block; } .woocommerce{ position: static; } #main{ position:…
Jordan Carter
  • 1,276
  • 3
  • 19
  • 43
1 2 3
…
68 69