Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 28 19:31
    GrimeyPickle commented #1773
  • Jan 21 08:06
    romainmenke commented #1349
  • Jan 20 09:42
    romainmenke closed #1812
  • Jan 20 09:42
    romainmenke commented #1145
  • Jan 20 08:57
    ai commented #1145
  • Jan 20 08:55
    ai commented #1145
  • Jan 20 07:10
    romainmenke commented #1145
  • Jan 19 17:47
    romainmenke synchronize #1812
  • Jan 19 07:05
    romainmenke commented #1812
  • Jan 19 00:08
    ai commented #1812
  • Jan 18 21:59
    romainmenke commented #1812
  • Jan 18 21:53
    romainmenke commented #1812
  • Jan 18 21:41
    romainmenke synchronize #1812
  • Jan 18 20:36
    salmaniz82 commented #1246
  • Jan 18 19:56
    ai closed #1778
  • Jan 18 17:38
    romainmenke commented #1778
  • Jan 18 13:47
    romainmenke synchronize #1812
  • Jan 18 13:31

    ai on main

    Update dependencies (compare)

  • Jan 18 13:28

    ai on main

    increase test coverage Merge pull request #1813 from r… (compare)

  • Jan 18 13:28
    ai closed #1813
Laureano Ruiz
@laureanorp

Hello everyone! Asking here because I found nothing on stack/github for days. Summary: Postcss is working when I use postcss-cli, but not when I run it as a flask-assets plugin.

So, if I run postcss static/src/main.css -o static/dist/main.css my CSS is correctly processed

But if I run my flask app, that uses postcss as a filter (css = Bundle("src/main.css", output="dist/main.css", filters="postcss")) my CSS is not correctly processed. I used this tutorial as reference: https://testdriven.io/blog/flask-htmx-tailwind/

Thank you in advance!

Laureano Ruiz
@laureanorp
No one with experience on flask-assets + postcss? :(
1 reply
tarumam
@tarumam

Hey Guys,
I've just join to this chat, so I'm not sure if here is the right place to get help...
I am facing the following problem when trying to import a css file from node_modules:

C:/myapp/node_modules/swiper/swiper-bundle.min.css Error: No PostCSS Config found in: C:myapp\node_modules\swiper

my postcss.config.js is:

 module.exports = {
    options: {
        ident: 'postcss',
        import: true,
    },
    plugins: {
        'postcss-flexbugs-fixes': {},
        'postcss-normalize': {},
        'postcss-preset-env':
        {
            autoprefixer: {
                flexbox: 'no-2009',
            },
            stage: 3,
        },
    },
}

It's located like:

|-config
|---webpack.config.js
|
|-postcss.config.js

I've tried to inform the postcss.config.js path on webpack like:

{
   loader: require.resolve('postcss-loader'),
   options: {
          path:"../postcss.config.js"
   }
}

But when I do that, I receive a console message saying:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Does anyone have a clue? Thank you guys

2 replies
codepilotsf
@codepilotsf
Is it possible to generate sourcemaps with postcss-cli? If I just add -m flag, postcss command fails with:
Input Error: Did not receive any STDIN
ERROR: "postcss" exited with 1
11 replies
Senior Web & Mobile Developer
@zmeditation
image.png
I have urgent problem
I don't know well about postcss
Why does this error occur?
1 reply
please help
Benjamin Leonard
@benjaminleonard

Hey, I've made a private plugin according to this: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
But when I try and load it in the postcss.config.js I get the following error:

Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-wide-gamut-color'

Is there something else I need to do to use it?

7 replies
fiveNinePlusR
@fiveNinePlusR
trying to use tailwind and i'm getting an error from caniuse-lite even though it's in the node_modules any insight?
Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.12, but cssnano uses 7.0.35. Perhaps this is the source of the error below.
node:internal/modules/cjs/loader:933
  const err = new Error(message);
              ^

Error: Cannot find module 'caniuse-lite/dist/unpacker/feature'
fiveNinePlusR
@fiveNinePlusR
nevermind. I can't tell you how upset i am that node decides that global packages should be used first instead of letting local packages overshadow the globals. whomever thought that was a good idea i'm not a fan of even a little bit.
f0x
@f0x:pixie.town
[m]
I wrote a postcss plugin that added a \t inside a Rule's selector, is that according to spec?
Asking because another plugin then failed to match the selector
f0x
@f0x:pixie.town
[m]
ah I see, that indentation should be in raws instead
mJordan
@mjordancodes
any tips for adding postcss to a create-react-app project where I am not allowed to eject and need to also keep using css modules?
1 reply
ashley holtgraver
@ashleylovespizza
hello all! apologies for what I hope is a very simple question; I'm a beginner at React and have inherited a massive, mature React codebase using react-app-rewired and customize-cra. I am just trying to get react-app-rewire-postcss included in the config-overrides.js config and our setup is of course weird and custom. (pasted in thread). Any thoughts? Thanks so much in advance.
1 reply
Abdelrahman Abdelfattah
@blackPeppper
hi
want some help i want to use scss with postcss
and make postcss compile my scss code
3 replies
with out gulp
Abdelrahman Abdelfattah
@blackPeppper
i want to use rollup to compile my sass and add postcss to it
but in a fille not injected in js file
Randy Johnson
@randy-johnson

Hello,

I created a css minifier that works off of the commandline using a tutorial at DO last year. It has been brought to my attention that when the css files are combined and ran through using the following command that custom properties completely disappear.

example:

:root {
    /* Site Colors are HSL values */
    --black: 0, 0%, 0%;                        
}

There is no reference to --black inside the output of the following command so we get black not defined errors in chrome css tab

The Command:


postcss --config /var/www/minify.server/html/postcss-config.json --use postcss-cssnext --use cssnano --no-map --output /tmp/AE6ED53C-2303-4260-B4FD463925159A22-output.txt /tmp/AE6ED53C-2303-4260-B4FD463925159A22.txt

Here is postcss.config.js (Which now that I am typing this I do not think it is used via the command unless it is auto-included)

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
        postcssCustomProperties({
            preserve: true
          })
    ],
};

