by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 06:22
    ryanypm commented #1419
  • 06:21
    ryanypm commented #1419
  • 06:06
    Semigradsky commented #1420
  • 05:53
    AdeSupriyadi edited #1420
  • 05:52
    AdeSupriyadi opened #1420
  • 04:22
    jbg opened #1419
  • 00:49

    ai on master

    Release 8.0.7 version (compare)

  • 00:49

    ai on 8.0.7

    (compare)

  • 00:48

    ai on master

    Add pre-commit test for Process… (compare)

  • 00:41
    ai closed #1410
  • 00:41
    ai edited #1410
  • 00:40

    ai on master

    Rebuild PostCSS 7 nodes (compare)

  • 00:33

    ai on master

    Update dependencies Print both English and Chinese … (compare)

  • Sep 21 14:39

    ai on master

    Add link to Chinese article (compare)

  • Sep 21 13:23
    eemeli commented #1370
  • Sep 20 16:55
    ai commented #1418
  • Sep 20 16:51

    ai on master

    Release 8.0.6 version (compare)

  • Sep 20 16:51

    ai on 8.0.6

    (compare)

  • Sep 20 16:51
    ai closed #1418
  • Sep 20 16:51
    ai commented #1418
Aleks Hudochenkov
@hudochenkov

Hi, Andrey!

I have few questions about migration to PostCSS 8.

In stylelint every rule is in fact a PostCSS plugin. In stylelint-order I use postcss-sorting for autofixing. So I call PostCSS plugin from another plugin.

Here's very simplified part of stylelint-order rule code looks:

let postcssSorting = require('postcss-sorting');

// ...

root.walk(function processRulesAndAtrules(node) {
    // ... skip node, which doesn't have nodes insides
    // ...
    let tempRoot = postcss.root({ nodes: [node] });
    postcssSorting(sortingOptions)(tempRoot);
});

Assume that postcss-sorting still uses PostCSS 7, so it exports a function, which returns a function.

It takes a node (rule or at-rule, or maybe even root if it's parsed with postcss-css-in-js or postcss-html) and then run postcss-sorting over it.

  1. Is postcss.root({ nodes: [node] }) ok to do? API docs are empty about this.
  2. How a plugin could run another PostCSS 8 plugin on root that first plugin has? In stylelint we do the same, parse once with no plugins and then run every rule over root from Result.
10 replies
Jonathan Neal
@jonathantneal
Has anyone finished a visitor plugin that leverages the selector parser and/or the value/values parser?
Evilebot Tnawi
@evilebottnawi
Yes
Nothing much has changed :smile:
Jonathan Neal
@jonathantneal
Thanks, @evilebottnawi . This is an exciting time!
Hey, in Node v10+, am I supposed to use exports in package.json? I tried the following, but I’m getting an error about an "incorrect type":
"exports": {
    "node": {
      "require": "./dist/index.cjs"
    }
  }
20 replies
Jonathan Neal
@jonathantneal
@Semigradsky, you are a hero, wherever you are.
Jonathan Neal
@jonathantneal
For Node v10+, I have plugins that import from JS files. What’s the best way to support either export default or module.exports?
10 replies
Robert Baindourov
@Robert-Baindourov
Hi, I am trying to add support for Safari 7 (webkit 2013), how can I transpile out the css vars and fix flexbox ?
42 replies
I feel overwhelemed with the amount of plugins to master, and config options examples mostly show to to support newer CSS, not degrade to older browsers.
Thanks in Advance.
Robert Baindourov
@Robert-Baindourov
I have postcss-preset-env plugin, I don't understand how to use the options to get the browser support that I want.
doing a yarn eject yeilds this in webpack.config.js
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// facebook/create-react-app#2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
Robert Baindourov
@Robert-Baindourov
thank you! it's starting to work.
:)
Jonathan Neal
@jonathantneal
I am seeing the recommendation for prepare. I was wondering if there is a good path for using prepare alongside visitors that are siblings of the prepare, and not children. Like, is the postcss second parameter shared?
Jonathan Neal
@jonathantneal
I’m always breaking all the things.
class Plugin {
    get postcssPlugin() {
        return 'to-red'
    }

    Declaration(decl) {
        console.log(decl.toString())
        decl.value = 'red'
    }

    static get postcss() {
        return true
    }
}

postcss([ Plugin ]).process('a { color: black }', { from: '!' }).then(({ css }) => console.log(css))
postcss/lib/processor.js:40
        i = i()
            ^

