How to use with postcss-import ?

Question

How to use with postcss-import ?

grrseguin opened this issue 8 years ago · 13 comments

Hello,

I want to use several CSS files : one for to declare my custom media queries and the others for use it.

For this i use postcss-import, but postcss-custom-media doesn't work with it ?

Example :

/* declare.css */
@custom-media --small-viewport (max-width: 30em);

@import './declare.css';

@media (--small-viewport) {
  /* styles for small viewport */
}

With the files above, i get :

@custom-media --small-viewport (max-width: 30em);

and the styles for small viewport is missing !?

i try with the extensionsoption with the webpack config below, without success :-(.

  postcss: function(webpack) {
    return [
       require('postcss-import')({
        addDependencyTo: webpack
      }),
      require('postcss-custom-media')({
        extensions: {
          '--small-viewport': '(max-width: 30em)'
        }
      })

    ];
  },

If i put all in one file, everything working fine !

How to use postcss-custom-media with postcss-import ?

Answer 1 · 2016-07-19T12:42:09.000Z

Should work. Can you try postcss-import@^7.0.0 ? (not 8.x)

Answer 2 · 2016-07-19T12:54:09.000Z

Same issue with postcss-import@7.1.3 & postcss-import@7.0.0.

I used postcss-import@8.1.2

Answer 3 · 2016-07-19T13:03:09.000Z

can you add postcss-reporter to see if you have any message?

Answer 4 · 2016-07-19T13:10:03.000Z

Done ! I see :

src/components/Header/Header.css
19:3    ⚠  Missing @custom-media definition for '--small-viewport'. The entire rule has been removed from the output. [postcss-custom-media]

Answer 5 · 2016-07-20T08:09:36.000Z

Something is wrong with your setup. This should work.

Answer 6 · 2016-07-20T10:07:54.000Z

You're right. It works fine with react-static-boilerplate for example.

Thanks.

i must go in search of what is wrong in my setup.

Answer 7 · 2016-07-21T12:58:56.000Z

I don't understand why, but today with the same setup, it's works !? Surely an error of myself...

Sorry to have wasted your time.

Answer 8 · 2016-07-21T15:30:38.000Z

I go back to my comment above.

postcss-custom-media require to do the @import in the same file where you want to use the custom media query.
I reproduce the issue with cssnext.

postcss: function(webpack) {
    return [
      require('lost'),
      require('postcss-cssnext')({
        browsers: AUTOPREFIXER_BROWSERS
      }),
      require('postcss-import')({
        addDependencyTo: webpack
      }),
      require('postcss-reporter')()
    ];
}

For the first point, this is an issue ? Because i do the @import only in a root css file. Next, on transpiling, all CSS files are exported in one. But maybe this is not a good practice.

Answer 9 · 2016-07-21T19:47:53.000Z

You didn't read correctly postcss-import docs.

Answer 10 · 2016-07-22T08:37:48.000Z

OK, I read the postcss-import's readme and i managed to run postcss-custom-media & postcss-import with cssnext in changing the order of postcss-import in the PostCSS list.

Answer 11 · 2016-11-17T21:41:15.000Z

Does this work for webpack 2?

Answer 12 · 2016-11-17T21:48:42.000Z

@grrseguin What is the postCSS list you used?

Answer 13 · 2016-11-18T18:12:43.000Z

Today the list is :

    "postcss": "5.2.0",
    "postcss-cssnext": "2.8.0",
    "postcss-import": "8.1.2",
    "postcss-js": "0.1.3",
    "postcss-loader": "0.13.0",
    "postcss-reporter": "1.4.1",

But today postcss-custom-media works fine on my project. I don't know why, i have got this problem.

the 20th july it was :

    "postcss": "5.0.21",
    "postcss-cssnext": "2.7.0",
    "postcss-custom-properties": "5.0.1",
    "postcss-import": "8.1.2",
    "postcss-js": "0.1.3",
    "postcss-loader": "0.8.2",

the 22th july it was :

   "postcss": "5.1.0",
    "postcss-cssnext": "2.7.0",
    "postcss-import": "8.1.2",
    "postcss-js": "0.1.3",
    "postcss-loader": "0.9.1",
    "postcss-reporter": "1.4.1",