jonkemp / inline-css

Inline css into an html file.
MIT License
431 stars 84 forks source link

nested @page in @media causes errors #78

Open ryleyb opened 6 years ago

ryleyb commented 6 years ago
const inlineCSS = require('inline-css');

var input =
`<style>
  @media print {
    @page {
      .root-element {
        size: a3;
      }
    }
  }
</style>
<div class="root-element">
    Test Page
</div>`;

inlineCSS(input,{url:' '}).then(function(html) {
    console.log(html);
}).catch(function(error) {
    console.error(error);
});

Output:

Error: Error: Unexpected } (line 8, char 3)
    at module.exports (/Users/ryleyb/src/vue/node_modules/inline-css/lib/inline-css.js:69:15)
    at /Users/ryleyb/src/vue/node_modules/inline-css/lib/inlineContent.js:25:27
    at /Users/ryleyb/src/vue/node_modules/extract-css/index.js:39:16
    at /Users/ryleyb/src/vue/node_modules/batch/index.js:161:14
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:611:11)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:578:3

I don't need or expect any particular result of trying to inline this CSS. Just not an error. On my actual page, ignoring the @page would be fine.

mrbubbaz commented 6 years ago

same problem with @supports feature query. here is my code (taken from bootstrap4):

@supports (transform-style: preserve-3d) {
  .carousel-item-next,
  .active.carousel-item-right {
    transform: translate3d(100%, 0, 0);
  }
}

output:

Unhandled rejection Error: Error: Unexpected } (line 5630, char 1)
    at module.exports (/Users/simonefranchina/Documents/works/htdocs/inp/node_modules/inline-css/lib/inline-css.js:69:15)
    at /Users/simonefranchina/Documents/works/htdocs/inp/node_modules/inline-css/lib/inlineContent.js:25:27
    at /Users/simonefranchina/Documents/works/htdocs/inp/node_modules/extract-css/index.js:39:16
    at /Users/simonefranchina/Documents/works/htdocs/inp/node_modules/extract-css/node_modules/batch/index.js:161:14
    at process._tickCallback (internal/process/next_tick.js:150:11)
xinglinb commented 4 years ago

@supports 的问题解决了吗

clizSec commented 4 years ago

Happens to me too. Error: Unexpected } (line 166, char 2)\n at module.exports (/app/node_modules/inline-css/lib/inline-css.js:65:15)\n at /app/node_modules/inline-css/lib/inlineContent.js:22:27\n at /app/node_modules/extract-css/index.js:37:16