Here is package.json

{
  "devDependencies": {
    "cssnano": "^5.0.15",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "postcss-cssnext": "^3.1.1",
    "postcss-custom-properties": "^12.1.8",
    "postcss-import": "^14.0.2"
  }
}

Here is postcss.config.json

{
    "use": ["postcss-cssnext", "cssnano"]
  }

I am a bit over my head here and would appreciate some guidance on why the custom properties disappear and what I need to look into to get the custom properties back.

I have seen a few posts mention: postcss-custom-properties and postcss-preset-env but I am not 100% if those would solve the problem I am having.

Thank You.

3 replies
Jonathan Neal
@jonathantneal
Well done, @RyanZim. :clap:
Forgive the late response. I’m just so impressed to see you continuing to put out quality releases. :)
Yush G
@Divide-By-0
Also getting node.getIterator is not a function, some of my packages are on postcss@7.0.39 and some are postcss@8.4.8, and the only place in my node_modules calling node.getIterator is in node_modules/optimize-css-assets-webpack-plugin/node_modules/postcss/lib. It seems the incompatibility is 7/8, but optimize-css-assets-webpack-plugin's latest uses uses "cssnano": "^4.1.10" which has dependency of postcss: ^7.0.0, but the rest of optimize-css-assets-webpack-plugin's node_modules submodule package.jsons uses postcss 8...
anyone have any ideas on how to fix this version incompatibility
this is when I do node scripts/build.js
Yush G
@Divide-By-0
ok i fixed it with yarn add optimize-css-assets-webpack-plugin@5.0.3 -W
Irina Sidorenko
@iryna.sidarenka1_gitlab

Hello! I want to use postcss to compile scss to css at my React project. Currently getting the error: CssSyntaxError: postcss-advanced-variables: C:....\node_modules\bootstrap\scss_functions.scss: Could not resolve the variable... I attach error from terminal (with package.json script underlined) and config file.
Could you please help me, what is happenning? Thanks in advance!
image.png

image.png

