Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 06 18:54
    ai commented #1307
  • Dec 06 18:42

    ai on 7.0.24

    (compare)

  • Dec 06 18:42

    ai on master

    Release 7.0.24 version (compare)

  • Dec 05 17:29

    ai on master

    correct type for `annotation` (… (compare)

  • Dec 05 17:29
    ai closed #1307
  • Dec 05 17:05
    keithamus opened #1307
  • Nov 24 10:07
    yunusga edited #1306
  • Nov 24 10:05
    yunusga opened #1306
  • Nov 20 20:03

    ai on ose

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

  • Nov 20 20:00

    ai on master

    Clearify Node#raws rules (compare)

  • Nov 18 22:33

    ai on 7.0.23

    (compare)

  • Nov 18 22:33

    ai on master

    Release 7.0.23 version (compare)

  • Nov 18 22:32

    ai on 7.0.23

    (compare)

  • Nov 18 22:32

    ai on master

    Release 7.0.23 version (compare)

  • Nov 18 22:31

    ai on master

    Update version in Processor (compare)

  • Nov 18 22:21

    ai on master

    Release 7.0.22 version (compare)

  • Nov 18 22:21

    ai on 7.0.22

    (compare)

  • Nov 18 22:14

    ai on master

    Add Tidelift funding (compare)

  • Oct 25 16:36

    ai on ose

    Fix spelling check (compare)

  • Oct 25 16:28

    ai on ose

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

Andrey Sitnik
@ai
ouh, .wrapper { --some-length: 32px; height: var(--some-length); } doesn’t work in polyfill because it works only with :root
there is no correct way to support all features of Custom Properties in IE 10
Gavin McFarland
@limitlessloop
Hello. I’m using VuePress with PostCSS which uses posts-loader. If I want to avoid having to @import the same file in each of my components is there a way I can set this file using the PostCSS webpack loader? I think I’ve seen this in other webpack loaders known as a ‘dependency'.
hua-lu
@hua-lu
thanks @ai
Andrey Sitnik
@ai
@limitlessloop sorry, have no idea
Evilebot Tnawi
@evilebottnawi
@limitlessloop open issue in postcss-loader, i will implement this feature, you will can use this.loaderContext.getResolver(options): Promise<string>
Gavin McFarland
@limitlessloop
@evilebottnawi Ok thank you.
Abdullah Arık
@abdullaharik_twitter

Hi, I can't remove comments. What is the problem?

// module.exports = {
// plugins: [
// require('postcss-import'),
// require('tailwindcss'),
// require('autoprefixer'),
// ]
// }
const cssNanoConfig = {
preset: [
'default',
{
discardComments: {
removeAll: true
}
}
]
}
const uncssConfig = {
html: [
// html/*.html,
'atasehir.html'
//'http://example.test'
// Your entire sitemap added manually
// or some other way if you’re clever (wget is handy for this).
]
}

module.exports = ctx => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
tailwindcss: true,
cssnano: ctx.env === 'production' ? cssNanoConfig : false,
autoprefixer: ctx.env === 'production' ? {} : false,
'postcss-uncss': ctx.env === 'production' ? uncssConfig : false,
'postcss-uncss': uncssConfig
}
})

Jonathan Neal
@jonathantneal

Heya @ai, it’s been a while. I’ve had some questions on my mind that I’d love to chat with you about. A while back you mentioned the visitor-enabled PostCSS can be built locally. Is that right? And is that how you’d recommend I develop new versions of plugins for it?

Also, would you have any interest in producing “next” builds of it for npm? I imagine visitor rewrites will give me impressive performance gains and code simplicity.

Finally, can the visitor API be extended to funnel down into selectors or values? If so, is there an example of this somewhere?

Svetlana
@Riccu67_gitlab
Hello!
Help me pls with grid
image.png
how can I make the last element always occupy the last seagull in a row?
cell in row*
my grid styles
image.png
Andrey Sitnik
@ai
@jonathantneal yeap, we will recommend new visitor based API for new plugins
but it is not urgent, you can use DOM like API right now
Gavin McFarland
@limitlessloop
Hi does anyone know if there is a PostCSS plugin which can create breakpoint variants of utility classes? Saving me having to copy and repeat each utility class with a prefix for each breakpoint?
Jonathan Neal
@jonathantneal
Could you show me an example of the code you would expect to see in the end, @limitlessloop?
Gavin McFarland
@limitlessloop

It’s for scenarios where you have something like this:

.red {
  color: red;
}

and you want to automatically create a prefix for each breakpoint in your design system

@media screen and (min-width: 480px) {
    .red-sm {
        color: red;
    }
}

@media screen and (min-width: 768px) {
    .red-md {
        color: red;
    }
}

@media screen and (min-width: 1024px) {
    .red-lg {
        color: red;
    }
}

Ideally I feel like there should be something in th spec that allows you to do this natively but there isn’t. This is partly why I asked a while ago about binding classes dynamically using js.

