Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 12:00
    Lonli-Lokli commented #1767
  • 10:33
    AndreyYevtukhov commented #1767
  • Aug 13 12:44
    ai closed #1723
  • Aug 13 12:44

    ai on main

    add postcss-easy-import to the … hotfix Update docs/plugins.md and 1 more (compare)

  • Aug 13 12:44
    ai closed #1770
  • Aug 13 12:44
    ai synchronize #1770
  • Aug 13 09:44
    fpetrakov synchronize #1770
  • Aug 13 09:36
    fpetrakov opened #1770
  • Aug 11 16:50
    ai closed #1767
  • Aug 11 16:50
    ai commented #1767
  • Aug 11 16:46
    Lonli-Lokli opened #1767
  • Aug 10 15:42
    ai commented #1766
  • Aug 10 15:42
    ai closed #1766
  • Aug 10 14:33
    johnnybenson edited #1766
  • Aug 10 14:33
    johnnybenson edited #1766
  • Aug 10 14:33
    johnnybenson edited #1766
  • Aug 10 14:31
    johnnybenson opened #1766
  • Aug 09 10:49
    phoenisx commented #1765
  • Aug 09 10:29
    ai commented #1765
  • Aug 09 10:27
    phoenisx opened #1765
ajbura
@ajbura:matrix.org
[m]
Hi, is there an alternative of postcss-extend that’s compatible with postcss 8.x?
3 replies
ajbura
@ajbura:matrix.org
[m]
Don’t have time/energy to fork and maintain. I guess i’ll just go with standard syntax too.
Olu Niyi-Awosusi
@oluoluoxenfree
Hey, I'm working on a plugin; is the AST explorer the best way to work out how to target specific declarations? I can't quite work out how to use it
2 replies
olu
@olu:memoryandthought.me
[m]
I'm trying to target cascade layers; in my code so far I've just targeted an at layer but I can't work out how to replicate it in the AST explorer
it doesn't highlight the same part
7 replies
olu
@olu:memoryandthought.me
[m]
oh sorry, same person different device lol
olu
@olu:memoryandthought.me
[m]
ah thanks so much
Levi Wheatcroft
@leviwheatcroft

Trying to figure out how to get webpack to work with both less-loader and postcss-loader...

module: {
    rules: [
      {
        test: /\.(css|less)$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                config: join(__dirname, 'postcss.front.js')
              }
            }
          },
          'less-loader'
        ]
      },
  ]
}

Using this set up less complains about any @apply at-rules.

3 replies
rooshan1234
@rooshan1234
Hey all, I had a question. Without using recursion, is it possible to check if a rule belongs to an at-rule?
1 reply
Robert Clark
@rbclark

Hey all, I just had a question regarding sourcemaps. My sourcemaps are all working properly inline until I use the postcss-import extension and pull in a file from a package such as

@import "dropzone/dist/dropzone";

Since dropzone has a sourceMappingURL at the end of it's CSS, this causes postcss to generate an external map file in my output directory. Without this line all of the sourcemaps generate inline. Is there anything I can do to force the generation of inline sourcemaps?

6 replies
Robert Clark
@rbclark
And it looks like my understanding of inline source maps was somewhat flawed so back to the drawing board here.
Question: I am trying to get sourcemaps working properly within my app, the problem is the path that the browser needs to use to access them is incorrect, I need to prepend some path information. Is that at all possible with the postcss-cli?
4 replies
Sana Javed
@sanajaved7

Hi y'all :wave: - I am working on the plugin for layers with @oluoluoxenfree and I had a question regarding when the plugin needs to do multiple walks of the rules. Specifically, in the first walk, I insert some nodes but when I do a second walk I do not see the node has been inserted. I am using postcss-tape tests and the AST explorer to see that the insertion is actually working but it doesn't seem to be modifying the root and the changes are not carried over for the subsequent walks. Any advice on how to tackle this?

For more context on what I'm trying to do or to see the draft PR: https://github.com/csstools/postcss-plugins/pull/244#issuecomment-1072470718

2 replies
Lucas
@lelukas

Hey everyone, I'm trying to write my very first plugin, so I'm still experimenting and trying to figure out how postcss works. How can I type each function inside the return? (like Root, Declaration, ...)

At the end of the generated file from template there's

/**
 * @type {import('postcss').PluginCreator}
 */

What would be the type for Declaration, for instace?

2 replies
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