postcss/postcss

Transforming CSS with JS plugins

Andrey Sitnik

@ai

@frenzzy there is no polyfill for latest spec. W3C change it too often. I recommend to use non-official color functions because W3C can change spec again https://www.npmjs.com/package/postcss-sass-color-functions

@frenzzy if you are sure about the current spec you can help @jonathantneal to update polyfill

Vladimir Kutepov

@frenzzy

looks like postcss-sass-color-functions is no longer maintained

Andrey Sitnik

@ai

@frenzzy it is simple plugin. You can send PR with dependencies update

Kyle Taborski

@ktabors

Hi, before I add an issue I wanted to see if this was a know issue. We were using v6 and recently switched to v7. When that happened we had a calc() in a transform fail (this is what we noticed, but there were other cases of this calc issue too). It was calc(-1 * --our-variable) that failed. I can't find anyone else reporting this issue. I ended up being able to fix it by doing calc(--our-variable * -1). I don't see an open or closed issue that looks related.

Andrey Sitnik

@ai

@ktabors didn’t you updates PostCSS from 6 to 7? Maybe you also need to update PostCSS pluginbs like postcss-calc. calc(-1 * --our-variable) is a very simple example and should work

Kyle Taborski

@ktabors

@ai yes sorry, it was postcss-calc that we upgraded from v6 to v7.0.1, I also checked that we had the issue if we used v7.0.2 (current on npm) as well.

I know it's a simple case, but I couldn't find it in the tests, the closest to this was https://github.com/postcss/postcss-calc/blob/master/src/__tests__/index.js#L201

Kyle Taborski

@ktabors

that said I just installed the project, wrote a test and it passes, so probably a bad interaction with another library, thanks!

Andrey Sitnik

@ai

@ktabors good luck in debugging.

If Adobe uses PostCSS you can talk with manager about funding PostCSS
https://opencollective.com/postcss/

Ryan Zimmerman

@RyanZim

Greenkeeper is shutting down in favor of Snyk. I personally don't care much for Greenkeeper myself; I prefer Renovate. In any case, action is needed. Who has proper access to authorize apps on the postcss org?

Andrey Sitnik

@ai

@RyanZim I can add app

Ryan Zimmerman

@RyanZim

@ai Thanks; add https://github.com/marketplace/renovate and install it for postcss-cli & postcss-import. Also, please disable the Greenkeeper app for those repos. Thanks!

Andrey Sitnik

@ai

@RyanZim done

hbCyber

@hbCyber

I am having issues getting postcss-preset-env to do anything at all. Executing it with the PostCSS-CLI, which runs other plugins successfully...

My postcss.config.js looks like this:

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv(/* pluginOptions */),
    require('tailwindcss')
  ]
}

Yet if I run PostCSS-CLI, only the Tailwind modifications are applied successfully. For instance, this part of my CSS remains unchanged at all in the output file:

input {
    --some-length: 32px;

    height: var(--some-length);
    width: var(--some-length);
}

Can anyone help me figure out what's wrong?

hbCyber

@hbCyber

Nevermind, I have solved my problem -- the features I was using were at a stage below the default one in postcssPresetEnv. I have fixed it by updating my postcss.config.js:

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 0 }),
    require('tailwindcss')
  ]
}

My output CSS is now correct. Cheers!

Ryan Zimmerman

@RyanZim

@ai :ok_hand:

imaneeeeeeee

@bennami

hi guys

i have an issue, when looking for an answer i stumbled on this chat? i dont know if any of you could help me?

Ryan Zimmerman

@RyanZim

Don't ask to ask, just ask. If we can help, we will.

Andrey Sitnik

@ai

@bennami ask answer here, yeap. Next time start from the question directly

imaneeeeeeee

@bennami

okay hahah so i have a react app that i created a few days ago, now that i am done with writing the logic, i want to try out tailwind. so i followed the instructions to install it and set up the right files and all so that it starts compiling when i do npm start

however,

i have an error and it doesnt let me execute it

i shall post a screenshot of my error

i also noticed that i have some prototype pollution issues? not sure if these two are linked

this is a screen of my npm audit, i updated all my dependencies and all but nothing seems to be working

Andrey Sitnik

@ai

@bennami sorry, I have no experience with Tailwind to help you here. They have a very good community. It will be better to ask question there

Ahmed Hakim

@ahakim0_twitter

hey, I'm trying to use PostCss with nextjs which allow me only to add the main css file in the main _app file, which make all the output style global, how can I create css file for each page or even each component,

Ryan Zimmerman

@RyanZim

@ahakim0_twitter You'd probably get more help going to a nextjs support resources.

Ahmed Hakim

@ahakim0_twitter

thank you

Jonathan Pollak

@TxHawks

Hi, I'd like to conditionally do something inside my css based on NODE_ENV but couldn't find an easy way to do that. Is there one? I'm use rollup and rollup-plugin-postcss to bundle my css and js

Andrey Sitnik

@ai

@TxHawks there are two ways:

You can create postcss.config.js and return different set of plugins depends on NODE_ENV
Or you can write a custom PostCSS plugin. You will use JS to write it so you will have access to NODE_ENV

docs about postcss.config.js https://www.npmjs.com/package/postcss-load-config

Jonathan Pollak

@TxHawks

@ai Thanks, but what I want is access to the value of NODE_ENV as a variable inside the css

I'd like to only emit certain styles if NODE_ENV !== 'production'

Jonathan Pollak

@TxHawks

Okay, saw postcss-advanced-variables can do it

Andrey Sitnik

@ai

yeap, you can use any variables plugins, they all recieved default values

Jonathan Pollak

@TxHawks

Thanks. I wish it was possible with precss, but I can't find any reference to anything like that

Jonathan Pollak

@TxHawks

Actually, that does work, sort of. postcss-advanced-variables passes the variables to .css files, but not to .scss files, despite rollup-plugin-postcss also consuming Sass files

rtm

@rtm0001_twitter

hello, why nesting in CSS in Create-React-App doesn't work? CRA has postcss-preset-env as I know.

I use css modules with CRA

Andrey Sitnik

@ai

@rtm0001_twitter maybe because you use SCSS nested syntax, now W3C syntax https://github.com/jonathantneal/postcss-nesting

also you need to change stage for postcss-preset-env, by default postcss-nesting is not enabled, because the spec is unstable

rtm

@rtm0001_twitter

@ai thak you. So I find 2 easy solutions for nesting. Use sass (node-sass), but don't like it. And use craco to override CRA and add config to enable nesting.

Andrey Sitnik

@ai

@rtm0001_twitter if you will be able to add custom PostCSS config, you can add postcss-nested with Sass-like nesting

rtm

@rtm0001_twitter

@ai I added feature "nesting-rules": true and now it works like a charm. Thank you for postcss ~~и за #sitnikfriday в твиттере~~

Andrey Sitnik

@ai

=^_^=

Where communities thrive

People

Repo info

Activity