Jonathan Neal
@jonathantneal
Okay. That sounds like a good idea.
Let me draft up a plug-in for this, time permitting, maybe tonight.
VSCode users. Would anyone be willing to volunteer a few minutes of their time to open up a file utilizing PostCSS and try something for me?
Gavin McFarland
@limitlessloop
@jonathantneal sounds interesting would be interesting to see what you come up with.
I use VSCode if you need me to try anything.
Shafiq Sarwar
@ShafiqSarwar8_twitter
Hii i have using "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141%3B' /%3E%3C/svg%3E how can we change color of this?
Jonathan Neal
@jonathantneal
@ai I wrote a language extension for VSCode that covers everything in PostCSS Preset Env and CSS Modules. https://marketplace.visualstudio.com/items?itemName=csstools.postcss
Andrey Sitnik
@ai
@jonathantneal awesome. I added your plugin to PostCSS docs and will try to make a tweet about your plugins

@ShafiqSarwar8_twitter you can try this plugin https://github.com/TrySound/postcss-inline-svg

if not, you can write your own plugin (it i very easy) https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md

Jonathan Neal
@jonathantneal
Is there a build of PostCSS for the browser? Or, @ai, would you be open to having a browser dist in the next release if I made a PR?
Andrey Sitnik
@ai
@jonathantneal no, we don’t have it, since it will be very big to recommend it for everyone
Jonathan Neal
@jonathantneal
@ai thanks for the postcss language support shout out!
Jonathan Neal
@jonathantneal
First, I spent a few minutes looking at the commit history in PostCSS, and I want to shout out to Ravil Bayramgalin for making PostCSS so fast.
Andrey Sitnik
@ai
Yeap. But technically it was two persons. https://github.com/Termina1 initially split parser to tokenizer and parser (and wrote profiler for both) and then Ravil improved tokenizer (after me with Termina1 found than 99% time was in tokenizer)
The main idea behind Ravil’s performance important using numbers instead of strings (str.chatCodeAt(i) === 30) and “jumps” (when we found initial " we use C++ based indexOf or Regexp to find next " instead of going symbol by symbol)
these 2 optimization gave us 200% performance boost
andreyvolokitin
@andreyvolokitin

Speaking of fast. I'm setting up webpack dev environment with CSS HMR, and I have single CSS file (200Kb, ~11k LoC). Adding PostCSS to the pipeline adding 500-600 ms to the build time during development. Not much but it adds up to other tasks and the overall time starts to feel slow (currently I'm trying to optimize everything I can to make development rebuild faster).

I didn't evaluate the project completely and didn't decide what PostCSS plugins to use, but overall it looks like it might be possible to use PostCSS only for production build, because the majority of plugins are for optimisation/fixing, which is not mandatory in development.

Could you give a general advise — does this idea (using PostCSS only for production) seems feasible or I should just include PostCSS into development pipeline? Also, what development rebuild times are accepted as “normal” these days (maybe I just had false expectations of what time dev rebuild should take in a usual project)? I was quite surprised to find out I need to wait ~2 seconds for rebuild/HMR to update my CSS (1 second is acceptable, more starts to feel awkward)… I already turned off sourcemaps and stylelint (which BTW adds another ~second).

Ryan Zimmerman
@RyanZim
It depends what plugins you use
If you're just doing optimization/fixing/old browser support, probably can just run prod. If you adding features, you'll need dev, obviously
Gavin McFarland
@limitlessloop

Hi @RyanZim can I check with you. If I have a npm package and I want to let user’s import multiple stylesheets from it can I write the following in package.json?

{
  "style": ["dist/karamel/index.css”, "dist/karamel/reset.css", “dist/karamel/typography.css"],
}

Then users should be able to use them like such

@import ‘karamel’;
@import ‘karamel/reset’; 
@import ‘karamel/typography’;
Jonathan Neal
@jonathantneal

@andreyvolokitin,

Adding PostCSS to the pipeline adding 500-600 ms

Is that with or without plugins?

Gavin McFarland
@limitlessloop
Hi, I'm curious. Do styles need to be valid CSS syntax for PostCSS to parse it? For example I'm wondering if I might be able to parse
This message was deleted
colors: [
  red,
  green,
  blue
]
And if not, is there a way I can extend PostCSS to support new parsing abilities?
Andrey Sitnik
@ai

@limitlessloop PostCSS core parser can parse [ in delcaration:

:root {
  colors: [red, green, blue]
}

But if you want to do it on root level of CSS, you need to write own custom parse for PostCSS. You can look at postcss-scss as an example

Gavin McFarland
@limitlessloop
Thanks @ai
Ryan Zimmerman
@RyanZim
@limitlessloop Style should be a string. if you do @import "karamel/reset", that will import reset.css relative to the root of the karamel npm package
style simply sets the path that @import "karamel" imports