postcss/postcss

Transforming CSS with JS plugins

Simon Fremaux

@dievardump

Is this a bug or a feature :

if my plugin returns an object { postcssPlugin: 'pluginName', Declaration(node) {} } it is not executed in order of declaration
if my plugin return a function (root) { root.walkDcls(node => {}) is is executed in order

7 replies

The first looks a lot cleaner, I find strange that it would be executed later just because it has this form

WZT

@Genuifx

decl.parent.insertAfter(i, decl.clone({ value: value })); this usage doesn't work in Postcss8

21 replies

it always insert before the i decl

Ryan Zimmerman

@RyanZim

If somebody has a Windows box handy to test this, would be much appreciated: postcss/postcss-import#432

Jonathan Neal

@jonathantneal

Have any PostCSS tools integrated something like continuous benchmarking for pull requests?

1 reply

Evilebot Tnawi

@evilebottnawi

@ai How to work with vendors prefixes, for example @-webkit-keyframes using visitor API? I don't known all possible vendors/do want to specify all of them

1 reply

Yvain Liechti

@ryuran

Hello here I try to update a plugin to postcss8. I encounter an issue.
https://stackoverflow.com/questions/64279693/how-to-replace-walkdecls-with-a-regex-with-postcss8-api-declaration

3 replies

Yvain Liechti

@ryuran

Following the previous issue. I don't get "How to edit a value into Declaration without making an infinite loop?" https://stackoverflow.com/questions/64319279

rickyrocker

@rickyrocker

Hi I'm trying to get basic postcss to work and failing epicly. Steps are:

npm install postcss-preset-env --save-dev --global
npx babel /my/dir/test.css --plugins=/usr/lib/node_modules/postcss-preset-env

and I get the following:

Error: [BABEL] /my/dir/test.css: Plugin/Preset did not return an object.
at /usr/lib/node_modules/@babel/core/lib/config/full.js:210:11
....
Can anyone possibly help??

5 replies

nikitATX

@nikitATX

Hi guys, I'm looking to convert a custom function into a plugin because I need to create a full ruleset instead of transforming a value. I realize creating rulesets from scratch isn't a normal use case, but I'm trying to create custom color palettes based on vars defined in webpack. Pseudo function:

function createPalette(varName, hue, saturation, light) {
    return `--${varName}: hsl(${hue}, ${saturation}, ${light});`
};

I plan on populating :root{} with the output. I was wondering if anyone can point me in the right direction? I'm not totally sure how to get started.

3 replies

Ludovico Fischer

@ludofischer

Hi, is there a reason that Postcss 8 does not export the tokenize() function at the top level like it exports parse()? I am asking because I am porting postcss-less which requires postcss/lib/tokenize in a few places.

3 replies

Ryan Zimmerman

@RyanZim

https://twitter.com/RyanZim4/status/1318966806942547968

Attn @ai ^

Dan Lemon

@dan2k3k4

I'm in the process of updating a bunch of package.json dependencies and now after I build the following CSS:

.events-paragraph {
  &__events {
    @mixin component-margin-bottom;

    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--space-100));
  }
}

.two-columns-section__column {
  .events-teaser {
    @media (--tablet-up) {
      width: 50%;
    }
  }
}

It ends up as:

.events-paragraph__events {
    margin-bottom: 40px;
    margin-bottom: var(--space-500);
    @media (min-width: 1024px) {
    margin-bottom: 80px;
    margin-bottom: var(--space-1000);
  }

    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * 8px);
    margin: calc(-1 * var(--space-100));
  }
@media (min-width: 768px) {
  .two-columns-section__column .events-teaser {
      width: 50%
  }
    }

Whereas before, it would be:

.events-paragraph__events {
    margin-bottom: 40px;
    margin-bottom: var(--space-500);
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * 8px);
    margin: calc(-1 * var(--space-100));
}

@media (min-width: 1024px) {
    .events-paragraph__events {
        margin-bottom:80px;
        margin-bottom: var(--space-1000);
    }
}

@media (min-width: 768px) {
    .two-columns-section__column .events-teaser {
        width:50%
    }
}

My postcss config file (which I did not change):

