chore: fix linting issues

[ptmdmusique]

Related Issue: none

Summary

TS yells at some of the typing when I'm starting the dev server on Windows. This PR fixes those.

[ptmdmusique]

cc @paulcpederson does this seems like a valid forked PR ❓

[jcfranco]

Thanks for the PR!

I wonder why these don't show up in our setup. @ptmdmusique Can you share more info about your configuration/environment?

[ptmdmusique]

Hmmm, this is my spec

OS: Windows 10
npm version: 8.1.0
node version: 16.13.0

What config are you looking for ❓ I think the only thing I did was clone the repo, npm i then npm start and it threw me a bunch of errors on this aspect. @paulcpederson fixed Tailwind build issue on Windows a few days ago too

[jcfranco]

I think the info you've provided is a great help. Thanks!

[paulcpederson]

@ptmdmusique nice, looks good to me.

@jcfranco I have no idea why other environments don't show these errors, but they do seem like valid errors...

[jcfranco]

Oh, I forgot to ask earlier, can you share the list of errors you're seeing? Maybe linting and/or the Stencil build behaves differently based on the OS. cc @benelan

[ptmdmusique]

Ah sorry forgot to include the log, here we go

[05:34.2]  http://localhost:3334/
[05:34.2]  build, calcite, dev mode, started ...
[05:34.8]  transpile started ...
[05:35.1]  transpile finished in 261 ms
[05:35.1]  copy started ...
[05:35.1]  generate hydrate app started ...
[05:35.1]  generate lazy started ...
[05:46.2]  copy finished (4599 files) in 11.12 s
[05:57.1]  generate lazy finished in 22.08 s
[06:08.1]  generate hydrate app finished in 33.01 s

[ ERROR ]  postcss: src/components/calcite-handle/calcite-handle.css, line: 82: src/components/calcite-handle/calcite-handle.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

     L81:    --calcite-animation-timing: 300ms;
     L83:  }

[ ERROR ]  postcss: src/components/calcite-value-list-item/calcite-value-list-item.css, line: 92: src/components/calcite-value-list-item/calcite-value-list-item.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

     L91:    animation-fill-mode: both;
     L93:    animation-duration: var(--calcite-animation-timing);

[ ERROR ]  postcss: src/components/calcite-panel/calcite-panel.css, line: 286: src/components/calcite-panel/calcite-panel.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

    L285:  }

[ ERROR ]  postcss: src/components/calcite-input-message/calcite-input-message.css, line: 144: src/components/calcite-input-message/calcite-input-message.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

    L145:  :host([hidden]) {

[ ERROR ]  postcss: src/components/calcite-shell/calcite-shell.css, line: 96: src/components/calcite-shell/calcite-shell.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

     L95:  }

[ ERROR ]  postcss: src/components/calcite-stepper/calcite-stepper.css, line: 78: src/components/calcite-stepper/calcite-stepper.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

     L77:  }
     L79:  :root {

[ ERROR ]  postcss: src/components/calcite-tip-manager/calcite-tip-manager.css, line: 137: src/components/calcite-tip-manager/calcite-tip-manager.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

    L137:  :root {

[ ERROR ]  postcss: src/components/calcite-shell-center-row/calcite-shell-center-row.css, line: 89: src/components/calcite-shell-center-row/calcite-shell-center-row.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

     L89:    opacity: 0;

[ ERROR ]  postcss: src/components/calcite-flow/calcite-flow.css, line: 89: src/components/calcite-flow/calcite-flow.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

     L89:    opacity: 0;

[ ERROR ]  postcss: src/components/calcite-select/calcite-select.css, line: 206: src/components/calcite-select/calcite-select.css
           `@apply` cannot be used with `.` because `.` either cannot be found, or its actual definition includes a
           pseudo-selector like :hover, :active, etc. If you're sure that `.` exists, make sure that any `@import`
           statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used
           for classes in the same CSS tree.

    L205:      items-stretch
    L207:      relative;

[06:08.1]  build failed, watching for changes... in 33.85 s

[ptmdmusique]

I just noticed something weird. The error logs I posted above are only for scss files (which is solved by removing the trailing spaces) and the TS error only appears when I open the file (e.g.: shared-list-tests.ts for the non-existing JSEvalable import).

The TS errors used to also be reported in the npm start log but it doesn't seem to do it anymore. Maybe the build script has some problem ❓

[benelan]

If its just trailing spaces we can change an eslint rule for that. I also have a Windows machine so I will take a look

[ptmdmusique]

@jcfranco 👋 sorry I'm not used to this kind of stuff yet, but it seems like the Semantic PR / semantic (pull_request) still fails even after you changed the title to the correct format ❓ Is there anything I can do to fix that

[benelan]

@ptmdmusique can you please try merging with master by commenting /merge master

[benelan]

I re-ran the semantic PR check and it passed, there may have been some issue with it updating due to the PR being from a fork.

[ptmdmusique]

oh oops, I missed your latest message and merge from master, let's see what's the action results will be then

[paulcpederson]

@benelan @jcfranco is this good to go?

[jcfranco]

I think we can merge this one without the Screener check since it's not introducing any visual changes.

@ptmdmusique Thanks for sharing the error messages! We'll look into why these errors/warnings aren't showing up consistently.