bootstrap v4 breaks postcss-preset-env

[thescientist13]

In this repo as part of the upgrade to Greenwood v0.27.0, this project choose to use extendConfig
AnalogStudiosRI/www.analogstudios.net#80

It was revealed that there is a big compatibility issue between Bootstrap v4 and plugin-preset-env. When running the build, the page wouldn't load and this is seen in the terminal

  CssSyntaxError: <css input>:1:1: Unknown word
      at /Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/bootstrap/dist/css/bootstrap.css:5582:3
      at Input.error (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss/lib/input.js:148:16)
      at ValuesParser.unknownWord (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss/lib/parser.js:522:22)
      at ValuesParser.unknownWord (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/ValuesParser.js:195:15)
      at ValuesParser.other (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/ValuesParser.js:110:10)
      at ValuesParser.parse (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/ValuesParser.js:135:16)
      at parse (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/index.js:21:12)
      at Function.fromTokens (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/nodes/Func.js:177:20)
      at ValuesParser.unknownWord (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/ValuesParser.js:152:12)
      at ValuesParser.other (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/ValuesParser.js:110:10)
      at ValuesParser.parse (/Users/owenbuckley/Desktop/www.analogstudios.net/node_modules/postcss-values-parser/lib/ValuesParser.js:135:16)

Which lands on this line the Bootstrap source code (5582)

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);

Not sure what much can be done? Tried googling but didn't really get any hits. The project is on an alpha version of Bootstrap so maybe we could try upgrading? 😅

FWIW, using extendConfig in another project using Tailwind seems to work fine. 🤷‍♂️

---

Temporary workaround is just add postcss-import to the project's custom postcss.plugin.js manually, eg

export default {
  plugins: [
    (await import('postcss-import')).default,
    (await import('postcss-nested')).default
  ]
};

[thescientist13]

Should see if I can make a sample repro repo.

[thescientist13]

With our custom CSS minifier, this is this output, but again, I think this is just code that I want to believe is not part of newer versions of Bootstrap :D

Parse error: ")" is expected
 5224 |  max-width: 100%;
 5225 |  margin: 0;
 5226 |  filter: alpha(opacity=0);
------------------------------^
 5227 |  opacity: 0;
 5228 |}
Parse error: Unexpected input
 6960 |  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
 6961 |  background-repeat: repeat-x;
 6962 |  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#0000…
-----------------------^
 6963 |}
 6964 |.carousel-control.right {
Parse error: Unexpected input
 6970 |  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
 6971 |  background-repeat: repeat-x;
 6972 |  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#8000…
-----------------------^
 6973 |}
 6974 |.carousel-control:focus, .carousel-control:hover {
Parse error: ")" is expected
 5224 |  max-width: 100%;
 5225 |  margin: 0;
 5226 |  filter: alpha(opacity=0);
------------------------------^
 5227 |  opacity: 0;
 5228 |}
Parse error: Unexpected input
 6960 |  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
 6961 |  background-repeat: repeat-x;
 6962 |  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#0000…
-----------------------^
 6963 |}
 6964 |.carousel-control.right {
Parse error: Unexpected input
 6970 |  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
 6971 |  background-repeat: repeat-x;
 6972 |  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#8000…
-----------------------^
 6973 |}
 6974 |.carousel-control:focus, .carousel-control:hover {

[thescientist13]

meh, probably just not going to use bootstrap on the next version of my site, so can close this one.