question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scss with format fragment and prefix function

See original GitHub issue

Hi, I use your plugin in almost every project and like it very much, thanks for that. Now I wanted to test in scss/css fragments, but unfortunately the prefix function is not executed there.

Expected behavior

$svg-sprites: (
    'sprite-client-general-check': '/build/base/spritemap.svg#sprite-client-general-check' 
)

Actual behavior

$svg-sprites: (
    'sprite-client-general-check': "/build/base/spritemap.svg#(sprite) => {
                let segments = sprite.split(path.sep);
                const index = segments.indexOf('assets')

                if (index) {
                    // removes all segments before theme name and the last
                    segments = segments.slice(index - 1, segments.length - 1);
                    // removes segments for asset and icons
                    segments.splice(1, 2);
                }

                return `sprite-${segments.join('-')}-`
            }sprite-client-general-check",

System information svg-spritemap-webpack-plugin: ^3.8.3 => 3.8.3

Minimal reproduction

path: 'htdocs/web/themes/**/assets/icons/**/*.svg',
config: {
        output: {
            filename: 'spritemap.svg',
            svgo: svgoConfig,
            chunk: {
                name: 'spritemap',
                keep: false
            },
        },
        sprite: {
            prefix: (sprite) => {
                let segments = sprite.split(path.sep);
                const index = segments.indexOf('assets')

                if (index) {
                    // removes all segments before theme name and the last
                    segments = segments.slice(index - 1, segments.length - 1);
                    // removes segments for asset and icons
                    segments.splice(1, 2);
                }

                return `sprite-${segments.join('-')}-`
            },
            idify: (filename) => filename.replace(/[\s]+/g, '-'),
            gutter: 0,
            generate: {
                title: true,
                symbol: true,
                use: true,
                view: true
            }
        },
        styles: {
            filename: 'svg-sprites.scss',
            format: 'fragment',
            keepAttributes: true,
            variables: {
                sprites: 'svg-sprites',
                sizes: 'svg-sizes',
                variables: 'svg-variables',
                mixin: 'sprite'
            }
        }
    }

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
refszcommented, Feb 6, 2021

Hi @cascornelissen , thanks for your quick reply. The fragment looks correct but the key has changed and is without prefix. I think it was with a prefix before that. Even if you configured data as the format.

$svg-sprites: (
    'check': "/build/svg/spritemap.svg#sprite-client-general-check"
)
0reactions
cascornelissencommented, Feb 16, 2021

This change was included in 3.9.0 🚀

Read more comments on GitHub >

github_iconTop Results From Across the Web

Sass: @import
Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining ......
Read more >
document - CSS: Cascading Style Sheets - MDN Web Docs
The @document CSS at-rule restricts the style rules contained within it ... url-prefix() , domain() , and media-document() functions can be ...
Read more >
Working with Fragments in Thymeleaf - Baeldung
Learn how to create reusable view components with Thymeleaf fragments to simplify template management.
Read more >
SASS Mixin Syntax for '$' Prefix [duplicate] - Stack Overflow
So all I need to know really is how I would format this line in Sass so that it spits out the passed...
Read more >
Language injections | IntelliJ IDEA Documentation - JetBrains
When you inject a language (such as HTML, CSS, XML, RegExp, ... A language fragment may be combined with a prefix and a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found