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
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?
Evilebot Tnawi
@evilebottnawi
And yes and no, we will have css parser and api for working with css on browser side
and pure css-in-js implementation :smile:
Jonathan Neal
@jonathantneal
Is part of the plan to expose the CSS parser?
That’s great news. Now that I understand they are different from what I’m reading right now — I don’t see any mention of a parser let alone a loose parser. I see functionality that reads a CSS file as CSS (not much different from using <link>)
Bohdan Ptyts
@bohdanbirdie
Hey fellas
Jonathan Neal
@jonathantneal
Hello
Bohdan Ptyts
@bohdanbirdie

I wonder if there is a chance that someone can help me with the issue that I'm already struggling for two days
I'm working on the project that is using the https://github.com/gajus/react-css-modules
We're having the app, but also separate repo for the components with pretty much the same webpack config
Due to the development of new additional app that will also use those components we decided to migrate from react-css-modules to recommended https://github.com/gajus/babel-plugin-react-css-modules (same author)
At the moment we're using BEM style with SCSS (so I have those sassy imports like _filename.scss)
Seems like I migrated more or less successfully, but some styles are missing, so it's actually those that are imported inside the SCSS files

They use as example this snippet

"plugins": [
    ["postcss-import-sync2", {
      "path": ["src/styles", "shared/styles"]
    }],
    "postcss-nested"
  ]

I tried to, updated path and etc, but it could not find the imported files

I already tried several import plugins, but it didn't work. It's either failing on the Use process(css).then(cb) to work with async plugins or on Error: Failed to find

I would really appreciate a little bit of help here, will die out of this soon
Snippet from my .babelrc
[
      "react-css-modules",
      {
      "handleMissingStyleName": "warn",
      "generateScopedName": "[local]___[hash:base64:5]",
      "filetypes": {
        ".scss": {
          "syntax": "postcss-scss",
          "plugins": [
            ["postcss-import-sync2", {
              "path": ["lib/scss"],
            }],
            [
              "postcss-nested",
              { "preserveEmpty": true }
            ]
          ]
        }
      }
    }],
Evilebot Tnawi
@evilebottnawi
@jonathantneal under api parser exists, you can get rules and property and values, and some other stuff
Bohdan Ptyts
@bohdanbirdie
And from the webpack SCSS match
{
                        loader: 'postcss-loader?parser=postcss-scss',
                        options: {
                            plugins: [
                                autoprefixer,
                                cssnano(),
                            ],
                        },
                    },
Eric
@sliceofbytes
I have these rules but for some reason it's still removing the items I've listed in ignore
    rules: [
      {
        test   : /\.scss$/,
        loader : 'postcss-loader',
        options: {
          ident  : 'postcss',
          plugins: () => [
            require('postcss-short')(),
            require('postcss-uncss')({
              report:true,
              html: ['src/**/*.html'],
              ignore: ['.scrubBar', '.active', '.locked', '.completed', '.activity-topics-item.active']
            }),
          ]
        }
      }
    ]
Am I configuring this correctly, it seems to be working great for removing the unused css that it can see in the dom, the ignored classes are not visible by just parsing the html alone
Alex Hutton
@alex-hutton
Hi, I'm looking for an example using rollup to define some variables for colour hex codes to be injected into a css file.
UmbrellaC0rp
@UmbrellaC0rp
Does this still use LostGrid
.. With floats, or is there a similar mixin that takes the fraction and outputs css using the new css grid system?
Anjul
@anjultramp_twitter
Hi could some please share the HTML or CSS for a scenario where I can adjust the size the of Logo and header together . And they automatically change their size as per the Browser Window Size.
Means they are responsive
Gavin McFarland
@limitlessloop
Hi, quick question regarding postcss-import if I want to reference several files from a node module do I just use an array inside package.json. For example:
{
  "style": [“dist/main.css”, “dist/typography.css”, “dist/colors.css”],
}
@import 'main'
@import 'typography'
@import 'colors'
SumitKKundu
@SumitKKundu
Hi guys!
this is Sumit and I am new in PostCSS
Can u pls help me to set up PostCSS with Parceljs
Andrey Sitnik
@ai
@SumitKKundu what problem do you have?
padevone
@padevone
Hi! How I can use color-mod/color function in postcss-prest-env? Early I used this from cssnext, but now this is deprecated. For examle: color-mod(#ebeeef lightness(52%)).
Andrey Sitnik
@ai
@padevone unfortunatelly, csswg removed color-mod function, so we can’t polyfill it anymore since there is no standard :(
but you can use color-mod() function (as non-standard function) by manually adding this plugin https://github.com/postcss/postcss-color-function