module.exports = {
  plugins: {
    'postcss-easy-import': {},
    'postcss-preset-env': {
      stage: 0,
    },
    'postcss-url': {
      url: 'inline',
    },
    'postcss-mixins': {},
    'postcss-nested': {},
  },
  module: true,
  url: false,
};

But various postcss modules were upgraded:

-    "postcss-easy-import": "^3.0.0",
+    "postcss-easy-import": "https://github.com/univers-agency/postcss-easy-import",

-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.0.3",

-    "postcss-mixins": "^6.2.1",
+    "postcss-mixins": "^7.0.1",

-    "postcss-nested": "^4.1.2",
+    "postcss-nested": "^5.0.1",

-    "postcss-preset-env": "^6.6.0",
+    "postcss-preset-env": "^6.7.0",

+    "postcss": "^8.1.1",

Oh mmm maybe I should not have v8 of postcss?

17 replies

Ryan Zimmerman

@RyanZim

Any ideas what's happening here? postcss/postcss-import#435

2 replies

Ludovico Fischer

@ludofischer

Hi, I want to switch to PostCSS 8 event listeners a few plugins which cache the transformation results to re-use them if they encounter an identical declaration value in the same tree. Is it correct to use prepare() to pass the cache to the various Declaration function invocations, like this ludofischer/cssnano@60d8d6a ?

2 replies

Simon Fremaux

@dievardump

Hi here.

Anyone knows if there is a plugin that would detect if there are properties that are often used together (exemple: display: flex; flex-direction: column; justify-content: center;) and would take all selectors that uses those, and create only one declaration with it (like a @extend with placeholders but automatic)?

Juan Carlos Medina

@juanca

: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

@ialarmedalien

Does anyone have an example of a PostCSS plugin that uses the v8 API and uses SCSS files as input?

10 replies

Andrej Gajdos

@AndrejGajdos

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

@ludofischer

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

@swernerx

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

@swernerx

Another quick one... is there any possibility to mark nodes as touched by this plugin other then inventing a custom solution?

8 replies

mikebars

@mikebars

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

@winston0410

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
}

.invalid{
  @mixin validation invalid #be132d;
}

And this is my postcss.config.js

module.exports = {
  plugins: [
    require('postcss-mixins'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('tailwindcss')
  ]
}

7 replies

Iryna Zaletko

@IrochkaZ

How to fix mistake?

2 replies

amitkaplan14

@amitkaplan14

Hi, is it possible to pass custom params to config?
module.exports = (config) => {}

1 reply

Niklas Mischkulnig

@mischnic

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

philipimperato

@philipimperato

is postcss8 compatible with angular 11?

6 replies

Noahdo

@Noahdo

hello

1 reply

John Winston

@winston0410

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 => {
        console.log(rule)
        return rule
      })

16 replies

Andrey Sitnik

@ai

@RyanZim can we accept this PR? postcss/postcss-cli#362

kyle henson

@kyle_hensoon_twitter

hi guys

is anyone here ?

22 replies

alexgagnon

@alexgagnon

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

LithinkHQ

@lithinkhq_gitlab

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/" }),
    require("postcss-preset-env")({
      stage: 1,
      features: {
        "nesting-rules": true,
      },
    }),
  ],
};

if (isProd) {
  config.plugins.push(
    require("autoprefixer"),
    require("cssnano")({
      preset: ["default", { calc: false }],
    })
  );
}

module.exports = config;

Any idea what am I missing?

Adi Sahar

@adi518

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

@aravind_hashout_gitlab

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", () =>
  gulp
    .src("src/*.css")
    .pipe(postcss([autoprefixer, cssnano, cssVariables(), cssMixins(), calc()]))
    .pipe(gulp.dest("dest/"))
);

gulp.task("rename", () =>
  gulp
    .src("dest/*.css")
    .pipe(rename("style.min.css"))
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write("maps/"))
    .pipe(gulp.dest("dest/"))
);

gulp.task("lint-styles", () =>
  gulp.src("src/*.css").pipe(
    postcss([
      stylelint({
        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

@ai

@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

Where communities thrive

People

Repo info

Activity