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
16
votes
1 answer

Unexpected term when using calc() with $variables

I use postcss-precss (simulates most of Sass features, but not math) combined with postcss-cssnext (provides newest native CSS features, i.e. calc() which I'm missing in postcss-precss). Normally I would combine Sass and calc() by interpolating…
van_folmert
  • 4,257
  • 10
  • 44
  • 89
16
votes
3 answers

Proper way to chain PostCSS and SASS in rollup

I'm trying to set up rollup to use both SCSS stylesheets and the Lost grid system, which needs to be parsed through PostCSS. I've verified that the SCSS is being parsed correctly, but the PostCSS processor doesn't seem to have any effect. According…
bright-star
  • 6,016
  • 6
  • 42
  • 81
15
votes
5 answers

Switching from Gulp to Webpack

UPDATE 30.04.20 [ Moving to Webpack ] My first question is about how recommended is this switch for simple projects, just to Pre-Process/Concat/Minify? Understanding this future "standards", like Webpack in together with…
Locke
  • 629
  • 1
  • 5
  • 21
15
votes
2 answers

Watch multiple css files with postcss and output a bundle.css

I'm trying to figure out a workflow involving postcss. My need is to have css partials in one folder, watch them and output a bundle css file. The bundle css file must have include a base.css file at the top. postcss has a --watch flag and can watch…
dotnetCarpenter
  • 10,019
  • 6
  • 32
  • 54
14
votes
4 answers

postcss 7.0.0 - 8.2.9 Severity: moderate Regular Expression Denial of Service

When creating a new project under create-react-app, you get warnings straight away regarding a vulnerability found in postcss. Issue reported by npm: https://www.npmjs.com/advisories/1693 Related open issues can be found…
ale917k
  • 1,494
  • 7
  • 18
  • 37
14
votes
4 answers

postcss-svgo: TypeError: Cannot set property 'multipassCount' of undefined (Gatsby)

On a Gatsby 2.17.6 project, when building: Building production JavaScript and CSS bundles [==== ] 1.940 s 1/6 17% run queries failed Building production JavaScript and CSS bundles - 75.519s ERROR #98123 WEBPACK Generating JavaScript bundles…
nosferatu
  • 374
  • 4
  • 14
14
votes
2 answers

CSS architecture with React that also can be themed

I'm currently building out a large React app. Css, has never been my strong point. But now CSS has sass / cssNext / inline styles with React. I've been using BEM with sass, but as my other applications have grown huge even that starts to break down.…
james emanon
  • 11,185
  • 11
  • 56
  • 97
13
votes
3 answers

Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?

I've been upgrading my CRA project to TailwindCSS 3, but now CSS nesting no longer works. Upon starting the server, the console spits out: (8:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting…
Magnus Bull
  • 1,027
  • 1
  • 10
  • 21
13
votes
2 answers

How to lint for a harry robert's BEM convention with stylelint?

PostCSS BEM Linter plugin needs component definition for each block which is a time consuming thing to do in a legacy project. Is there a way to use stylelint to check for the classes pattern and show error in all stylesheets (.scss in my case) of…
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
13
votes
3 answers

Why would I get a "Promise is not defined." error on Node v5.7.0

Im using autoprefixer with postcss and after moving to a new linux server something must be wrong but I cant figure out what this one could be. I'm getting the…
user5536767
12
votes
1 answer

Difference between require VS empty object ({}) on plugin definitions PostCSS config JS file?

Somewhat of a straightforward question that doesn't seem to have very clear answer in the PostCSS docs. I noticed that in the PostCSS Usage Guide they define the postcss.config.js file plugins using require statements like so: //…
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
12
votes
3 answers

Unexpected '/'. Escaping special characters with \ may help - Angular 12 build/deploy

I've updated my codebase from Angular 11 to 12 recently, and after that, I just can't deploy my code. I can run ng build and ng serve and it works flawlessly, however, when I run ng build --prod I keep getting the following error, probably because…
Cassio Groh
  • 699
  • 2
  • 5
  • 12
12
votes
1 answer

Postcss-loader not minifying css output

I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano…
Tijs
  • 1,257
  • 1
  • 8
  • 13
12
votes
2 answers

Change :root variables on different pages with a class

Is it possible to use the :root selector with an ID or Class? I'm trying to flip colors on a different page. :root { --color-one: red; --color-two: blue; } /* Can something like this happen? */ .posts:root { --color-one: green; --color-two:…
cwahlfeldt
  • 580
  • 5
  • 14
12
votes
3 answers

How to define PostCSS variables in one CSS file to be "imported" into another CSS file?

In Sass I can define my variables in a separate file _variables.scss, then make those variables available anywhere I use @import variables;. (Actually the variables are globally available after their first import.) With PostCSS I can use…
ravinggenius
  • 816
  • 1
  • 6
  • 14
1
2
3
…
68 69