Erreur lors d'une déclaration @import , avec spécification de média

[RomainPennacchio]

Bonjour,
J'ai une erreur de variable undefined, lorsque j'appelle des feuilles de style via @import en spécifiant le média.
Si j'enlève le média, ça marche bien !

.pleeeasesrcc

{
    "in": "main.master.css",
    "out": "main.css",
    "autoprefixer": true,
    "filters": true,
    "rem": true,
    "opacity": true,
    "pseudoElements": true,
    "import": true,
    "mqpacker": true,
    "minifier": true,
    "sourcemaps": true,
    "next": {
        "customProperties": true
    }
}

main.master.css

@charset "UTF-8";
@import "_variable.css";
@import "_font.css" screen;
@import "_structure.css" screen;

J'ai ouvert un ticket sur la page du package node-css-mqpacker, mais apparemment leur script ne touche pas à la règle @import.

[iamvdo]

Tu peux me donner l'erreur exacte, et le contenu des fichiers CSS si possible?

[iamvdo]

Je n'arrive pas à reproduire l'erreur, tu utilises quelle version de Pleeease?

pleeease --version

[RomainPennacchio]

Lorsque je lance la commande pleeease compile.
J'ai une erreur dans le fichier css-mqpacker.js à la ligne 13 :

TypeError: Cannot call method `lastIndexOf` of undefined
at _fuseStrings (css-mqpacker.js:13:11)
at css-mqpacker.js:36:40
at Root.Container.each (container.js:88:20)
at _process (css-mqpacker.js:27:7)
at PostCSS.process (postcss.js:34:28)
at Pleeease.process (index.js:89:27)
at Function.pleeease.process (index.js:110:34)
at compile (cli.js:133:29)
at cli.js:81:13
at multi-glob.js:27:9

Pour la version, c'est la 1.1.0.

[iamvdo]

Il me faut le contenu de tes fichiers importés, là où il y a une mq au moins ;)

[RomainPennacchio]

Voici le contenu des fichiers test :

_variable.css

@charset "UTF-8";
:root {
    --main-bg-color: #efefef;
    --main-fg-color: #222;
}

_font.css

@charset "UTF-8";
@font-face {
  font-family: 'cantarell';
  src: url("font/cantarell-regular-webfont.eot");
  src: url("font/cantarell-regular-webfont.eot?#iefix") format("embedded-opentype"), url("font/cantarell-regular-webfont.woff") format("woff"), url("font/cantarell-regular-webfont.ttf") format("truetype"), url("font/cantarell-regular-webfont.svg#cantarellregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {
    font: 16px/1.25 Verdana, Geneva, sans-serif;
}
@media (min-width: 480px) {
    body {
        font-family: "cantarell", Verdana, sans-serif;
    }
}

_structure.css

@charset "UTF-8";
@media (min-width: 320px) {
    body {
        background: #222;
        color: #fff;
    }
}
@media (min-width: 480px) {
    body {
        background: var( --main-bg-color );
        color: var( --main-fg-color );
    }
}

[iamvdo]

J'ai pu reproduire le bug.
Il y peut-être un problème, mais avant:

• si tu ajoutes @charset dans chaque fichier, il apparaîtra N fois au final, donc pas utile
• importer des fichiers CSS qui contiennent des MQs dans des MQs (media-queries imbriquées) n'est pas interdit mais:
  • je ne suis pas sur que c'est ce que tu souhaites
  • certains navigateurs ne les interprètent pas (Safari et IE par ex.)

Je continue de tester pourquoi ça ne fonctionne pas...

[iamvdo]

Donc c'est bien un problème du coté de css-mqpacker et hali2u semble l'avoir corrigé: hail2u/node-css-mqpacker#19
Dès qu'une nouvelle version sort, je l'intégrerai à Pleeease et ton problème sera résolu, mais tes media-queries imbriquées ne seront toujours pas fusionnées. ;)

[iamvdo]

Un petit npm update -g pleeease devrait faire l'affaire! ;)

[RomainPennacchio]

Super ça marche ! 👍
Merci pour ton aide !