Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Mar 30 02:39

    ai on ose

    Update dependencies (compare)

  • Mar 30 02:36

    ai on ose

    Remove Node.js 6 and Node.js 8 … Visitor to postcss (#1245) * f… Remove Babel and 91 more (compare)

  • Mar 30 02:36

    ai on master

    Add OpenCollective link (compare)

  • Mar 30 02:34

    ai on master

    Add Tailwind to Sponsors (compare)

  • Mar 29 02:32

    ai on ose

    Regenerate Yarn lock (compare)

  • Mar 29 02:28

    ai on ose

    Remove sharec config (compare)

  • Mar 29 01:39

    ai on ose

    Improve custom properties parse… Update postcss-parser-tests (compare)

  • Mar 29 01:13

    ai on ose

    Use unreleased postcss-parser-t… (compare)

  • Mar 28 23:06
    ai milestoned #1343
  • Mar 28 23:06
    ai labeled #1343
  • Mar 28 23:06
    ai opened #1343
  • Mar 28 23:05
    ai labeled #797
  • Mar 28 23:05
    ai labeled #503
  • Mar 28 23:02
    ai closed #1120
  • Mar 28 23:02
    ai commented #1120
  • Mar 28 23:01
    ai labeled #1305
  • Mar 28 23:01
    ai unlabeled #1324
  • Mar 28 23:01
    ai unlabeled #1305
  • Mar 28 23:01
    ai unlabeled #1299
  • Mar 28 23:01
    ai unlabeled #797
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
Screenshot 2020-03-30 at 22.14.37.png
i also noticed that i have some prototype pollution issues? not sure if these two are linked
Screenshot 2020-03-30 at 22.15.37.png
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:
  1. You can create postcss.config.js and return different set of plugins depends on NODE_ENV
  2. Or you can write a custom PostCSS plugin. You will use JS to write it so you will have access to NODE_ENV
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
=^_^=