@values and postcss-inline-svg

[edygar]

Imported values are not being parsed correctly with postcss-inline-svg (issue).

I'm trying to use a @value in the selector inside @svg-load but currently it doesn't work,the hash is propagated to SVG instead (eg: i__const_borderColor_288).

The CSS Sources:

/* colors.css */
@value main-brand-color: #BB9256;
@value secondary-brand-color: #161D2F;
@value featured-light-text-color: main-brand-color;

/* styles.css */
@value secondary-brand-color as bgColor from "styles/colors";
@value featured-light-text-color as borderColor from "styles/colors";

@svg-load bgTitle1 url('./image.svg') {
  polygon, line {
    stroke: borderColor;
    fill: bgColor;
  }
}
@svg-load bgTitle2 url('./image-2.svg') {
  polygon, line {
    stroke: borderColor;
    fill: bgColor;
  }
}

.bgTitle {
  margin: 0 auto;
  padding: 1px 0 1px;
  background-image:
    svg-inline(bgTitle1),
    svg-inline(bgTitle2);
  background-position: 0% 60%, 100% 60%;
  background-repeat: no-repeat;
}

As for the build code, it's too long (weback), so here is what matters:

module.exports = {
  module: {
    loaders: [
      // …
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader?' + [
            'modules',
            'sourceMap',
            'importLoaders=1',
            'localIdentName=[path]_[name]_[local]_[hash:base64:5]'
          ].join('&') ,
          'postcss-loader'
        ]
      },
      {
        test: universalizationPlugin.regular_expression('images'),
        loader: 'url-loader?limit=10240', // any image below or equal to 10K will be converted to inline base64 instead
      }
    ]
  },
  // … 
  'postcss': [
    // require('postcss-clearfix'),
    // require('postcss-nested'),
    // require('postcss-cssnext')({
    //   features: {
    //     rem: { rootValue: 10 }
    //   }
    // }),
    require('postcss-inline-svg')()
  ],
}

The resuting CSS:

.src-components-Featured-_styles_bgTitle_2AG_K {
  margin: 0 auto;
  padding: 1px 0 1px;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E %3C!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E %3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 522.152 108.489' style='enable-background:new 0 0 522.152 108.489;' xml:space='preserve'%3E %3Cg%3E %3Cpolygon fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:4.1396;stroke-miterlimit:10;' points='2.089,52.769 2.089,106.448 522.152,106.448'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='2.089' y1='71.136' x2='522.152' y2='106.448'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='2.089' y1='88.764' x2='519.476' y2='106.121'/%3E %3Cpolygon fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:4.1396;stroke-miterlimit:10;' points='75.328,3.013 75.328,59.692 520.814,106.284'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='75.328' y1='22.38' x2='520.814' y2='106.284'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='75.328' y1='42.008' x2='518.138' y2='105.957'/%3E %3C/g%3E %3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E %3C!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E %3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 522.152 108.489' style='enable-background:new 0 0 522.152 108.489;' xml:space='preserve'%3E %3Cg transform='matrix(-1 0 0 1 522.152 0)'%3E %3Cpolygon fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:4.1396;stroke-miterlimit:10;' points='2.089,52.769 2.089,106.448 522.152,106.448'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='2.089' y1='71.136' x2='522.152' y2='106.448'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='2.089' y1='88.764' x2='519.476' y2='106.121'/%3E %3Cpolygon fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:4.1396;stroke-miterlimit:10;' points='75.328,3.013 75.328,59.692 520.814,106.284'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='75.328' y1='22.38' x2='520.814' y2='106.284'/%3E %3Cline fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='75.328' y1='42.008' x2='518.138' y2='105.957'/%3E %3C/g%3E %3C/svg%3E");
  background-position: 0% 60%, 100% 60%;
  background-repeat: no-repeat;
}

The resulting SVG:

<?xml version='1.0' encoding='iso-8859-1'?> <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'> <svg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 522.152 108.489' style='enable-background:new 0 0 522.152 108.489;' xml:space='preserve'> <g transform='matrix(-1 0 0 1 522.152 0)'> <polygon fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:4.1396;stroke-miterlimit:10;' points='2.089,52.769 2.089,106.448 522.152,106.448'/> <line fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='2.089' y1='71.136' x2='522.152' y2='106.448'/> <line fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='2.089' y1='88.764' x2='519.476' y2='106.121'/> <polygon fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:4.1396;stroke-miterlimit:10;' points='75.328,3.013 75.328,59.692 520.814,106.284'/> <line fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='75.328' y1='22.38' x2='520.814' y2='106.284'/> <line fill='i__const_bgColor_14' stroke='i__const_borderColor_16' style='stroke-width:1.6559;stroke-miterlimit:10;' x1='75.328' y1='42.008' x2='518.138' y2='105.957'/> </g> </svg>

[markdalgleish]

Could you please post a working example somewhere we can see it?

[edygar]

Yes, sure, here it is: https://github.com/edygar/css-loader-issues-214

npm install
npm run dev

And then access localhost:3000

Take a look at src/containers/App/styles.css, there are three cases showing what's happening…

[edygar]

Any news?

[sanpoChew]

I've just run into this issue, @edygar did you ever figure it out?

[sanpoChew]

I found a fix here: css-modules/postcss-modules-values#5 (comment)