Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 30 10:08
    ai closed #1800
  • Nov 30 10:08
    ai commented #1800
  • Nov 30 09:53
    J-DuYa opened #1800
  • Nov 29 09:00
    giusepetroso commented #1786
  • Nov 28 20:24
    ai commented #1786
  • Nov 28 20:24
    ai commented #1786
  • Nov 28 20:24
    ai reopened #1786
  • Nov 28 20:10
    giusepetroso commented #1786
  • Nov 28 20:09
    giusepetroso commented #1786
  • Nov 27 01:23
    ai closed #1786
  • Nov 27 01:23
    ai commented #1786
  • Nov 26 08:37
    giusepetroso commented #1786
  • Nov 23 09:26
    ai closed #1799
  • Nov 23 09:26
    ai commented #1799
  • Nov 23 08:10
    wibed edited #1799
  • Nov 23 08:09
    wibed opened #1799
  • Nov 22 05:00
    dherault closed #1798
  • Nov 22 05:00
    dherault opened #1798
  • Nov 22 05:00
    dherault opened #1797
  • Nov 21 00:58

    ai on main

    Fix type tests (compare)

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
Galen Weber
@galenweber
Is it possible with PostCSS to prefix all classes?
3 replies
Jiří Thiemel
@thiemeljiri

Hi, for last 2 days I'm struggling with Storybook, trying to run the PostCss plugins the same way as I do in webpack. I've found very little comments about this.
This one seems to be close to what I need, but sadly, it doesn't work as well https://github.com/storybookjs/addon-postcss/issues/27#issuecomment-1015781423

Has any of you experienced similar problems?

package.json

...
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/preset-scss": "^1.0.3",
...
"postcss": "^8.4.18",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.2",
...
"sass": "^1.32.5",
"sass-loader": "^13.1.0",
...
"webpack": "^5.17.0",
...

postcss.config.js

const postcssGenerateBreakpoints = require('./styles/global/config/breakpoints.postcss') // custom plugin
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  plugins: [
    postcssGenerateBreakpoints,
    postcssPresetEnv({
      autoprefixer: { grid: 'no-autoplace' },
      features: {
        'focus-within-pseudo-class': false
      }
    })
  ]
}

.storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const postcssGenerateBreakpoints = require('../styles/global/config/breakpoints.postcss')
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  "stories": ["../app/**/*.stories.@(js|jsx|ts|tsx|mdx)", "../styles/**/*.stories.@(mdx)"],
  "addons": [
    "@storybook/preset-scss",
    // TODO - This doesn't work :( the plugins aren't loaded
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
          postcssOptions: {
            plugins: [
              postcssGenerateBreakpoints,
              postcssPresetEnv({
                autoprefixer: { grid: 'no-autoplace' },
                features: {
                  'focus-within-pseudo-class': false
                }
              })
            ],
          },
        },
        cssLoaderOptions: { importLoaders: 2 },
      },
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  core: {
    builder: "webpack5"
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  }
};

Thank you! 🙏

2 replies
matrixwolf
@matrixwolf:matrix.org
[m]

Hey guys,

I've got a Meteor ReactJS project.
I'm running https://atmospherejs.com/juliancwirko/postcss

So inside my package.json I have

  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "postcss-easy-import": "^4.0.0",
    "postcss-load-config": "^4.0.1"
  },
  "postcss": {
        "plugins": {
          "postcss-easy-import": {},
          "postcss-meteor-root-url": {},
          "autoprefixer": {}
        }
  },

My page is at
example.com/foo/bar
and I need the image (in the compiled CSS) to say
.foo { background-image: url(../../images/icons/error.svg) !important; }

The most basic thing ever right? Go to the root URL then images.

