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
79
votes
12 answers

Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin

I am getting this error whenever I run npm start. I tried a couple of fixes but none of them work for me. I tried to change the version of autoprefixer to 9.8.6 but it didn't work. Please help me with this issue This is my package.json { "name":…
r121
  • 2,478
  • 8
  • 25
  • 44
56
votes
12 answers

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated

I installed autoprefixer and I get this warning: npm install autoprefixer@10.4.5 --save-exact WARNING in…
ZebraCoder
  • 1,480
  • 1
  • 5
  • 12
55
votes
5 answers

No PostCSS config found

I am trying to learn reactjs according to a tutorial. Meanwhile the tutorial instructs to use webpack for compiling stylesheets and JS assets. I am stuck in an error where the stylesheets cannot get compiled and throws following error while…
Birendra Gurung
  • 2,168
  • 2
  • 16
  • 29
47
votes
7 answers

Angular ERROR: PostCSS received undefined instead of CSS string

Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time…
Sohi
  • 495
  • 1
  • 4
  • 7
34
votes
6 answers

PostCSS error: [object Object] is not a PostCSS plugin

The error is coming from the postcss plugin, I think I may have written it incorrectly. I'm trying to add cssnano and autoprefixer to the postcss plugin. gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143 throw new…
Joe Consterdine
  • 1,035
  • 1
  • 18
  • 37
27
votes
5 answers

Webpack not loading css

This is my first time trying to set up Webpack, so I'm sure I'm missing something here. I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick…
Claudia
  • 863
  • 1
  • 7
  • 7
24
votes
10 answers

Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible

i'm trying to install Tailwindcss in my nuxt project I use fresh install from nuxt https://v3.nuxtjs.org/getting-started/installation npx nuxi init nuxt3-app and follow tailwindcss installation https://tailwindcss.com/docs/guides/nuxtjs But when i…
Tailwindow01
  • 243
  • 1
  • 2
  • 4
23
votes
1 answer

How to best include assets (images and fonts) referenced in scss files in rollup bundle

I am writing a react component library with typescript, sass and rollup, and I want it to be as standalone as possible. Does anyone have a suggestion on how to best include assets (images and fonts) referenced in scss files? One solution could be…
Mahus
  • 595
  • 1
  • 6
  • 16
22
votes
4 answers

css autoprefixer with webpack

I have been trying to configure webpack with LESS and Autoprefixer, but autoprefixer does not seem to work. My css or less files are not autoprefixed. Example: display: flex stays display: flex I have put my webpack config below: var autoprefixer =…
wrick17
  • 701
  • 1
  • 5
  • 14
19
votes
3 answers

How to use @apply directive of tailwind in any .scss file instead of only using it main tailwind file(in React)?

I am working in react with typescript and tailwindcss. What I want is that instead of using @apply directive in main tailwind.css file (the file which conatins @tailwind base, @tailwind components, etc), I want to use it in any .scss file. For…
Ashutosh
  • 209
  • 3
  • 9
19
votes
4 answers

How to support inline comments in PostCSS?

Webpack/PostCSS is unable to process .pcss files which have inline comments: Module build failed: Syntax Error (77:5) Unknown word > 77 | // } | ^ PostCSS part of my Webpack's config: let PostCSSConfig = { sourceMap: true, …
van_folmert
  • 4,257
  • 10
  • 44
  • 89
19
votes
3 answers

How to suppress warnings using webpack and post css

How do I suppress warnings generated by webpack loading post css files? Warning example: WARNING in ./~/css-loader!./~/postcss-loader!./src/components/Navigator/Navigator.css postcss-custom-properties:…
Avi Zloof
  • 2,923
  • 4
  • 22
  • 28
18
votes
3 answers

Post CSS not converting custom properties

I have a project using Webpack that utilises PostCSS loader and code splitting. The CSS for modules is imported directly into entrypoints as per the below using SASS loader. import '@/css/modules/components/_accordion.scss' Some modules use CSS…
MrBizle
  • 418
  • 4
  • 12
17
votes
4 answers

What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?

The number of variants that exist to showcase how postcss.config.js has to be configured is extremely confusing. There are examples (like the one at the tailwindcss documentation) that use this: // Example 1: module.exports = { plugins: { …
Robert Wildling
  • 1,014
  • 12
  • 29
16
votes
3 answers

Update CSS Module variables from Javascript

I'm using a (now older) version of react-boilerplate which came with CSS Modules. What's nice about them is that you can create variables and import them in other CSS files. Here's my colors.css file :root { /* Status colors */ --error:…
NateW
  • 2,856
  • 5
  • 26
  • 46
1
2 3
…
68 69