Andrey Sitnik
@ai
@IrochkaZ you can't do it with PostCSS. You need to use Sass to compile Sass. postcss-sass is a tool to change or check Sass sources, not to compile Sass to CSS
Irina Sidorenko
@iryna.sidarenka1_gitlab
@ai Thank you! Seems that I was disinformed by this article https://www.sitepoint.com/postcss-sass-configurable-alternative/
Vincent Hermann
@bawdeveloppement
Hello in my project i have a node_module that have a browserlist and my postcss-loader result into an error "BrowserslistError: Unknown browser query dead" when i try to build my project.
My question is how to fix this error without having to navigate into /node_module/thepackage/package.json and delete browserlist field
1 reply
Caesar
@caesar_exploit_twitter
image.png
My configuration is only working on the child paths, it is not working on the css/ path.
7 replies
Ryan Zimmerman
@RyanZim
Advice from someone who's better informed about CSS @layer would be appreciated: https://github.com/postcss/postcss-import/pull/496#issuecomment-1214216740
1 reply
torres-developer
@torres-developer
Hello! I want to create a plugin for PostCSS and I need a dependency but it comes as an ES6 module. I'm using the postcss/postcss-plugin-boilerplate repo to help me starting the project. Is there a way to create a plugin using the ES6 modules?
4 replies
kanekekoa
@kanekekoa:matrix.org
[m]

TLDR: I'm trying to use postcss-scss to resolve a SyntaxError related to // backslash comments, but it doesn't seem to be working.

Here's my postcss.config.js

module.exports = {
  syntax: 'postcss-scss',
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

When I run yarn run tailwindcss -i ./app/assets/packs/styles/application.scss -o ./tailwind-output.css, I get the following error:

/Users/me/Workspace/project/node_modules/postcss/lib/input.js:148
      result = new CssSyntaxError(
               ^

CssSyntaxError: /Users/me/Workspace/project/app/assets/packs/styles/application.scss:8:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

The line it's referring to is a // comment.

2 replies
kanekekoa
@kanekekoa:matrix.org
[m]
Is there a way to check?
Well, it looks like tailwind doesn't look at it. I just added a bunch of non-sense code that would produce an error and it wasnt reported
kanekekoa
@kanekekoa:matrix.org
[m]
Got it. I had to specify the --postcss option on the command line and point directly to the config file
Ryan Zimmerman
@RyanZim
In case you haven't noticed, https://github.com/RyanZim/postcss-repl hasn't gotten much love for the past few years. Is there any one who would be interested in picking this up? I hardly have bandwidth to give it the time and attention it needs.
andry900
@andry900
Does anyone know how to solve this problem? italia/design-react-kit#862, I'm facing the same issue
snkj
@kolodziejczak-sz

hey, I'm trying to write a custom plugin to rename any class, but I can't see any changes when I'm looking at the result.css property. This is my code:

  const postcss = require('postcss');
  const selectorParser = require('postcss-selector-parser');

  const cssContent = readFileSync(cssFileName, 'utf-8');

  const transform = (selectors) => {
    selectors.walkClasses((node) => {
      node.value = `foo_${node.value}`
    })
  };
  const selectorProcessor = selectorParser(transform);
  const postCssPlugin = () => ({
    postcssPlugin: 'bar',
    Rule (rule) {
      selectorProcessor.processSync(rule);
    },
  });
  postCssPlugin.postcss = true;
  const result = postcss([postCssPlugin()]).process(cssContent, { from: undefined }).css;

Does anyone knows why my plugin does nothing?

3 replies
Ryan Zimmerman
@RyanZim
https://github.com/RyanZim/postcss-repl is archived, and the site has been taken down. If anyone wants to pick this project up, contact me, I'd be happy to transfer ownership
若如
@ruoru
where find the old version aip document?
Lucas Gonze
@lucasgonze
Ryan, thank you for making this available all this time. I appreciate what you did there.
andry900
@andry900

Does anyone know how to solve this problem? italia/design-react-kit#862, I'm facing the same issue

Anyone can help me? I'm still stuck here

Dejan Stosic
@dejan7
Can i somehow set a watch option with JS API https://github.com/postcss/postcss#js-api ? Or i'd have to build it manually with node fs functions? Thanks
1 reply