Unknown word: CssSyntaxError: <css input>:2:7: Unknown word about vscode-css-variables

[vunguyentuan]

I've put the autocomplete variables on top, I hope this is the correct behavior that you are expecting

[vunguyentuan]

Hey Mads, I will take a look on your issue tonight and get back to you

…

On Mon, 21 Dec 2020 at 18:37 Mads Thines ***@***.***> wrote: Hey! Super excited about the extension. This is really a missing feature. When I trigger the suggestion I get this error in the console. Any ideas on what's wrong? Here's my settings "cssVariables.lookupFiles": [ "src/styles/base/colors.scss"] Here's the Error log from Developer Tools ERR <css input>:2:7: Unknown word: CssSyntaxError: <css input>:2:7: Unknown word at Input.error (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/input.js:113:16) at Parser.unknownWord (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:518:22) at Parser.decl (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:201:16) at Parser.other (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:115:18) at Parser.parse (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parser.js:59:16) at Function.parse (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/node_modules/postcss/lib/parse.js:11:12) at /home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/out/extension.js:46:43 at Array.forEach (<anonymous>) at Object.provideCompletionItems (/home/mthines/.vscode-server/extensions/vunguyentuan.vscode-css-variables-1.2.1/out/extension.js:42:27) at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:788:65 at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:52:1010 at new Promise (<anonymous>) at Object.t.asPromise (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:52:982) at H.provideCompletionItems (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:788:36) at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:805:242 at q._withAdapter (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:796:10) at q.$provideCompletionItems (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:805:220) at m._doInvokeHandler (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:916:926) at m._invokeHandler (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:916:618) at m._receiveRequest (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:915:201) at m._receiveOneMessage (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:914:6) at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:912:136 at l.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:46:801) at v.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:233:787) at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:1118:104 at l.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:46:801) at v.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:233:787) at t.PersistentProtocol._receiveMessage (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:238:1004) at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:235:927 at l.fire (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:46:801) at p.acceptChunk (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:231:195) at /home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:230:547 at Socket.t (/home/mthines/.vscode-server/bin/ea3859d4ba2f3e577a159bc91e3074c5d85c0523/out/vs/server/remoteExtensionHostProcess.js:240:822) at Socket.emit (events.js:223:5) at addChunk (_stream_readable.js:309:12) at readableAddChunk (_stream_readable.js:290:11) at Socket.Readable.push (_stream_readable.js:224:10) at TCP.onStreamRead (internal/stream_base_commons.js:181:23) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABXJBIQXJBNC3NFMOAUEMZLSV4XQDANCNFSM4VEDDTIA> .

[vunguyentuan]

@mthines Can you send me your src/styles/base/colors.scss? I need that to test the parser

[mthines]

Here you go.

:root {
  /// Interface
  // Primary
  --c-primary-text: #273447;
  --c-primary-base: #343f4f;
  --c-primary-light-1: #415168;
  --c-primary-light-2: #57677f;
  --c-primary-light-3: #708099;

  // Grey
  --c-grey-text: #7c8ca2;
  --c-grey-base: #a0adc0;
  --c-grey-light-1: #d6dde5;
  --c-grey-light-2: #eef1f5;
  --c-grey-light-3: #f4f6f9;
  --c-white: #ffffff;

  /// States
  // Error
  --c-error-text: #da494e;
  --c-error-base: #f7696d;
  --c-error-light-1: #ffc7c9;
  --c-error-light-2: #ffe5e6;
  --c-error-light-3: #fff5f5;

  // Alert
  --c-alert-text: #CC8B00;
  --c-alert-base: #F0B400;
  --c-alert-light-1: #fde696;
  --c-alert-light-2: #fff7db;
  --c-alert-light-3: #fffcf0;

  // Success
  --c-success-text: #21ab41;
  --c-success-base: #52d16f;
  --c-success-light-1: #acf1bd;
  --c-success-light-2: #d8f8e0;
  --c-success-light-3: #eefcfc;

  // Overlay
  --c-transparent: rgba(0, 0, 0, 0);
  --c-overlay: #{transparentize(#06333d, 0.7)};
  --c-overlay-transparent-1: #{transparentize(#06333d, 0.95)};
  --c-overlay-transparent-2: #{transparentize(#06333d, 0.88)};
  --c-overlay-light-1: #{transparentize(#ffffff, 0.75)};
  --c-overlay-dark-1: #{transparentize(black, 0.75)};
}

[vunguyentuan]

--c-overlay: #{transparentize(#06333d, 0.7)};
  --c-overlay-transparent-1: #{transparentize(#06333d, 0.95)};
  --c-overlay-transparent-2: #{transparentize(#06333d, 0.88)};
  --c-overlay-light-1: #{transparentize(#ffffff, 0.75)};
  --c-overlay-dark-1: #{transparentize(black, 0.75)};

This not valid css syntax, what do you expect when using variable --c-overlay-dark-1?

[vunguyentuan]

Ok, Let me try to use csstree parser instead of postcss parser. I think it should solve this issue

[mthines]

--c-overlay: #{transparentize(#06333d, 0.7)};
  --c-overlay-transparent-1: #{transparentize(#06333d, 0.95)};
  --c-overlay-transparent-2: #{transparentize(#06333d, 0.88)};
  --c-overlay-light-1: #{transparentize(#ffffff, 0.75)};
  --c-overlay-dark-1: #{transparentize(black, 0.75)};

This not valid css syntax, what do you expect when using variable --c-overlay-dark-1?

It's valid SCSS syntax, and it looks like this should works with SCSS as well?

[vunguyentuan]

@mthines Can you check the new version?, I just published.

[mthines]

It now finds the variables, and there's no error in the console, but the autocompleting seems a bit weird?

See video :)
https://user-images.githubusercontent.com/16097850/103015829-5ff4c680-4541-11eb-9bc7-75ed0531abef.mp4

[mthines]

It works great now!
Good job mate 💪