Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 00:45
    ai closed #1476
  • 00:45
    ai commented #1476
  • 00:43
    jarkin13 opened #1476
  • Nov 25 14:47

    ai on master

    Update dependencies (compare)

  • Nov 25 14:46
    ai closed #1475
  • Nov 25 14:46
    ai commented #1475
  • Nov 25 14:46

    ai on master

    Update PostCSS CLI example (compare)

  • Nov 25 14:00
    Hocdoc opened #1475
  • Nov 25 07:23
    igorkamyshev closed #1473
  • Nov 25 07:23
    igorkamyshev commented #1473
  • Nov 24 20:45
    ai commented #1474
  • Nov 24 20:44

    ai on master

    Update deno conversion workflow Merge pull request #1474 from o… (compare)

  • Nov 24 20:44
    ai closed #1474
  • Nov 24 20:44
    ai closed #1460
  • Nov 24 20:44
    ai commented #1460
  • Nov 24 20:17
    oscarotero commented #1460
  • Nov 24 20:15
    oscarotero edited #1474
  • Nov 24 20:14
    oscarotero opened #1474
  • Nov 24 13:21
    ai commented on 92155c7
  • Nov 24 13:21
    ai commented #1473
007design
@007design
am i right in thinking that something is up with postcss 8 plugins that's causing it to not pass modified AST to the next plugin? i'm experimenting with creating a simple plugin compatible with v8 but no matter what modifications i seem to make to the tree the output does not include said modifications.
7 replies
Ronn
@ronnross

Hi I'm using the postcss-loader https://github.com/webpack-contrib/postcss-loader. My hope it compile out css custom props so my app will work on IE11. So far no luck. What is strange is despite having configured a plugin when I build webpack outputs that no plugins have been configured for postcss, but I feel I have

I have a configuration like :

{
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      stage: 4,
                      custom-properties: false
                    },
                  ],
                ],
              },
            },
          },
        ],
      },

Any help would be appreciate.

3 replies
Sylvain Pollet-Villard
@sylvainpolletvillard
Hi everyone. I'm currently trying to migrate postcss-grid-kiss to Postcss 8 and Visitor API. So far so good, but I wonder how do I remove postcss as devDependency if I need it for tests ? In https://github.com/postcss/postcss-mixins/blob/master/test/index.test.js @ai still imports PostCSS for testing purposes of the plugin
7 replies
I notice that postcss is declared both as devDependency and peerDependency for this plugin. It doesn't look right
Sylvain Pollet-Villard
@sylvainpolletvillard
okay migration complete, thanks @ai for the very helpful guide and your answer to my question
John Winston
@winston0410
Hi guys, is there any API method for creating media-queries? What is the best way for creating such rules in PostCSS?
5 replies
Juan Gonzalez
@juancpgo

Hey there.. I want to "turn" Tailwind's class naming scheme from this

<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">

Into something more succinct that I came up with:

<h3 class="mt2 t(z7 h8 w7 t2 ca9) s:t(z8 h10)">

(as you see I'll also need to implement a class nesting thing, to nest related classes inside parenthesis)

Is PostCSS the right tool for this job? Should I create a plugin? Can anyone suggest a good PostCSS guide for this type of thing?

5 replies
Shekhar Ramola
@shekharramola
image.png
1 reply
I am a bottom bar with position fixed
but background shadow is coming on button
how to prevent that?
Simon Fremaux
@dievardump

Hi, I'm adding an AtRule to a Declaration node with a plugin, and this AtRule is not seen by later plugins when they use css.walkAtRules();

Is there anything I should do after adding my AtRule so the tree is regenerated/updated?

Simon Fremaux
@dievardump
        let atRule = new AtRule({ name, params: value });
        node.parent.append(atRule);
        node.remove();
AtRule is added this way in a Declaration()
Oh it seems the order in which the plugins are executed is not right. The plugin that should find the added AtRule is declared after but executed before.
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
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:

  1. npm install postcss-preset-env --save-dev --global
  2. 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
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
image.png
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