Question: Style tag gets stripped out

[moltar]

Do you want to request a feature, report a bug or ask a question? Question

What is the current behavior? <style> tag gets stripped out.

What is the expected behavior? Leave <style> tag intact.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. Not sure if a bug yet.

The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).

Using the following SVG to pass thru the loader with default options.

<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:#DB7C34;}
	.st1{fill:#3961A8;}
</style>
<path class="st0" d="M77,42c-0.2,0-0.4,0-0.5-0.1c-0.3-0.2-0.5-0.6-0.5-1l0.8-4.8H76c-2.8,0-5-2.2-5-5V17c0-2.8,2.2-5,5-5h26  c2.8,0,5,2.2,5,5v14c0,2.8-2.2,5-5,5H85.3l-7.7,5.8C77.4,41.9,77.2,42,77,42z M76,14c-1.7,0-3,1.3-3,3v14c0,1.7,1.3,3,3,3h2  c0.3,0,0.6,0.1,0.8,0.4c0.2,0.2,0.3,0.5,0.2,0.8l-0.6,3.5l6-4.5c0.2-0.1,0.4-0.2,0.6-0.2h17c1.7,0,3-1.3,3-3V17c0-1.7-1.3-3-3-3H76z  "/>
	<path class="st1" d="m90 39c-0.6 0-1 0.4-1 1v34c0 2.2-1.8 4-4 4h-70c-2.2 0-4-1.8-4-4v-42c0-2.2 1.8-4 4-4h14c0.6 0 1-0.4 1-1s-0.4-1-1-1h-14c-3.3 0-6 2.7-6 6v42c0 3.3 2.7 6 6 6h28.3l-2 6h-4.3c-0.6 0-1 0.4-1 1s0.4 1 1 1h26c0.6 0 1-0.4 1-1s-0.4-1-1-1h-4.3l-2-6h28.3c3.3 0 6-2.7 6-6v-34c0-0.6-0.4-1-1-1zm-46.6 47l2-6h9.2l2 6h-13.2z"/>
</svg>

It you don't want to create a repository - create a gist with multiple files

SVG Demo: https://gist.github.com/moltar/d63b90f2e8be252dff26f4b99b3c6103

Please tell us about your environment:

• Node.js version: v9.8.0
• webpack version: 4.3.0
• svg-sprite-loader version: latest
• OS type & version: macOS, Chrome

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

N/A

[kisenka]

Your svg works for me. Maybe you use svgo-loader which strips style tags?

[alxpsr]

I got similar problem in runtime. In compiled external sprite <style> exist, but in browser not exist. Whats wrong? 🤔

//== Webpack rules

test: /\.svg$/,
  use: [{
      loader: 'svg-sprite-loader',
      options: {
        extract: true,
      }
} ]

//== Compiled static sprite piece

<symbol viewBox="0 0 23.3 6.9" id="context-menu_gray">
    <style type="text/css">
        #context-menu_gray .st0 {
            fill: none;
            stroke: #BDC0C3;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
        }
    </style>
    <g>
        <circle class="st0" cx="3.5" cy="3.5" r="2.7"></circle>
        <circle class="st0" cx="11.7" cy="3.5" r="2.7"></circle>
        <circle class="st0" cx="19.9" cy="3.5" r="2.7"></circle>
    </g>
</symbol>

//== Svg from browser

<svg viewBox="0 0 23.3 6.9" id="context-menu_gray" width="100%" height="100%">
<g>
	<circle class="st0" cx="3.5" cy="3.5" r="2.7"></circle>
	<circle class="st0" cx="11.7" cy="3.5" r="2.7"></circle>
	<circle class="st0" cx="19.9" cy="3.5" r="2.7"></circle>
</g>
</svg>

[dmitry]

@alxpsr @moltar have you solved this issue? Looks like it's somehow related to the css loaders, which might strip out the style tags.

[kisenka]

I can't reproduce an error. In both cases (normal & extract mode) style tags are presented in resulting code:

Could someone create a repo with reproducible error please?