TypeError: Class constructor Plugin cannot be invoked without 'new'
23 replies
Ryan Zimmerman
@RyanZim
Heads up, it looks like postcss-cli won't be out until Monday. Never deploy on Fridays; I'll be out all weekend, and I want to be around if something breaks.
2 replies
Shekhar Ramola
@shekharramola
how can I make one divider down and display tags there
I have also tried br tag
but it is just going on the right
but I want to place them down with one divider
image.png
Shekhar Ramola
@shekharramola
also tried using hr tag but that too didn't work
image.png
Jonathan Neal
@jonathantneal
I’ve been keeping my Saturdays free of labor and coding; mostly spending time with the family, relaxing and playing games. Tomorrow, I’ll return to the upgrades. I tried taking on CSS Modules, yesterday, but perhaps that was too much to bite at first. Not that PostCSS Preset Env is less complicated. :)
Evilebot Tnawi
@evilebottnawi
Sometimes it seems to me that I only sleep and coding, working in OSS is pretty hard
Nikolay Latyshev
@DenyVeyten

Hi, folks, trying to add some declaration to each rule, isn't this considered as right usage?

module.exports = opts => ({
    postcssPlugin: 'postcss-plugin',
    Rule (rule) {
        rule.prepend({ prop: 'background-image', value: `url('path/url')` });
    } 
});

It goes through each rule but does not modify the results (rule.nodes after prepend() remain the same) :(
Is the only option to use Root () {} method and walk through each rule explicitly?

8 replies
Jonathan Neal
@jonathantneal
@DenyVeyten you’ll want to prepend a Declaration. Like this:
Rule (rule, { Declaration }) { let color = new Declaration({ prop: 'color', value: 'black' }) rule.append(color) }
I’m on my phone, so I’m sorry about the formatting and lack of threading.
Nikolay Latyshev
@DenyVeyten
image.png
@jonathantneal Thank you for the response! Unfortunately, it does not matter how I pass Declaration to rule, it just does not adding it in result css
Jonathan Neal
@jonathantneal
I’m updating more plugins today. Please thread any plugins you want me to prioritize. 🧵
3 replies
Jonathan Neal
@jonathantneal
I’m really excited about the potential for class plugins, @ai. Another advantage I didn’t immediately realize for class components is the ability to extend other plugins using the native extends functionality of classes. I’ve updated my PR description with more details, and I will address the current responses after a short walk.
8 replies
Jonathan Neal
@jonathantneal
Oh, postcss-values-parser hasn’t been updated to use PostCSS 8 :(
Jonathan Neal
@jonathantneal
After many attempts and some soul searching, I am stuck. I need to finish the parser to complete plugins that touch values.
Jonathan Neal
@jonathantneal
What is the difference between the isClean and isComplete symbol in PostCSS?
3 replies
Jonathan Neal
@jonathantneal
I have a local repo with visitors working through values. But it can’t be done without making a custom cut of PostCSS, namely due to what is going on in TYPE_TO_CLASS_NAME and prepareVisitors.
Andrey Sitnik
@ai
What is a problem with prepareVisitors?
Jonathan Neal
@jonathantneal
It is not extendable, which is a fine design choice. However, for plugins that rely on changes to values within a declaration, it means I need to create a separate visitor system.
It’s difficult that PostCSS Values Parser relies so heavily on PostCSS, which I know you have asked them not to do. I spent a lot of time getting a visitor system into that tool locally, but if the author rejects it (as my previous PRs have been, because they do not want to manage more complexity, which is also a fine maintainer choice) then I’m left to fork.
9 replies
Jonathan Neal
@jonathantneal
A few alternatives included forking both PostCSS and PostCSS Values Parser and combining them. But I feel like that would be a nightmare to maintain. This is why I’m refocusing my efforts on the CSS Parser. I can use that to replace PostCSS Values Parser. I can then integrate a visitor system in a more maintainable project. Perhaps that tokenizer/parser can even get ported into PostCSS itself (which I think is a vision we both want?).
Jonathan Neal
@jonathantneal
To be clear, none of these issues are actual problems that PostCSS has tried to solve before, and are therefore out of scope. I should probably not vent them here. They are issues with the ecosystem around PostCSS, namely with the values parser.
Jonathan Neal
@jonathantneal
Good news. With permission, I quit my job this morning, so I can now commit to the PostCSS ecosystem full time this week! :tada: Background: Last month, some of us (including me) were told we were being laid off at my company, and our last day was going to be this Wednesday, but we no longer had any assignments. I’m sharing that so you don’t think I’m giving the middle finger to my friends at work. I have a new position starting next week, and my wife gave me permission to adjust the finances to make this happen.
Evilebot Tnawi
@evilebottnawi
A lot of TypeError: node.getIterator is not a function in tests after update postcss in css-loader, somebody say about this something?
8 replies
Ryan Zimmerman
@RyanZim
postcss-cli is ready, but npm registry is down, so I can't publish. :frowning:
Ryan Zimmerman
@RyanZim
1 reply