postcss-inline-svg: Syntax is not SCSS-compatible

You can start using PostCSS any time you want on any existing project, even with Sass, @ai once said. Just try it and you’re gonna like it! And then I tried, using sass with postcss and autoprefixer, inlinesvg plugins…

.pipe(sass().on('error', sass.logError))
.pipe(postcss([
    autoprefixer,
    inlinesvg
]))

To Inline SVG:

&--twitter {
    background-image:svg-load(../assets/images/twitter.svg, fill:#FFF);
    }

And then… oops, it’s not CSS-compatible syntax.

Error in plugin 'sass'
Message:
    src/styles/blocks/social.scss
Error: error reading values after (
        on line 39 of src/styles/blocks/social.scss
>>          background-image:svg-load(../assets/images/twitter.svg, fill:#FFF);
   ----------------------------^

So I’m actually forced to use the whole PostCSS ecosystem to be able to just inline SVG. Of course I could make it simpler and compatible:

background-image:svg-load('../assets/images/twitter.svg');

But in this case I have to put in in single quotes and I can’t use fill: #FFF thing which makes it less useful. So I wonder:

  • Where are your promises @ai?
  • Is it possible to make inline-svg’s syntax CSS-compatible?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 28 (9 by maintainers)

Most upvoted comments

We need somebody who will fix all other parsers 😃