Blueprint's CSS not compatible with Parcel 2.4.X CSS transformer

[enriquecaballero]

Unsure if you were aware, but the latest blueprint.css is not compatible with Parcel 2.4.X's CSS transformer:

🚨 Build failed.

@parcel/transformer-css: Invalid state

  /Developer/project/node_modules/@blueprintjs/core/lib/css/blueprint.css:5734:64
    5733 | }
  > 5734 | fter.bp4-active, .bp4-file-input input:disabled + .bp4-file-upload-input::after.bp4-active:hover, .bp4-file-input input.bp4-disabled + .bp4-file-upload-input
  >      |      ^
    5735 |   background:rgba(211, 216, 222, 0.7);
    5736 | }

There is a GitHub issue on the Parcel side but they seem to point the finger at Blueprint. See parcel-bundler/lightningcss#149 (comment).

[adidahiya]

@enriquecaballero which version of blueprint core?

[enriquecaballero]

@adidahiya "@blueprintjs/core": "^4.1.2"

[adidahiya]

Ok, I can see the parts of the code which would produce this weird selector:

blueprint/packages/core/src/components/forms/_file-input.scss

Line 100 in b922587

@include pt-button();

blueprint/packages/core/src/components/button/_common.scss

Line 145 in b922587

&.#{$ns}-active {

My first guess was that this code compiles differently with node-sass vs dart-sass (we migrated to the latter in v4.1), but that is not the case... the bad selectors still exist in v4.0.0: line 4417 of https://unpkg.com/browse/@blueprintjs/[email protected]/lib/css/blueprint.css

IMO dart-sass should not allow us to produce this invalid CSS, so it's probably worth filing a bug there, but we should be able to work around this in Blueprint by refactoring our Sass mixins. I'll look into a fix for v4.1.x.

[enriquecaballero]

@adidahiya 100% agreed dart-sass should have failed the compilation if the CSS was in fact invalid.

[enriquecaballero]

@adidahiya Unfortunately, this is still failing:

    5884 | }
  > 5885 | .bp4-file-upload-input::after:active, .bp4-file-upload-input::after.bp4-active{
  >      |                                                                     ^
    5886 |   background-color:#dce0e5;
    5887 |   background-image:none;
    ```

[enriquecaballero]

I was able to patch the CSS file. This is the patch file produced by Yarn:

diff --git a/lib/css/blueprint.css b/lib/css/blueprint.css
index 81f2fc0357757b98d5af49d851824f9cb4b855fd..aa180346aa4d12428758e9d100577173bb4eeabc 100644
--- a/lib/css/blueprint.css
+++ b/lib/css/blueprint.css
@@ -5882,13 +5882,13 @@ a.bp4-button.bp4-disabled{
   -webkit-box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.2), inset 0 -1px 0 rgba(17, 20, 24, 0.1);
           box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.2), inset 0 -1px 0 rgba(17, 20, 24, 0.1);
 }
-.bp4-file-upload-input::after:active, .bp4-file-upload-input::after.bp4-active{
+.bp4-file-upload-input::after:active, .bp4-file-upload-input.bp4-active::after{
   background-color:#dce0e5;
   background-image:none;
   -webkit-box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.2), inset 0 1px 2px rgba(17, 20, 24, 0.2);
           box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.2), inset 0 1px 2px rgba(17, 20, 24, 0.2);
 }
-.bp4-file-upload-input::after:disabled, .bp4-file-upload-input::after.bp4-disabled{
+.bp4-file-upload-input:disabled::after, .bp4-file-upload-input.bp4-disabled::after{
   background-color:rgba(211, 216, 222, 0.5);
   background-image:none;
   -webkit-box-shadow:none;
@@ -5897,7 +5897,7 @@ a.bp4-button.bp4-disabled{
   cursor:not-allowed;
   outline:none;
 }
-.bp4-file-upload-input::after:disabled.bp4-active, .bp4-file-upload-input::after:disabled.bp4-active:hover, .bp4-file-upload-input::after.bp4-disabled.bp4-active, .bp4-file-upload-input::after.bp4-disabled.bp4-active:hover{
+.bp4-file-upload-input:disabled.bp4-active::after, .bp4-file-upload-input:disabled.bp4-active:hover::after, .bp4-file-upload-input.bp4-disabled.bp4-active::after, .bp4-file-upload-input.bp4-disabled.bp4-active:hover::after{
   background:rgba(211, 216, 222, 0.7);
 }
 .bp4-file-upload-input:hover::after{
@@ -5972,7 +5972,7 @@ a.bp4-button.bp4-disabled{
           box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.8);
   color:#f6f7f9;
 }
-.bp4-dark .bp4-file-upload-input::after:hover, .bp4-dark .bp4-file-upload-input::after:active, .bp4-dark .bp4-file-upload-input::after.bp4-active{
+.bp4-dark .bp4-file-upload-input::after:hover, .bp4-dark .bp4-file-upload-input::after:active, .bp4-dark .bp4-file-upload-input.bp4-active::after{
   color:#f6f7f9;
 }
 .bp4-dark .bp4-file-upload-input::after:hover{
@@ -5980,23 +5980,23 @@ a.bp4-button.bp4-disabled{
   -webkit-box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.8);
           box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.8);
 }
-.bp4-dark .bp4-file-upload-input::after:active, .bp4-dark .bp4-file-upload-input::after.bp4-active{
+.bp4-dark .bp4-file-upload-input::after:active, .bp4-dark .bp4-file-upload-input.bp4-active::after{
   background-color:#252a31;
   background-image:none;
   -webkit-box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.8);
           box-shadow:inset 0 0 0 1px rgba(17, 20, 24, 0.8);
 }
-.bp4-dark .bp4-file-upload-input::after:disabled, .bp4-dark .bp4-file-upload-input::after.bp4-disabled{
+.bp4-dark .bp4-file-upload-input:disabled::after, .bp4-dark .bp4-file-upload-input.bp4-disabled::after{
   background-color:rgba(64, 72, 84, 0.5);
   background-image:none;
   -webkit-box-shadow:none;
           box-shadow:none;
   color:rgba(171, 179, 191, 0.6);
 }
-.bp4-dark .bp4-file-upload-input::after:disabled.bp4-active, .bp4-dark .bp4-file-upload-input::after.bp4-disabled.bp4-active{
+.bp4-dark .bp4-file-upload-input:disabled.bp4-active::after, .bp4-dark .bp4-file-upload-input.bp4-disabled.bp4-active::after{
   background:rgba(64, 72, 84, 0.7);
 }
-.bp4-dark .bp4-file-upload-input::after .bp4-button-spinner .bp4-spinner-head{
+.bp4-dark .bp4-file-upload-input .bp4-button-spinner .bp4-spinner-head{
   background:rgba(17, 20, 24, 0.5);
   stroke:#8f99a8;
 }