Cannot use `:` (colon) in variable values

[Felix Zedén Yverås]

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?

[Andrey Sitnik]

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

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

[Felix Zedén Yverås]

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

[Andrey Sitnik]

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

[Felix Zedén Yverås]

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

[Felix Zedén Yverås]

@ai PR created

[Andrey Sitnik]

The fix was released in 7.0.