Global import behaviour between v2 and v3 giving module names to classes.

[samkelleher]

Hello, I'm not sure if this is an intended change or a bugfix, but I have an example of a change in the way globals are imported when changing between version 2 and 3 of postcss-partial-import. V2 basically ignored the import for further processing, while v3 treats it as normal and transforms the css.

Consider a component that is using the react-slick library within it. The library write elements that have global class names, thus its css style sheet needs importing globally.

In MyCarouselComponent.css I have

:global {
    @import '../../../node_modules/slick-carousel/slick/slick.css';
}

In version 2 of postcss-partial-import, the CSS output is as expected. The slick.css file is basially just concatenated in.

V2Output.css:

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

However, V3Output.css, the imported file is now being transformed

.slick-slick-slider-aJXC1
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

Notice how the classnames have been transformed. However the actually css is identical to the source file, indents and all; just the classnames have been renamed.

Is this change intentional, and/or can it be configured? Otherwise I'll have to stay on v2 as I basically need this external css to be imported 'as is'.

[frenzzy]

It seems sass-like import was broken after refactoring:

/* partial.css */
.inner {
  color: orange;
}

/* style.css */
.outer {
  @import './partial.css';
  background: yellow;
}

/* actual-output.css */
.outer {
  background: yellow;
}

/* expected-output.css */
.outer {
  .inner {
    color: orange;
  }
  background: yellow;
}

[pelhage]

My CSS that I was importing inside a :global { } is now also not functioning after upgrading to v3.

Haven't spent too much time investigating details, but just wanted to track this issue for details

[eriklharper]

I'm also having this exact same issue, and exact same use case. I write React components that depend on third party CSS, like Leaflet or DraftJS, which have their own css base styles that I need to import and then override to match the styling of my app's design. I filed an issue on postcss-smart-import complaining about this exact same problem there as well.

My expectation is that the raw contents of the import would drop anywhere on the page regardless of the order in the source file. Since we're pre-processing CSS we aren't concerned with conforming to the official W3C spec on nesting, like the postcss-import package is trying to do.

What we effectively want is dead simple find and replace of import statements with the raw contents of the files being imported.

[eriklharper]

I just tried installing 2.1.0 but I still am getting output like this:

before:

.default {
  :global {
    @import "./foo.css";
    .App {
      background-color: red;
      text-align: center;
    }
  }
}

after:

._1C_g8FWMYbrTSexPb1Kwee {

  /* contents of foo.css */
  ._3l9_w563kMXqJUSYmgAGcm {
    background: silver;
  }
}

._1C_g8FWMYbrTSexPb1Kwee .App {
  background-color: red;
  text-align: center;
}

The :global block just ain't workin for the @import