place-content/items issue

[nevolgograd]

I have simple webpack/postcss stack and my build is failing each time I use place-content or place-items properties

Here’s the error:

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'includes')

I'm using latest version of the package:

"postcss-preset-env": "^7.0.1",

PostCSS config:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-normalize'),
    require('postcss-color-mod-function'),
    require('postcss-preset-env')
  ]
};

Webpack config:

{
  test: /\.(scss|css)$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1
      }
    },
    {
      loader: 'postcss-loader'
    },
    {
      loader: 'sass-loader'
    }
  ]
}

I will be grateful for any advice!

[Antonio-Laguna]

Does any minimal code fail with that?

[nevolgograd]

@Antonio-Laguna

I can have only css file which I import in my entry and still getting same error

import 'styles/main.css';

:global {
  body {
    place-content: center;
  }
}

[Antonio-Laguna]

Thanks! Can you tell me your node version? @nevolgograd

[nevolgograd]

@Antonio-Laguna v16.13.0

[Antonio-Laguna]

@nevolgograd would it be possible to have access to your repo? This issue is similar as #225 but I'm having a hard time reproducing this.

I've created two files: index.css and main.css, within main.css I've put

:global {
  body {
    place-content: center;
  }
}

Then on index.css this is the only thing @import 'main.css';

The postcss.config.js file is like this:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-normalize'),
    require('postcss-color-mod-function'),
    require('postcss-preset-env')
  ]
};

Ran with postcss-cli like npx postcss src/index.css -o dist/output.css and had a successful output so I'm not sure what I'm missing.

[nevolgograd]

@Antonio-Laguna thanks! My repo is private, but I'll create a copy in a moment.

[nevolgograd]

@Antonio-Laguna https://github.com/nevolgograd/postcss-config-hell

[Antonio-Laguna]

Thanks for preparing this @nevolgograd ! I'll take a look soon and update you on this.

[Antonio-Laguna]

Can reproduce here at least. What I can see is that this is mixing some postcss versions which isn't fine.

All of our plugins use postcss 8 but we got postcss@7.0.39 and postcss@6.0.23 too. This all seems to come from typescript-plugin-css-modules which uses things such as postcss-filter-plugins which are not upgraded to use PostCSS 8. This last plugin seems to be 4 years old without much further changes.

I'll dig a bit more to see if this is coming from our code and if it's something we could prevent.

[armano2]

issue is somewhere else, it seem that enabling postcss-lab-function after postcss-place leads to

  align-content: undefined;
  justify-content: undefined;
  place-content: center;

and crash comes from autoprefixer

---

repro

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-lab-function'),
    require('postcss-place')({}),
  ]
};

/* index.css */
body {
  place-content: center;
}

// package.json
{
  "scripts": {
    "test": "postcss index.css -o output.css"
  },
  "devDependencies": {
    "postcss": "^8.4.1",
    "postcss-cli": "^9.0.2",
    "postcss-preset-env": "^7.0.1"
  }
}

[Antonio-Laguna]

@armano2 can't seem to repro with your use case. Seems to output just fine for me, no undefined :/

[armano2]

@armano2 can't seem to repro with your use case. Seems to output just fine for me, no undefined :/

@Antonio-Laguna i pushed it as fork https://github.com/armano2/postcss-config-hell/actions/runs/1507597183

[Antonio-Laguna]

Thanks! Will check what was different but can repro on your fork!

[armano2]

• npm dedupe seem to be solving this issue
• his seem to be related to postcss-values-parser being incorrectly hoisted
• adding "postcss-values-parser": "^6.0.1" also seem to solve this issue

in oriignal repo postcss-color-mod-function as its uses postcss-values-parse v2 and npm dosn't resolve it correctly

[Antonio-Laguna]

Thanks for investigating. That's probably why I don't get the error on my test case but happens here

Probably related to #228

[evenfrost]

FYI, Tailwind CSS build fails because of that as well, due to @tailwind utilities; using this declaration internally. Looking forward to a fix, but for now npm i postcss-preset-env@6.

[Antonio-Laguna]

@evenfrost what package is using @tailwind utilities? Could you point me at that?

[evenfrost]

@Antonio-Laguna sorry for the late reply. It's Tailwind CSS.

[Antonio-Laguna]

This should now be fixed as of https://github.com/csstools/postcss-plugins/commit/b1c4d2768179ba0d3e1f2b38e295ce8e908fa242

@nevolgograd I'd appreciate a lot if you could bump to 7.0.2 and see if it goes well

[nevolgograd]

@Antonio-Laguna since then i've changed a lot in my code, basically i removed postcss-color-mod-function plugin and it worked for me even on prev version. v7.1.0 works good as well.

[Antonio-Laguna]

Great! Thanks! Closing this issue then!