does not works

[FDiskas]

@ionic/[email protected] @stencil/[email protected] @stencil/[email protected]

[30:44.2]  generate styles started ...
StyleSassPlugin loadDiagnostic, TypeError: Cannot read property 'charAt' of undefined
StyleSassPlugin loadDiagnostic, TypeError: Cannot read property 'charAt' of undefined

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/buttons/buttons.md.scss, line: 213: node_modules/@ionic/core/dist/collection/components/buttons/buttons.md.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((

If I downgrade to @stencil/[email protected] it works again

[acoreyj]

Seeing the same myself, lots of similar errors

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.ios.scss, line: 213: node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.ios.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 248:3 padding-horizontal()
           node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.scss 25:3 @import stdin 1:9 root
           stylesheet

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.md.scss, line: 213: node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.md.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 248:3 padding-horizontal()
           node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.scss 25:3 @import stdin 1:9 root
           stylesheet

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/label/label.ios.scss, line: 213: node_modules/@ionic/core/dist/collection/components/label/label.ios.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 276:3 margin()
           node_modules/@ionic/core/dist/collection/components/label/label.scss 66:3 @import stdin 1:9 root stylesheet

[ ERROR ]  sass: ..._modules/@ionic/core/dist/collection/components/back-button/back-button.ios.scss, line: 213: ..._modules/@ionic/core/dist/collection/components/back-button/back-button.ios.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 276:3 margin()
           node_modules/@ionic/core/dist/collection/components/back-button/back-button.scss 96:3 @import stdin 1:9 root
           stylesheet

[ ERROR ]  sass: ...e_modules/@ionic/core/dist/collection/components/back-button/back-button.md.scss, line: 213: ...e_modules/@ionic/core/dist/collection/components/back-button/back-button.md.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 276:3 margin()
           node_modules/@ionic/core/dist/collection/components/back-button/back-button.scss 96:3 @import stdin 1:9 root
           stylesheet

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/content/content.scss, line: 213: node_modules/@ionic/core/dist/collection/components/content/content.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding() stdin 60:3 root stylesheet

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/title/title.scss, line: 213: node_modules/@ionic/core/dist/collection/components/title/title.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding() stdin 24:3 root stylesheet

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/item/item.md.scss, line: 213: node_modules/@ionic/core/dist/collection/components/item/item.md.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding()
           node_modules/@ionic/core/dist/collection/components/item/item.scss 123:3 @import stdin 1:9 root stylesheet

    L212:    @include margin-horizontal(0, null);
    L213:  }

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/item/item.ios.scss, line: 213: node_modules/@ionic/core/dist/collection/components/item/item.ios.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding()
           node_modules/@ionic/core/dist/collection/components/item/item.scss 123:3 @import stdin 1:9 root stylesheet

    L212:  // }

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/col/col.scss, line: 213: node_modules/@ionic/core/dist/collection/components/col/col.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding()
           node_modules/@ionic/core/dist/collection/components/grid/grid.mixins.scss 30:7 @content
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 95:5 media-breakpoint-up()
           node_modules/@ionic/core/dist/collection/components/grid/grid.mixins.scss 27:5 make-breakpoint-padding()
           stdin 16:3 root stylesheet

[ ERROR ]  sass: ...modules/@ionic/core/dist/collection/components/card-content/card-content.md.scss, line: 213: ...modules/@ionic/core/dist/collection/components/card-content/card-content.md.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding() stdin 8:3 root stylesheet

[ ERROR ]  sass: node_modules/@ionic/core/dist/collection/components/grid/grid.scss, line: 213: node_modules/@ionic/core/dist/collection/components/grid/grid.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding()
           node_modules/@ionic/core/dist/collection/components/grid/grid.mixins.scss 30:7 @content
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 95:5 media-breakpoint-up()
           node_modules/@ionic/core/dist/collection/components/grid/grid.mixins.scss 27:5 make-breakpoint-padding()
           stdin 23:3 root stylesheet

[ ERROR ]  sass: ...e_modules/@ionic/core/dist/collection/components/card-header/card-header.md.scss, line: 213: ...e_modules/@ionic/core/dist/collection/components/card-header/card-header.md.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding() stdin 8:3 root stylesheet

[ ERROR ]  sass: ...odules/@ionic/core/dist/collection/components/card-content/card-content.ios.scss, line: 213: ...odules/@ionic/core/dist/collection/components/card-content/card-content.ios.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding() stdin 8:3 root stylesheet

[ ERROR ]  sass: ..._modules/@ionic/core/dist/collection/components/card-header/card-header.ios.scss, line: 213: ..._modules/@ionic/core/dist/collection/components/card-header/card-header.ios.scss:213:14
           expected selector. ╷ 213 │ @at-root @supports((margin-inline-start: 0) or (-webkit-margin-start: 0)){ │ ^ ╵
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 213:14 property-horizontal()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 238:3 property()
           node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss 258:3 padding() stdin 8:3 root stylesheet

[FDiskas]

Probably the main reason is dart-sass and node-sass differences

[FDiskas]

It could be related https://github.com/sass/dart-sass/issues/568

[peterpeterparker]

I faced and solved this issue by installing a version of ionic/core stencil one friendly (as displayed in the breaking changes list https://github.com/ionic-team/stencil/blob/master/BREAKING_CHANGES.md#stencil-one)

npm rm @ionic/core --save
npm install @ionic/core@one --save

[boradakash]

Does anybody find the solution for this issue? I'm also getting the same error with the following version of library. "@ionic/core": "^4.5.0", "@stencil/core": "^1.0.7", "node-sass": "^4.11.0",

"@stencil/sass": "^1.0.0",

[FDiskas]

downgrade to @stencil/[email protected]

[boradakash]

Thanks @FDiskas, it has resolved that issue but got a new error now.

stencil.config.ts looks like:

import { sass } from '@stencil/sass';
import { Config } from '@stencil/core';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
export const config: Config = {
  namespace: 'test-app',
  outputTargets: [
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: null
    }
  ],
  globalScript: 'src/global/app.ts',
  globalStyle: 'src/global/app.css',
  plugins: [
    sass({
      injectGlobalPaths: [
        'src/global/app.scss'
      ]
    }),
    builtins(),
    globals()
  ]
};

Any idea why?

[rjaguilar]

I'm having the exact same issue

[ronnyek]

I've been unable to get stencil/sass to work in any real capacity. The 1.0.1 version seems to just complain about any and every import I pass in ("can't find stylesheet to import, though it often shows text from that stylesheet IN the error message)

If I downgrade, I get the error about not having the plugin initialized.

Also, should we be able to specify a scss file (with imports) as a the globalStyle property in stencil.config.js?

[FDiskas]

Did you really installed npm i -D @stencil/sass ?

[ronnyek]

yep. Sass is running, errors are getting kicked out by sass compiler itself.

I can get it working by only including it in a component directly. As soon as I try to handle includes from my scss files... stuff starts blowing up.

[ronnyek]

Is it possible that this oldish bug might be the cause of inability to import scss files from a parent scss file? https://github.com/sass/dart-sass/issues/284

Or is it truly a different sass library?

[ronnyek]

I tried to build a unit test, to simulate the kinds of things I EXPECT to work, but dont seem to. While I can get this to build, jest fails to execute complaining about unexpected token { in build.spec.ts

[vinodloha]

@stencil/sass@^1.0.0 works but has some compatibility issues.

I too faced random errors in SCSS compilation with "@stencil/sass@^1.0.0", but because the error message did make little sense, pointed me to "sass-inline-svg" plugin not being compatible with this "@stencil/sass@^1.0.0", though same SCSS was working well with "@stencil/sass@^0.1.1".

Following were the errors in files, where i had used SVG.

`[ ERROR ] sass error: src/components/secondary-nav/secondary-nav.default.scss:4:31 Only 0 arguments allowed, but 1 was passed.

  L3:  $secondary-nav-item-margin: 15px;
  L4:  $secondary-nav-smart-label-width: 85px;
  L5:  $secondary-nav-smart-label-margin-top: 8px;

`

To fix this I replaced SVG inlining process with "sass-inline-svg" to "postcss-url" package and everything started to work as before.

[kairos666]

+1 trying to migrate to stencil one but without any solution or solid workaround we are stuck.

my own investigation leads to node-sass VS dart-sass encoding handling differences. Is there some easy way to retrofit node-sass in the stencil one sass plugin ?

[kairos666]

Not sure this will solve the overall issue here but here is how I've handled mine. I was getting as a build log StyleSassPlugin loadDiagnostic, TypeError: Cannot read property 'charAt' of undefined

Here is the detail of the issue [ ERROR ] sass error: ...b-forms/bb-generic-select/bb-generic-selector-list/bb-generic-selector-list.scss:511:44 $string: #3e3e3e is not a string.

Contrary to my initial understanding this is not a problem with the hexcolor variable itself but with a mixin doing some string casting and manipulation. Was working perfectly in node-sass but alas not supported in dart-sass $keyframe-name: "hourglass-#{str-slice(quote($colorA), 2)}#{str-slice(quote($colorB), 2)}"; works when using inspect instead for casting as string $keyframe-name: "hourglass-#{str-slice(inspect($colorA), 2)}#{str-slice(inspect($colorB), 2)}";

TLDR Be mindful on differences between dart-sass & node-sass syntax & feature support. Not a problem of the plugin itself

[Alasiac]

I get the same issue ...'TypeError: Cannot read property...".

Simply by following the readme's I ended up with two dependencies: "@stencil/core": "^1.3.0", "@stencil/sass": "^1.0.1"

My scss only contains one import and I added an includePaths to my node_modules/@thirdpartypackage in the plugins configuration for sass. (thirdpartypackage is also in a npm dependency)

By reading this thread, I still have no idea what I can do to fix this...

[FDiskas]

downgrade to @stencil/[email protected]

[vinodloha]

I get the same issue ...'TypeError: Cannot read property...".

Simply by following the readme's I ended up with two dependencies: "@stencil/core": "^1.3.0", "@stencil/sass": "^1.0.1"

My scss only contains one import and I added an includePaths to my node_modules/@thirdpartypackage in the plugins configuration for sass. (thirdpartypackage is also in a npm dependency)

By reading this thread, I still have no idea what I can do to fix this...

In my experience with it, usually an issue with compatibility of additional module you might be using within SCSS. The error reported is very much random. So, if you narrow the scope of input SCSS you should be able to pinpoint the real problem and find an alternative solution.

[Alasiac]

Downgrade does not work, as mentioned earlier in this thread, I get a plugin not found when using the old version of stencil/sass.

I'm only importing another scss from an external dependency. Not sure how I can pinpoint the problem or fix it, as this code is not under my control.

[FDiskas]

Can you share your project?

[splitinfinities]

Hey all, if you can confirm for me if this still exists after using @stencil/[email protected], an upcoming prerelease, I would really appreciate it!

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and Stencil Sass. Please provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[FDiskas]

V2 of sass plugin works for me https://github.com/FDiskas/carousel

I can't reproduce it with latest versions installed

[rwaskiewicz]

Thanks @FDiskas!

In that case, I'm going to close this issue. Thanks again!