Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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)

  • Oct 25 15:55
    ai commented #1305
  • Oct 25 15:52
    emilyrohrbough commented #1305
  • Oct 25 15:49

    ai on master

    Release 7.0.21 version (compare)

  • Oct 25 15:49

    ai on 7.0.21

    (compare)

  • Oct 25 15:48
    ai commented #1305
  • Oct 25 15:47

    ai on master

    Revert feature because of postc… (compare)

  • Oct 25 15:45

    ai on master

    Revert feature because of postc… (compare)

  • Oct 25 15:33
    ai commented #1305
  • Oct 25 15:28
    ai commented #1305
  • Oct 25 15:24
    ai commented #1305
  • Oct 25 14:47
    ai commented #1305
  • Oct 25 14:39
    StephenEsser opened #1305
  • Oct 24 16:17
    danielbachhuber commented #1304
  • Oct 24 15:12
    ai closed #1304
  • Oct 24 15:12
    ai commented #1304
  • Oct 24 15:02

    ai on master

    Release 7.0.20 version (compare)

  • Oct 24 15:02

    ai on 7.0.20

    (compare)

  • Oct 24 15:00
    msheakoski commented #1304
hua-lu
@hua-lu
plugins: [postcssPresetEnv()]
any help?
Andrey Sitnik
@ai
@hua-lu call npx browserslist, maybe all your target browsers already support Custom Properties?
hua-lu
@hua-lu
Hi Andrey, according to the docs of postcss-preset-env,
Without any configuration options, PostCSS Preset Env enables Stage 2 features and supports `all browsers`.
hua-lu
@hua-lu
I did it on purpose to specify the browserslist to contain 'IE 10' only, but still not transformed
hua-lu
@hua-lu
it seems only this works:
:root {
  --some-length: 32px;
}

.wrapper {
  height: var(--some-length)
}
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