Parcel: 🐛 bootsrap 4.0.0 with PostCSS

[jaribu]

🎛 Configuration (.babelrc, package.json, cli command)

package.json

  "dependencies": {
    "autoprefixer": "7.2.5",
    "bootstrap": "4.0.0",
    "node-sass": "4.7.2",
    "parcel-bundler": "1.5.0",
    "postcss-modules": "1.1.0",
    "prismjs": "1.10.0"
  }

.postsrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

🤔 Expected Behavior

parcel build index.html working like parcel index.html

😯 Current Behavior

× C:\Users\jaribu\Desktop\dev\tfnode_modulesbootstrap\distcssbootstrap.min.css:undefined:undefined: Unknown browser major
at error (C:\Users\jaribu\Desktop\dev\tfnode_modulesbrowserslistindex.js:37:11)
at Function.browserslist.checkName (C:\Users\jaribu\Desktop\dev\tfnode_modulesbrowserslistindex.js:320:18)
at Function.select (C:\Users\jaribu\Desktop\dev\tfnode_modulesbrowserslistindex.js:438:37)
at C:\Users\jaribu\Desktop\dev\tfnode_modulesbrowserslistindex.js:207:41
at Array.forEach ()
at browserslist (C:\Users\jaribu\Desktop\dev\tfnode_modulesbrowserslistindex.js:196:13)
at Browsers.parse (C:\Users\jaribu\Desktop\dev\tfnode_modulescssnanonode_modules\autoprefixerlibbrowsers.js:44:14)
at new Browsers (C:\Users\jaribu\Desktop\dev\tfnode_modulescssnanonode_modules\autoprefixerlibbrowsers.js:39:28)
at loadPrefixes (C:\Users\jaribu\Desktop\dev\tfnode_modulescssnanonode_modules\autoprefixerlib\autoprefixer.js:56:18)
at plugin (C:\Users\jaribu\Desktop\dev\tfnode_modulescssnanonode_modules\autoprefixerlib\autoprefixer.js:62:18)
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.16, but autoprefixer uses 5.2.18. Perhaps this is the source of the error below.
(node:8272) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): BrowserslistError: Unknown browser major
(node:8272) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will termina
te the Node.js process with a non-zero exit code.

💁 Possible Solution

🔦 Context

💻 Code Sample

import 'prismjs'
import './node_modules/prismjs/plugins/autolinker/prism-autolinker.js'
import './node_modules/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js'

import './node_modules/bootstrap/dist/css/bootstrap.css'

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5.0
| Node | 8.7.0
| npm/Yarn | 5.6.0
| Operating System | Windows 7

[amPerl]

You can get bootstrap 4 working by importing ./node_modules/bootstrap/scss/bootstrap instead. However, this won't work with CSS modules enabled, as it will obfuscate the names of bootstrap classes.

[jaribu]

I tried but I have this issue :

parcel build index.html

× C:\Users\jaribu\Desktop\dev\tfnode_modulesbootstrap\scssbootstrap.scss:undefined:undefined: Cannot create property 'includePaths' on string 'scss/bootstrap.scss'
at SASSAsset.parse (C:\Users\jaribu\Desktop\dev\tfnode_modules\parcel-bundler\src\assets\SASSAsset.js:16:23)
at
(node:9436) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot create property 'includePaths' on string 'scss/bootstrap.scss'
(node:9436) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

And same issue without the argument "build"

[qunabu]

This does work for me in index.scss, note the :global (https://github.com/css-modules/css-modules#usage-with-preprocessors)

:global {

    @import "base/bootstrap-config"; // bootstrap overrides

    @import "./node_modules/bootstrap/scss/bootstrap.scss";

}

[bminer]

There is a related downstream issue with cssnano:

https://github.com/ben-eb/cssnano/issues/447

I am seeing this issue on [email protected]

[spearmootz]

I have this issue too. @qunabu suggestion worked

[samsch]

I'm not able to import bootstrap scss with css-modules enabled. I have this:

:global {
  @import "../../node_modules/bootstrap/scss/bootstrap.scss";
}

But I'm getting this build error:

🚨  /<project-root>/client/main/index.scss:376:5: Missing whitespace before :global
  374 |     color: #e83e8c;
  375 |     word-break: break-word; }
