ParseError: Identifier `deep` is expected about svelte-windicss-preprocess HOT 34 CLOSED

yes, i might know the issue here. not sure if beta.9 (ETA later today) will fix it.
Please post any new info and issues here as well

from svelte-windicss-preprocess.

@OysterD3 issue 2 & 3 are caused by single line comments in your style.
currently only /* */ are supported by windicss.. upstream windicss will support // in the future..

from svelte-windicss-preprocess.

can you explain the bug a bit more? What does it mean? Never saw this. Could you provide source and converted output somehow?

from svelte-windicss-preprocess.

Here is my preprocess config:

// ...
preprocess = [
  sveltePreprocess.typescript(),
  sveltePreprocess.scss(),
  windicssPreprocess.preprocess({
    config: tailwindConfig,
    compile: true,
    prefix: "windi-", // set compilation mode style prefix
    globalPreflight: true, // set preflight style is global or scoped
    globalUtility: true, // set utility style is global or scoped
  }),
];

The error I mentioned, it was thrown from csstree, which svelte is depending on it.
If I remove windicssPreprocess from the array, it works fine.

// ...
// working example
preprocess = [
  sveltePreprocess.typescript(),
  sveltePreprocess.scss(),
];

Now I am having another error.
We have packaged our components as open-source

[!] (plugin svelte) ParseError: Unterminated string constant
node_modules/@responsive-ui/label/src/Label.svelte
 8: </script>
 9: 
10: <label class="responsive-ui-label {className" for={forName} {form} {style}>
                                                ^
11:   {label}
12: </label>
ParseError: Unterminated string constant

Not sure whether this is related to #35

from svelte-windicss-preprocess.

https://github.com/windicss/svelte-windicss-preprocess/releases/tag/v3.0.0-beta.9

from svelte-windicss-preprocess.

The issue for ParseError: Identifier `deep` is expected exists, beta.9 doesn't fix.

from svelte-windicss-preprocess.

@OysterD3 which component do you have it in?

from svelte-windicss-preprocess.

@OysterD3 which component do you have it in?

Issue 1

@responsive-ui/loader

# 1.1
[!] (plugin svelte) ParseError: Unterminated string constant
node_modules/@responsive-ui/loader/src/Loader.svelte
 7:   <div class="responsive-ui-loader" in:fade out:fade>
 8:     <div
 9:       class="responsive-ui-loader__spinner responsive-ui-loader__spinner--{size"
                                                                                   ^
10:     />
11:   </div>

@responsive-ui/input

# 1.2
[!] (plugin svelte) ParseError: Unterminated string constant
node_modules/@responsive-ui/input/src/Input.svelte
20: <input
21:   {...$$restProps}
22:   class="responsive-ui-input {className"
                                           ^
23:   class:responsive-ui-input--bordered={bordered}
24:   bind:this={ref}

Not sure whether because of this 6b7fdad doesn't accept other variables name

Issue 2

[!] (plugin svelte) ParseError: Identifier `deep` is expected
apps/web/src/pages/movie/cinemas/index.svelte
342:   align-items: center;
343: }
344: .cinema-helper .filter // p {
                             ^
345:   //   color: var(--color-light-grey, #b9b9b9);
346:   //   padding-right: 10px;

This is how I wrote my style (lang=scss)

.cinema-helper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    // ...

    .filter {
      display: flex;
      justify-content: center;
      align-items: center;
      // p {
      //   color: var(--color-light-grey, #b9b9b9);
      //   padding-right: 10px;
      // }
      
      // ...
    }
  }

Issue 3 (Similar to Issue 2)

