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)
We need somebody who will fix all other parsers 😃