Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Feb 23 08:10
    ai closed #1534
  • Feb 23 08:10
    ai commented #1534
  • Feb 23 06:54
    Semigradsky commented #1534
  • Feb 23 02:30
    CarlVitasa opened #1534
  • Feb 22 18:46
    Somesa commented #1533
  • Feb 22 18:45
    ai commented #1533
  • Feb 22 18:44
    ai closed #1533
  • Feb 22 18:44
    ai commented #1533
  • Feb 22 18:42
    Somesa opened #1533
  • Feb 22 17:33
    ai closed #1532
  • Feb 22 17:33
    ai commented #1532
  • Feb 22 17:25
    dirad opened #1532
  • Feb 21 06:49
    ai closed #1531
  • Feb 21 06:49
    ai commented #1531
  • Feb 21 05:40
    sabelapaulo edited #1531
  • Feb 21 05:40
    sabelapaulo opened #1531
  • Feb 19 15:22
    www-chique commented #1455
  • Feb 18 14:56
    ai closed #1530
  • Feb 18 14:56
    ai commented #1530
  • Feb 18 14:51
    popov-tensor opened #1530
Juan Carlos Medina
:wave: Hello! I have a quick question: I was wondering if it is possible to see which plugins are configured based on my .browserslistrc file? (For background: I'm seeing Chrome dev tool performance degradation when not polyfilling IE 11 and I want to figure out what about our CSS/SCSS is causing this)
2 replies
i alarmed alien
Does anyone have an example of a PostCSS plugin that uses the v8 API and uses SCSS files as input?
10 replies
Andrej Gajdos
Hi guys, I am a big fan of PostCSS. Thank you for maintaining this tool. I created 2 PostCSS plugins, which are pretty simple. When I come across issues with css grid or flexbox, it's because children elements didn't have min-width: 0 rule. I used Rebass in one project, where is this rule by default and it worked great. Based on this experience, I decided to create postcss-flexbox-reset and postcss-grid-reset. I am going to use these plugins in my future projects and I think it could be useful for others too. What do you think about these plugins? @ai
9 replies
Ludovico Fischer

Hi, I am trying to use TypeScript with the PostCSS 8 API and coding guidelines require explicit type annotations in variable declarations. What type should I declare assign toresult in

let result  = postcss(plugins).process(...);

It looks like it should be LazyResult but the main postcss package does not export it.

2 replies
Sebastian Werner
Hi! I'm in the process of migrating postcss-smart-asset to the new postcss v8 API using Declaraction instead of the walkers. The thing I am missing in the docs is how such code can work with async functions. I tried putting a "async Declaration" into my plugin definition but this seems to result in never ending execution. Is there any official trick to support async code?
13 replies
Sebastian Werner
Another quick one... is there any possibility to mark nodes as touched by this plugin other then inventing a custom solution?
8 replies

Hey! Just curious if there are TypeScript types for the postcss config object/function returning object (postcss.config.js/.postcssrc.js)

I can piece it together (I think) from types I found in postcss and @types/postcss-load-config but was wondering if there was a single canonical type anywhere

1 reply
John Winston

I am trying to use postcss-mixins, but I got the following errors when I try to run postcss:

Undefined variable $class

> 1 | @define-mixin validation $class $color {
    | ^
  2 |   border: 2px solid $color
  3 | }

This is my css file:

@define-mixin validation $class $color {
  border: 2px solid $color

  @mixin validation invalid #be132d;

And this is my postcss.config.js

module.exports = {
  plugins: [
7 replies
Iryna Zaletko
How to fix mistake?
2 replies
Hi, is it possible to pass custom params to config?
module.exports = (config) => {}
1 reply
Niklas Mischkulnig
Is there some "offical" way of getting the AST (the object returned by postcss.parse) into a serializeable format and also back again? For example input.fromOffset sets a function on an object and causes v8.serialize to fail. (For comparison, the Babel AST is just a plain JSON object without prototypes/functions.)
3 replies
is postcss8 compatible with angular 11?
6 replies
1 reply
John Winston

Hi, how can I return the value of a @font-face atRule out from the callback? I do not want to transform the CSS, I just need to get that value for my other application.

This is my current attempt:

      const root = postcss.parse(styling,
          from: styleSheets[0],
          to: null
        }).walkAtRules(/font-face/, rule => {
        return rule
16 replies
Andrey Sitnik
@RyanZim can we accept this PR? postcss/postcss-cli#362
kyle henson
hi guys
is anyone here ?
22 replies

Hi. Let's say I'm trying to do something like the following (the source doesn't have to be JS, I'm just using it as an example).

  h1: {
    font-family: monospace,
    font-size: '20px'
  h2: {
    font-family: 'OpenSans',
    font-size: '14px'
.<some-class> {
  font-family: <some-font>;
  font-size: <some-size>;

A basic example, but I'd like post-processing to have the blocks

.h1 {
  font-family: monospace;
  font-size: 20px;

.h2 {

Is this something postcss can/should handle? I found postcss-each and postcss-for plugins, but they don't seem maintned. Or is this better suited to first passing it through something like sass, and then postcss?

1 reply
I'm trying to use utopia generated fluid typography css snippet but when processing my styles with postcss it complains about ParseError. The offending css uses custom properties and clamp, like so:
4 replies
/* @link https://utopia.fyi/generator-mk-ii?c=320,21,1.333,1140,24,1.333,6,2, */

:root {
  --step--2: clamp(0.7388rem, 0.6975rem + 0.2061vw, 0.8444rem);
  --step--1: clamp(0.9844rem, 0.9295rem + 0.2744vw, 1.125rem);
  --step-0: clamp(1.3125rem, 1.2393rem + 0.3659vw, 1.5rem);
  --step-1: clamp(1.7494rem, 1.6518rem + 0.4878vw, 1.9994rem);
  --step-2: clamp(2.3319rem, 2.2016rem + 0.6512vw, 2.6656rem);
  --step-3: clamp(3.1088rem, 2.9353rem + 0.8671vw, 3.5531rem);
  --step-4: clamp(4.1438rem, 3.9125rem + 1.1561vw, 4.7363rem);
  --step-5: clamp(5.5238rem, 5.2157rem + 1.5402vw, 6.3131rem);
  --step-6: clamp(7.3631rem, 6.9524rem + 2.0537vw, 8.4156rem);
Here's my postcss.config.js:
const { isProd } = require("./src/utils");

const config = {
  plugins: [
    require("postcss-import")({ path: "src/assets/css/" }),
      stage: 1,
      features: {
        "nesting-rules": true,

if (isProd) {
      preset: ["default", { calc: false }],

module.exports = config;
Any idea what am I missing?
Adi Sahar
Hi, I'm writing a plugin. How do I hash the content of the processed the file? I want to hash it and prepend the hash as a comment to the beginning of the file.
Aravind Raj Mahadevan
Hi. I'm going through a tutorial on using postcss-mixins with postcss-calc. I'm getting the an error when using the mixin variable inside of calc like so: font-size: calc($size / 16) rem
The error is:
    Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: $size/16
My gulp file:
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const rename = require("gulp-rename");
const cssnano = require("cssnano");
const stylelint = require("stylelint");
const reporter = require("postcss-reporter");
const cssVariables = require("postcss-css-variables");
const cssMixins = require("postcss-mixins");
const calc = require("postcss-calc");

gulp.task("autoprefixer", () =>
    .pipe(postcss([autoprefixer, cssnano, cssVariables(), cssMixins(), calc()]))

gulp.task("rename", () =>

gulp.task("lint-styles", () =>
        rules: {
          "color-no-invalid-hex": true,
          "declaration-colon-space-before": "never",
          indentation: 2,
          "number-leading-zero": "always",
      reporter({ clearMessages: true }),

gulp.task("default", gulp.series("lint-styles", "autoprefixer", "rename"));

gulp.watch("src/*.css", gulp.series("default")).on("change", (file) => {
  console.log(`File ${file} was changed, running tasks...`);
My dev dependencies:
"devDependencies": {
    "autoprefixer": "^10.1.0",
    "cssnano": "^4.1.10",
    "gulp": "^4.0.2",
    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "postcss": "^8.2.1",
    "postcss-calc": "^7.0.5",
    "postcss-css-variables": "^0.17.0",
    "postcss-each": "^0.10.0",
    "postcss-mixins": "^7.0.2",
    "postcss-nested": "^5.0.3",
    "postcss-reporter": "^7.0.2",
    "stylelint": "^13.8.0"
If someone can help, I'd be grateful. I've been at this since morning.
The fix I could find was to wrap the variable inside #{}. Like #{$size}.
But that doesn't work either.
Andrey Sitnik
@aravind_hashout_gitlab what variables do you talk about? You do not have postcss-simple-vars and I do not see Sass in the gulpefile
postcss-css-variables do not support this syntax too
Aravind Raj Mahadevan
@ai Hi. I'm using postcss-css-variables, postcss-mixins, and postcss-calc.
I'm trying to use calc in a mixin.
Like so:
@define-mixin fontstyle $size, $color {
  font-size: $(size) px;
  font-size: calc($size/16) rem;
  color: $color;
I'm not able to use $size inside calc().
I searched on Stackoverflow and Github extensively.
Everyone suggests to wrap the variable inside #{}.
11 replies
Like so: #{$size}.
But that doesn't work.
For context, I'm trying to follow the tutorial in the book "Mastering Postcss for web design" By Alex Libby.
Second chapter.
Adi Sahar
2 replies
Mehmet Eyüpoğlu
How guys! I have a problem with postcss-nested plugin. When I try to run storybook, it throws me an error referring to that I should be using postcss 8, which I've already installed in my app.
9 replies
What could be the problem and the possible solution?
sachin M. nishad
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css" whats wrong here?
James Garbutt
hello :wave: i've been investigating solutions recently for processing css templates with postcss. don't suppose anyone's active around here that can point me in the right direction? i'd like to extract CSS from tagged template expressions in JS files, pass it through postcss, then replace the original. is this a job for postcss, or would you rather pass responsibility to another build tool? (e.g. babel, rollup, etc) i know its doable in rollup via a plugin (yet to exist) but was hoping there'd be a solution everyone can use, not tied into a specific bundler
9 replies
James Garbutt
maybe it would be just as painful having two build steps though tbh. as in, two pass.. passing it through rollup then passing the result through postcss (or vice versa). so maybe it does belong in a rollup plugin
Fehmi Özüseven