> 376 |     a > :global code {
      |     ^
  377 |       color: inherit; }
  378 |   :global kbd {

[andyfangdz]

Has there been any updates to this issue? I'm still experiencing the problems others mentioned.

[edmorley]

Is there a way to disable PostCSS / autoprefixer when using the Parcel CLI?

I was hoping to see how Parcel compared to webpack for a large project and this error is the first thing I encountered and blocks using it entirely.

[samsch]

@edmorley Just remove the modules flag from your postcss config.

[edmorley]

I don't have a PostCSS config (my equivalent webpack config doesn't use PostCSS) - I'm presuming this is a Parcel default.

[samsch]

@edmorley I don't think postcss is active without a postcss config. PostCSS doens't do anything until you configure it to, and Parcel doesn't default to adding any PostCSS functionality.

[andyfangdz]

@samsch Actually, I can confirm that I have this issue without any PostCSS config as well.

[edmorley]

I'm presuming Parcel is finding bootstrap's PostCSS config.

Ideally there would be a way to disable the "see if dependencies have their own config and if so, use that" behaviour.

[samsch]

I'm trying to reproduce, and it seem to work fine for the minimal case of just

// index.js
import 'bootstrap/dist/css/bootstrap.css';

Can you reproduce in a minimal test case?

[jpcodr]

@samsch i have the same issue, when i run parcel src/index.html works as expected, but on parcel build src/index.html throws error

Users/jpablom/devel/mypage/node_modules/bootstrap/scss/bootstrap.scss:undefined:undefined: Unknown browser major
at error (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/node_modules/browserslist/index.js:37:11)
    at Function.browserslist.checkName (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/node_modules/browserslist/index.js:320:18)
    at Function.select (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/node_modules/browserslist/index.js:438:37)
    at /usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/node_modules/browserslist/index.js:207:41
    at Array.forEach (native)
    at browserslist (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/node_modules/browserslist/index.js:196:13)
    at Browsers.parse (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/lib/browsers.js:44:14)
    at new Browsers (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/lib/browsers.js:39:28)
    at loadPrefixes (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
    at plugin (/usr/local/lib/node_modules/parcel-bundler/node_modules/autoprefixer/lib/autoprefixer.js:62:18)

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My page</title>
</head>
<body>
    <div class="message">Hello</div>
    <script src="js/index.js"></script>
</body>
</html>



md5-88e0aaaac902b0f21b923e083703702d



```css
/* scss/style.scss */
.message {
    color: red;
}



md5-d640d369b2757d4d9a52e91bc7705128



```js
//.browserslistrc
last 2 versions

[andyfangdz]

@samsch ah, yes, I forgot to mention that this only errors with build, but works fine for dev-server.

[samsch]

I do get a PostCSS error running parcel build in a minimal test case with:

// index.js
import 'bootstrap/scss/bootstrap';

.../node_modules/bootstrap/scss/bootstrap.scss:undefined:undefined: Unknown browser major
...

It only occurs for parcel build ..., not for parcel ....

[EDIT]

This isn't something I can actively look into solving in Parcel myself at the moment.

[prog-rajkamal]

I looked into this. and I saw following error message:

Your current PostCSS version is 6.0.22, but autoprefixer uses 5.2.18. Perhaps this is the source of the error below

[jeantsai]

The issue can be avoid by using Yarn's Selective Versions. For me, the following configuration in package.json does work:

  "resolutions": {
    "parcel-bundler/cssnano": "4.0.0-rc.2"
  },

Just overriding autoprefixer's does not work, because instead of autoperfixer, there is still another dep of cssnano - postcss-merge-rules - depends on the older browserslist.

It seems NPM does not support "resolutions" yet. But it is weird for missing the ability to override the version of a dependency's dependency for so long a time. In Java ecosystem, you cannot go any futher beyond the "hello world" without being able to "exclude" some dependencies from your own dependencies. Maybe it's time to switch to Yarn.

[senner007]

I'm still getting this error
I have :
import 'bootstrap/dist/css/bootstrap.min.css';

and it fails when building.

[mauriciolobo]

To be able to use bootstrap SASS, I had to create a main.scss and add the import, and in main.js I had to import the main.scss:

//main.scss
@import 'node_modules/bootstrap/scss/bootstrap.scss';

//main.js
import './main.scss';

//index.html
...
<script src="main.js"></script>

Using this approach I been able to modify some bootstrap variables (in my case, the color pallet)