[!] (plugin svelte) ParseError: Identifier is expected
apps/web/src/pages/movie/cinemas/index.svelte
305: }
306: .empty-state {
307:   // position: absolute;
         ^
308:   top: 0;
309:   left: 0;

// style.scss
.empty-state {
    // position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

from svelte-windicss-preprocess.

ahh i think it might be an issue with comments in css (I must fix it). is your CSS in different file or in <style></style> tags?

from svelte-windicss-preprocess.

@OysterD3 i cannot reproduce issue 1. My Output on your component looks like following -> in your log, you are missing the last } after size

<div class="responsive-ui-loader" in:fade out:fade>
  <div class="responsive-ui-loader__spinner responsive-ui-loader__spinner--{size}" />
</div>

from svelte-windicss-preprocess.

ahh i think it might be an issue with comments in css (I must fix it). is your CSS in different file or in <style></style> tags?

In <style></style> tags, thanks!

from svelte-windicss-preprocess.

you might also be able to get some help on the discord. Link somewhere on default windicss repo discussion

from svelte-windicss-preprocess.

New issue found

{#if hasPoster}
  <div class="thumbnail" class:small={posterSize === "extra-small"}>
    <Poster
      hasBorderRadius={!cardView}
      hasBoxShadow={!cardView}
      imageUrl={movie.thumbnailUrl}
      movieTag={movie.tag}
      size={posterSize}
    />
  </div>
{/if}

will get this error

[!] (plugin svelte) ParseError: Expected }
apps/web/src/components/movie/Detail.svelte
24: <div class="movie" class:showtime data-key="{movie.key}">
25:   {#if hasPoster}
26:     <div class="thumbnail all:{posterSize all:=== all:'extra-small'}" class:sm>
                                              ^
27:       <Poster hasBorderRadius="{!cardView}" hasBoxShadow="{!cardView}" imageUrl="{movie.thumbnailUrl}" movieTag="{movie.tag}" size="{posterSize}" />
28:     </div>

from svelte-windicss-preprocess.

@OysterD3 actually which version do you use?

from svelte-windicss-preprocess.

@OysterD3 https://github.com/windicss/svelte-windicss-preprocess/releases/tag/v3.0.0-beta.16

from svelte-windicss-preprocess.

Single line comment in <script></script> will comment the rest of the code

from svelte-windicss-preprocess.

I will check that. I am afraid that single line comment are not supported yet. Just block comments.

from svelte-windicss-preprocess.

@OysterD3 you know for now.. beta.17 https://github.com/windicss/svelte-windicss-preprocess/releases/tag/v3.0.0-beta.16

from svelte-windicss-preprocess.

@alexanderniebuhr I am having this now.

Not sure what is the cause. Might related to this

from svelte-windicss-preprocess.

i have reverted the feature with beta.18
it has to much bugs right now.. so now it should work like before.. not throwing to many bugs.. please keep up your help with posting bugs

however multile line class attributes are now a known bug, like

<div class="style-1
   style-1" />

from svelte-windicss-preprocess.

Having this error now. Thanks for your effort!

from svelte-windicss-preprocess.

@OysterD3 can you show me the source of that function?

from svelte-windicss-preprocess.

it still seems like the single line comment does break it, but this bug was fixed.. so i wonder why it is still not working for you

from svelte-windicss-preprocess.

@OysterD3 can you show me the source of that function?

Here you go

// sort by distance
if (coordinate) {
  const [longitude, latitude] = coordinate || [];
  result = result.map((f) => ({
    ...f,
    distance: Number(
      distance(latitude, longitude, f.point[0], f.point[1])
    ),
  }));

  return result
    .filter((v) => searchRes.some((j) => j === v.name))
    .sort((a, b) => {
      if (
        a.key in favCinemas &&
        b.key in favCinemas &&
        a.distance < b.distance
      )
        return -1;
      if (
        a.key in favCinemas &&
        b.key in favCinemas &&
        a.distance > b.distance
      )
        return 1;
      if (a.key in favCinemas && !(b.key in favCinemas)) return -1;
      if (!(a.key in favCinemas) && b.key in favCinemas) return 1;
      if (a.distance < b.distance) return -1;
      if (a.distance > b.distance) return 1;
      return 0;
    });
}

from svelte-windicss-preprocess.

@OysterD3 what version are you on?
it should be fixed already

from svelte-windicss-preprocess.

I am working with "svelte-windicss-preprocess": "^3.0.0-beta.18"

from svelte-windicss-preprocess.

ok that is too old.. try beta.23

from svelte-windicss-preprocess.

if that is not working please provide output of following config

module.exports = {
  preprocess: require('svelte-windicss-preprocess').preprocess({
    silent: false,
    debug: true,
    verbosity: 5
  })
}

from svelte-windicss-preprocess.

That works, another new issue. SCSS selector

[!] (plugin svelte) ParseError: Selector is expected
apps/web/src/components/seat/layout.svelte
113: }
114: .seat.tw,
115:     &.bn,
         ^
116:     &.pp .cushion {
117:   background: rgba(210, 42, 248, 0.8);

from svelte-windicss-preprocess.

It looks like because of comma, those without comma is fine

from svelte-windicss-preprocess.

Same goes for scss variables

[!] (plugin svelte) ParseError: Unexpected input
packages/components/src/app-bar/index.svelte
46: }
47: .app-bar.bg {
48:   background: $theme-color;
                  ^
49:   color: #fff;
50: }

from svelte-windicss-preprocess.

After removing the issue mentioned above, single-line comment in css. It works!

from svelte-windicss-preprocess.

@OysterD3 for parsing of css in style tag you might need to open issue in windicss core repo, we are using their css parser

from svelte-windicss-preprocess.

if you have new bugs please open new issue either in windicss core for style tags or here for other

from svelte-windicss-preprocess.