But nomatter what I put in the .scss (any of these)
.foo { background-image: url(../../images/icons/error.svg) !important; }
.foo { background-image: url('../../images/icons/error.svg') !important; }
.foo { background-image: url("../../images/icons/error.svg") !important; }
.foo { background-image: url("/../../images/icons/error.svg") !important; }
.foo { background-image: url(/../../images/icons/error.svg) !important; }
.foo { background-image: url(../../../../../../../../../../images/icons/error.svg) !important; }
.foo { background-image: url("../../../../../../../../../../images/icons/error.svg") !important; }

It always gets compiled as
.foo { background-image: url("images/icons/error.svg") !important; }

And even in my plugin, if I do this

    Declaration: {
      'background-image': (decl, postcss) => decl.value = 'url(dog.svg)'
    }

That works, it comes out in the browser as
.foo { background-image: url("dog.svg") !important; }

But if I do this
decl.value = 'url(../images/icons/dog.svg)';

It comes out in the browser as
.foo { background-image: url("images/icons/dog.svg") !important; }

I've tried setting my plugin postcss-meteor-root-url as the last plugin in package.json

  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {},
      "postcss-meteor-root-url": {}
    }
  },

===================================

Obviously if I can make it work without a plugin, with the fastest most efficient compilation possible that is preferable.

I'm more than happy to make my plugin correct the relative paths.

The problem I'm having is postcss destroys the relative path prefix ../ regardless of my plugins returned value, and it's making postcss completely unusable.

Any help will be much appreciated.

===================

PS.1:
By the way, can I somehow specify the path to my local (not public) plugin?
Do I need to specify how to find my plugin somehow inside package.json?
Currently I put my plugin at server/imports/postcss-meteor-root-url and them I symlinked to that dir from inside node_modules
(just temporarily while testing my plugin and postcss finds and runs my plugin fine)
Of course npm destroys my symlink any time NPM adds/removes etc any package, so the symlink from inside node_modules is obviously not a permanent solution.

========================

PS.2: I'd probably prefer to use my own plugin rather than using the complicated postcss-url plugin.
But in an attempt to get it working, I have tried installing postcss-url (without changing my .scss) and it didn't have any noticable effect whatsoever.
Maybe I'm doing it wrong.

I tried running postcss-url without any options, and I also tried putting these options inside the package.json postcss.plugins object, like this

  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {},
    }
  },

========================

Anyway, any help will be much appreciated!!!

matrixwolf
@matrixwolf:matrix.org
[m]

Hmm, I found this page where people thought (totally unrelated) postcss-loader was changing the URL paths.
webpack-contrib/postcss-loader#500

And people were saying it's not that, it's some minifier.

So I did this

$ meteor remove standard-minifier-css
Changes to your project's package version selections:
minifier-css           removed from your project
standard-minifier-css  removed from your project
standard-minifier-css: removed dependency

And magically it's working now... but now the image has been inline'd into the CSS, which I don't want.
Haha, anyway, just sharing the update. I'm still investigating.

matrixwolf
@matrixwolf:matrix.org
[m]
Oops, I thought removing standard-minifier-css was solving something, but then postcss isn't running at all.
Because running postcss is one of the functions of standard-minifier-css So I've had to re-add standard-minifier-css so the problem is back.
https://docs.meteor.com/packages/standard-minifier-css.html
matrixwolf
@matrixwolf:matrix.org
[m]
I'm still stuck at step 1 if anyone can help please :)
matrixwolf
@matrixwolf:matrix.org
[m]
I successfully found a way to "hack it" I made my own plugin that looks for images/ and not // and then it replaces the /images with https://example.com/images/ and postcss or the minifier or whatever doesn't butcher that absolute URL.
But the nice thing is I'm not hard-coding the absolute URL into the scss. my plugin gets it and puts it in when the SCSS is compiled.
Ryan Zimmerman
@RyanZim
Whatever you're dealing with looks like a webpack problem, not a postcss problem.
Postcss doesn't change anything, unless you have a plugin that's changing something.
matrixwolf
@matrixwolf:matrix.org
[m]
@RyanZim: thanks bud. Ok