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)

Evilebot Tnawi
@evilebottnawi
@jonathantneal 383 :smile: yep, but will be great do refactor before release next version, sometimes you do regression when refactor, will be great catch them after release, because some regressions require new major release
Jonathan Neal
@jonathantneal
Oh right, 383. :smile:
Jonathan Neal
@jonathantneal
One thing I’ve noticed is that I cannot npm link within style-loader and then npm link style-loader in a project and verify the changes. I am wondering if something about the dist is now different?
This is just a theory, but I wonder if you already did a refactor since the last release, and did not update the package.json files field, maybe?
Jonathan Neal
@jonathantneal
What is the ose branch used for, @ai?
Is that the next version? Will it be major? minor? patch?
Andrey Sitnik
@ai
@jonathantneal 7.0, next major release (drop Node.js 4, 6, use ES6 without Babel, add visitor API)
Jonathan Neal
@jonathantneal
Awesome! Will you publish an @next version of the beta or RC before the full release?
I would love to rework my plugins before it is fully released.
Andrey Sitnik
@ai
I found performance regression and we are writing docs about creating plugins
when these tasks will be finished we are ready for release
To be honest, you do not need @next to test a new major update. Since we do not use Babel anymore, you can use master from GitHub in dependencies and everything will work
we do not have publish step anymore, it is so great!
Ju Demarque
@dmrqx

Hi! I have a question concerning testing components with Jest that depend on values obtained from a css file (via postcss-modules-values @value variables).

In my configuration I am using identity-obj-proxy for .modules.css files, as recommended, but it also transforms @value declarations to plain name strings with no way of recovering the actual values.

The solution I found was to mock the .module.css file into the component tests, but this way I have to mock it for all the parents of said component as well.

Does this sound "appropriate"? Is there another way of resolving jest warnings that may appear when using @value properties in JS?

Evilebot Tnawi
@evilebottnawi
@ai hi, i want to update postcss-loader to new major release (update deps, drop node@6 and etc), will be great also update postcss too, any ETA for next postcss release?
Andrey Sitnik
@ai
@evilebottnawi there is performance regression in the next release branch and I have no time to investigate it. Release it without waiting for PostCSS. I afraid the best release could be only in month or more
f0x52
@f0x52
Can I get postcss to only namespace a top-level class, and then use nesting without getting those classes namespaced as well?
I'm using it with React and my optimal usecase would be to have everything namespaced on component level, but being able to use normal classnames inside that component
kapilpipaliya
@kapilpipaliya
i am new to postcss. which plugins should i use?
i am using postcss-preset-env now
Ryan Zimmerman
@RyanZim
@kapilpipaliya It depends what you want to do. There's a plugin for just about everything
postcss-preset-env allows you to use new CSS features
kapilpipaliya
@kapilpipaliya
hi
Ryan Zimmerman
@RyanZim
There are other plugins that allow you to do other things not possible with regular, spec CSS
kapilpipaliya
@kapilpipaliya
i want to use latest technologies
which plugins you recommand?
Ryan Zimmerman
@RyanZim
postcss-preset-env is what you're looking for, in that case
kapilpipaliya
@kapilpipaliya
any other plugins i should use?
Ryan Zimmerman
@RyanZim
If you're just looking for modern CSS not yet supported in browsers, postcss-preset-env should get the job done.
kapilpipaliya
@kapilpipaliya
thanks
Ryan Zimmerman
@RyanZim
no problem, stop by anytime, happy to help!
kapilpipaliya
@kapilpipaliya
thank you
Evilebot Tnawi
@evilebottnawi
@ai thanks for answer, also i ahve some problem in npm, can you give me access to npm (https://www.npmjs.com/package/postcss-loader), thanks again
Bogdan Ponomarenko
@b-ponomarenko

Hi everyone! I can't use postcss-mixins plugin with create react app. Steps:

  1. Run npm run eject command
  2. Install postcss plugin and add configuration to webpack config:
    require('postcss-mixins', {
               mixins: {
                 clearfix: {
                   '&::after': {
                     content: '""',
                     display: 'table',
                     clear: 'both'
                   }
                 }
               }
             })
  3. Use mixin in css:

    .App {
    @mixin clearfix;
    
    text-align: center;
    }
  4. Have error:

    ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
    Syntax error: Undefined mixin clearfix (2:3)
    
    1 | .App {
    > 2 |   @mixin clearfix;
     |   ^
    3 | 
    4 |   text-align: center;

    Did anyone have this problem?

Andrey Sitnik
@ai
@evilebottnawi done
Evilebot Tnawi
@evilebottnawi
@ai thanks!
Gavin McFarland
@limitlessloop

Hi, I writing my a design token preprocessor and I’m looking at PostCSS for some inspiration on how to handle plugins in my project. I’ve always thought PostCSS has an interesting plugin architecture.

export default postcss.plugin("postcss-border-align", (opts) => {
    console.log('opts', opts);
    return root => {

    };
});

@ai are you able to explain any on how you thought of this format and briefly how it works? I presume that postcss.plugin() sets a plugin to the postcss api and what the plugin returns is in the callback function.

Andrey Sitnik
@ai
@limitlessloop postcss.plugin is just a syntax sugar to set plugin name in plugin function. A lot of developer forget to set name (or create a non-standard API for their plugin), it reduced user’s UX of using PostCSS with many different plugins
yeap, postcss.plugin callback accept options from user (from PostCSS plugins config like { plugins: [require('postcss-border-align')({ node: 'always' })] }) and return plugin function
plugin function accepts AST root and result and change AST root and\or set warnings to result
Gavin McFarland
@limitlessloop
Thank you for taking the time to explain that.

Are there any occurances in a plugin where you might want to return something other than root? If so how do you detect that, when root is user defined? In my tool users can create data structures, or a rendered template or both and I’m struggling to think what the plugin should look like. At the moment I’m leaning towards being two completely separate things.

For example

mole.plugin('plugin-name', (opts) => {
    return (model, template) => {
        model.user.name = 'Gavin'
        template = 'My name is {{user.name}}'
    }
})

Vs

mole.model('model-name', (model) => {
    return model.user.name = 'Gavin'
})

mole.template('template-name', () => {
    return 'My name is {{user.name}}'
})
Andrey Sitnik
@ai
What exact token do we talk about?
and what is model and template in the real case?
(sorry, I work much better with real examples)
Gavin McFarland
@limitlessloop
No worries. I’ll message you seperately so I don’t fill up this room.
Johannes Goslar
@ksjogo
Is there some way to recalculate parents after inserting things with atrule.replaceWith and postcss.decl? Autoprefixer crashes on some undefined parents.
Andrey Sitnik
@ai
It should recalc the parents. Maybe we have an issue with code or docs
try to see inside methods, PostCSS AST is very simple
Jonathan Neal
@jonathantneal
Blink has intent to implement CSS Modules. Is that the same as the PostCSS community created standard?