Referring to other Components does't work to Parcel?

[Creepypoke]

Hi! I'm facing the next problem: referring to other components does't work for me. I investigate that processing of css-loaders of webpack and parcel works is different way(surprise-surprise :)).

Example code:

const Box = styled('main')`
    border: 4px solid lightpink;
`

const NestedElement = styled('div')`
    border: 2px solid lightseagreen;

    ${Box} > & {
        background: lightgoldenrodyellow;
    }
`

...

const App = () => (
  <Box>
    I'm wrapper
    <NestedElement>
      I'm Nested Element!
    </NestedElement>
  </Box>
)

What we have after Astroturf processing:

// Box
.cls1 {
border: 4px solid lightpink;
}

// NestedElement
@value cls1 as a0 from "App-Box.css";

.cls1 {
border: 2px solid lightseagreen;

.a0 > & {
background: lightgoldenrodyellow;
}
}

After webpack css-loader processing:

// Box
._1I3PZvwAIyGZa7bFYELb3C {
border: 4px solid lightpink;
}

// NestedElement
._1e2clFkSkwA0fB4j8zfcVv {
  border: 2px solid lightseagreen; }
  .___CSS_LOADER_IMPORT___1___:focus > ._1e2clFkSkwA0fB4j8zfcVv {
    background: lightgoldenrodyellow; }

After Parcel css-loader processing:

// Box
._cls1_891fb {
border: 4px solid lightpink;
}

// NestedElement
._cls1_1d150 {
border: 2px solid lightseagreen;
}

._a0_1d150 > ._cls1_1d150 {
background: lightgoldenrodyellow;
}

Obviously, Parceljs just pass Astroturf result as is, don't processing @value notations.

I create a little example with Parceljs + Astroturf for demo. Just run yarn && yarn start.

[jquense]

my guess is that parcel doesn't have css-modules values plugin on by default, something that is included by default in css-loader. Or it is supported, but running an older version of the tooling that doesn't support interpolating values in selectors. To be fair support for that was only just recently added to css-loader: https://github.com/webpack-contrib/css-loader/pull/894

[jquense]

looks like it uses css-modules-loader-core which really needs to have it's dependencies updated

[midler]

Hi! I have same problems. Any Ideas how to fix it?

[jquense]

the way to fix it is for someone to upgrade the postcss plugins Parcel uses