Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

does not works #18

Closed
FDiskas opened this issue Apr 28, 2019 · 25 comments
Closed

does not works #18

FDiskas opened this issue Apr 28, 2019 · 25 comments
Labels
ionitron: needs reproduction This PR or Issue does not have a reproduction case URL

Comments

@FDiskas
Copy link

FDiskas commented Apr 28, 2019

@ionic/core@4.2.0
@stencil/core@0.18.1-0
@stencil/sass@0.2.1

[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/sass@0.1.1 it works again

@acoreyj
Copy link

acoreyj commented May 8, 2019

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
Copy link
Author

FDiskas commented May 9, 2019

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

@FDiskas
Copy link
Author

FDiskas commented May 9, 2019

It could be related sass/dart-sass#568

@peterpeterparker
Copy link

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
Copy link

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
Copy link
Author

FDiskas commented Jun 21, 2019

downgrade to @stencil/sass@0.1.1

@boradakash
Copy link

boradakash commented Jun 21, 2019

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

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
Copy link

I'm having the exact same issue

@ronnyek
Copy link

ronnyek commented Jul 29, 2019

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
Copy link
Author

FDiskas commented Jul 30, 2019

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

@ronnyek
Copy link

ronnyek commented Jul 30, 2019

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
Copy link

ronnyek commented Jul 30, 2019

Is it possible that this oldish bug might be the cause of inability to import scss files from a parent scss file?
sass/dart-sass#284

Or is it truly a different sass library?

@ronnyek
Copy link

ronnyek commented Jul 30, 2019

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
Copy link

@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
Copy link

+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
Copy link

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
Copy link

Alasiac commented Sep 9, 2019

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
Copy link
Author

FDiskas commented Sep 10, 2019

downgrade to @stencil/sass@0.1.1

@vinodloha
Copy link

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
Copy link

Alasiac commented Sep 11, 2019

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
Copy link
Author

FDiskas commented Sep 11, 2019

Can you share your project?

@splitinfinities
Copy link
Contributor

Hey all, if you can confirm for me if this still exists after using @stencil/sass@1.15.0-0, an upcoming prerelease, I would really appreciate it!

@rwaskiewicz rwaskiewicz added Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team and removed Bug: Needs Validation labels Jul 8, 2022
@rwaskiewicz rwaskiewicz added the ionitron: needs reproduction This PR or Issue does not have a reproduction case URL label Oct 10, 2022
@ionitron-bot
Copy link

ionitron-bot bot commented Oct 10, 2022

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.

@rwaskiewicz rwaskiewicz removed the Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team label Oct 10, 2022
@FDiskas
Copy link
Author

FDiskas commented Oct 10, 2022

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

I can't reproduce it with latest versions installed

@rwaskiewicz
Copy link
Member

Thanks @FDiskas!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ionitron: needs reproduction This PR or Issue does not have a reproduction case URL
Projects
None yet
Development

No branches or pull requests