postcss/postcss

Transforming CSS with JS plugins

Joseph Kaptur

@josephkaptur

Hello! I think I've found an edge-case bug in PostCSS. I'm excited to fix it, but I figured I would start here to make sure it really is a bug.

If you have an AST where a node root has child nodes [a, b, c], and you have other nodes d and e, then calling a.replaceWith(a, d, e) results in root having the children [d, e, b, c], not [a, d, e, b, c], as I would expect

Andrey Sitnik

@ai

@josephkaptur Yeap, it is a bug. Send PR to ose branch.

Joseph Kaptur

@josephkaptur

Thanks very much. Should I create an issue on GitHub as well, or just send the PR?

Andrey Sitnik

@ai

@josephkaptur just PR

Jonathan Neal

@jonathantneal

That’s a really cool bug. I enjoyed your description and found it easy to follow, @josephkaptur.

2 replies

@ai, is the ose branch becoming the main? I don’t want to get excited too soon.

4 replies

Ryan Zimmerman

@RyanZim

What, gitter has threads now?

3 replies

Marcello

@marcebdev

Just wanted to double check, there seems to be no polyfill for the :not css selector when using postcss-preset-env, does that sound right?

3 replies

Elliot Fouts

@elliotfouts_gitlab

hey guys i just found postcss-env-function on github and i'm having some issues configuring it with my react app. In the section of documentation for react-app it says to use the method postcssEnvFunction and pass in some options. However, under the options tab in the main readme they use the method postcssCustomProperties to import the files. Which of these methods do i need to use to get env() working?

10 replies

Jonathan Neal

@jonathantneal

I need to setup notifications for Gitter. I am just lucky to check in every few days.

Jonathan Neal

@jonathantneal

I’m pretty desperate to work on PostCSS stuff.

Jonathan Neal

@jonathantneal

Our production CSS was completely broken using the client-side custom properties polyfill. We had to withhold deploying the plugin, but that meant I was "officially" authorized to spend the day working on a new client-side Custom Properties polyfill for IE11. I got close to finishing. Today, I have some other tasks to wrap up, but I may have a new plugin for this coming soon.

Jonathan Neal

@jonathantneal

:point_up: Happy news! I was able to fix half the problem, and the author has already released the fix. Once I fix the other half, I will move this plugin into PostCSS Preset Env.

I’m sorry that I’m super behind on this, but what kind of support is needed for CSSNano releases? I wonder if I can cut some time that could be useful there.

Evilebot Tnawi

@evilebottnawi

I am afraid that cssnano is dead, I don't have time on this project, and no contributors, it is so bad, bad I can't nothing here :disappointed:

Ben Briggs

@ben-eb

I'm kind of stuck there too. Actually I haven't worked for a long time with CSS so it's hard for me to justify contribution as relevant in some way to what I'm doing. Furthermore it means I can't review code that is going in because I'm not working day-to-day on CSS, so I have no idea about edge cases.

I also worry about PostCSS 8 migration. It will be very painful (and necessary) to do refactoring work around this. I am afraid I don't have any good answers on how we manage that. All I can say is I'm sincerely grateful to those who have contributed to the project.

Jonathan Neal

@jonathantneal

Do I have permissions in that project. I don’t want to buck our tradition of PRs before permissions, but I know the folks at Vercel are building their own copies of CSSNano, and with permissions I could help them get those fixed cuts into proper releases.

Or may I have permissions to do that, @ben-eb, @evilebottnawi ?

Benjamin Nash

@benash

Hi, does anyone know of a plugin that achieves what's done by composes in CSS modules and @apply in Tailwind? Such functionality would be helpful in using atomic/functional CSS classes.

Ben Briggs

@ben-eb

@jonathantneal No objection from me. :)

Jonathan Neal

@jonathantneal

@benash, without using CSS Modules, you mean?

There are a few @extends plugins out there.

Benjamin Nash

@benash

@jonathantneal right, without CSS modules. OK, I'll take a look at those.

Arian Nargesi

@ariannargesi

Hello

anybody onlie?

online?

Andrey Sitnik

@ai

@ariannargesi hi

Evilebot Tnawi

@evilebottnawi

@jonathantneal No objection from me too

I still plan to return to cssnano, but not in near future

Jonathan Neal

@jonathantneal

@evilebottnawi, @ben-eb, may I have permissions to get started? Let me tell you the plan — First, I’ll use those permissions to get Joe Haddad of NextJS on there as well. Second, we’ll go for a small win — packaging up some merged bug fixes yet published. Third, we’ll setup the repo infrastructure to do automated releases. None of this is life changing, but an updated release will help folks and the automation will ease maintaince going forward.

I can vouch for Joe, tho I feel it should work the other way around at this point. NextJS has a solid reputation and financial backing. Fun side note: Joe also happens to be the fellow who PR’d PostCSS into Create React App.

Jonathan Neal

@jonathantneal

@ai, I was able to finish the initial draft of the full CSS parser this weekend. I’m sure there will need to be a lot of cleanup, but I’ll try to get a PR to you this week.

Jonathan Neal

@jonathantneal

I’ve moved my permissions request into the GitHub issue.

Andrey Sitnik

@ai

@jonathantneal will wait for the PR 😸

send it to osebranch

Jonathan Neal

@jonathantneal

If anyone is interested in a very academic exercise, you can paste CSS here and see a JSON view of its node tree.
https://csstools.github.io/tokenizer/

Rohitt Vashishtha

@aero31aero

Hey, is this a good place to ask for some help? My questions are not exactly one plugin specific anymore so I couldn't figure out where to ask.

Andrey Sitnik

@ai

@aero31aero in the chat it is always betetr to start from thq question. If it will be offtopic we will say where to ask.

asking “can I ask” without a question is not useful since we do not have a question to check is it offtopic

Gavin McFarland

@limitlessloop

Hi, could anybody help me? If I want to process styles programmatically, how can I return the processed value and not just a Promise?


var css = `{
padding: 10px;
}`

var styles = postcss(autoprefixer)
            .process(css)
            .then((result) => result.css)

        console.log(styles)

This returns a promise, but I don’t know how to return the value stored in the promise.

Evilebot Tnawi

@evilebottnawi

async/await

Gavin McFarland

@limitlessloop

I’m just not sure how to write that, I’ve tried a lot of combinations and it still returns a promise.

var css = `.class {
    user-select: none;
}`;

async function processPostCSS(css) {
    return await postcss([autoprefixer])
        .process(css)
        .then((result) => result.css)
}

console.log(processPostCSS(css))
// => Promise { <pending> }

Ryan Zimmerman

@RyanZim

You can't go back from async to sync. You have to continue handling promises for the rest of your code

postcss(autoprefixer)
            .process(css)
            .then((result) => console.log(result.css))

Without using async/await ^

With async/await:

async function processPostCSS(css) {
    const result = await postcss([autoprefixer])
        .process(css)
   console.log(result.css)
}

Gavin McFarland

@limitlessloop

I though that might be the case. So I have to do all the “stuff” inside the async function?

From someone who’s not familiar with Promise and async/sync - How do you manage something like that in your code? I feel like now I’ll have to put half of my application inside that function.

Ben Briggs

@ben-eb

You can split up Promise returning functions and combine them like you would with regular functions. You can't do a top level await yet so you would do something like this:

async function processPostCSS(css) {
    return postcss([autoprefixer])
        .process(css)
        .then((result) => result.css)
}

const task = async (css) => {
  console.log(await processPostCSS(css));
}

task(css) // as above

Where communities thrive

People

Repo info

Activity