Cannot use `:` (colon) in variable values

[FelixZY]

I'm using this plugin to have a SSOT for my selector:

$selector: .my-component;

$selector {
  /* ... */
}

However, due to the way I split my code, I would like to do the following:

$selector: .my-component:disabled;

$selector {
  /* ... */
}

Unfortunately this causes my build to fail:

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:29) postcss-import: /<...>/selector.css Missed semicolon

> 1 | $selector: .my-component:disabled;
    |                             ^
  2 | 

    at processResult (/<...>/node_modules/webpack/lib/NormalModule.js:758:19)
    at /<...>/node_modules/webpack/lib/NormalModule.js:860:5
    at /<...>/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /<...>/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/<...>/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/<...>/node_modules/postcss-loader/dist/index.js:102:7)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I have attempted:

1. to use \u003A instead of :
2. quoting .my-component:disabled (both single and double quotes)
3. using an escape character (\:, \\:, $:)

However, none of these attempts have succeeded. Most make the above error go away, but instead cause the selector to fail.

Any ideas how to use colons in variable values, for cases where the variable is used as a selector?

[ai]

I don’t know a way to do it right now.

We can add some escape code. How \u003A works right now?

[FelixZY]

Right now, \u003A produces .my-component\u003Adisabled

[ai]

Can you send PR to replace \u characters on inserting the variable value?

[FelixZY]

Sure, I'll take a look. Will get back to you at the end of next week at the latest, probably sooner.

[FelixZY]

@ai PR created

[ai]

The fix was released in 7.0.