2.0.0 version postcss-import bug

[waldnercharles]

I'm not sure if this is someting that needs to be fixed on the react-toolbox side.

When I try to use postcss-import to import from react-toolbox/lib/[component]/theme.css, it is unable to find relative imports like ../helpers.css.

Are there any examples that use postcss-import using react-toolbox from npm?

[javivelasco]

Can you give more context on this? Are you using a custom webpack config? This is usually happening because there are issues on how css-modules manage the paths. In react-toolbox-themr I needed to specify from option, check here. If this is not helpful, don't worry too much. We will remove the css module import for the next release, it generates too many issues.

[razor-x]

I am getting this issue as well using postcss-brunch even though it sets the from option, see:

• https://github.com/brunch/postcss-brunch/blob/5e390397a8871aac8b60cb08ea91661471c0333d/index.js#L34
• https://github.com/brunch/postcss-brunch/blob/5e390397a8871aac8b60cb08ea91661471c0333d/index.js#L57

[waldnercharles]

I believe this is a bug with css-loader (or css-modules-loader-core) and postcss-loader. I don't have a workaround for @razor-x, but instead of composes, we could use @apply from postcss-cssnext (which is using postcss-apply). It seems to be more stable, even if it hasn't been updated in a few months.

The syntax would change from composes: reset from '../helpers.css' to something like:

//helpers.css
:root {
  --reset {
    // ...
  }
}

// input/theme.css
@import '../helpers.css'
.input {
  @apply --reset;
}

Thoughts?

[javivelasco]

This is generating a lot of issues, so I've tool @waldnercharles approach. Although the caveat is that now the CSS is not reused in the bundle, it's a good price to pay to skip these issues.

[razor-x]

I agree.

I remember at some point the plan was to distribute the package with css files already processed through postcss-import. If that is still happening then the first approach would only affect users attempting to import the unprocessed src files which should be rare and perhaps not officially supported, at least initially.