ionic-team/stencil-sass

Sass plugin for Stencil

@stencil/sass

This package is used to easily precompile Sass files within Stencil components. Internally this plugin uses a pure JavaScript implementation of Sass. Please see the Behavioral Differences from Ruby Sass doc if issues have surfaced since upgrading from previous versions which used used the node-sass implementation.

First, npm install within the project:

npm install @stencil/sass --save-dev

Next, within the project's stencil config, import the plugin and add it to the config's plugins property:

stencil.config.ts

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config = {
  plugins: [
    sass()
  ]
};

During development, this plugin will kick-in for .scss or .sass style urls, and precompile them to CSS.

Options

Sass options can be passed to the plugin within the stencil config, which are used directly by sass. Please reference sass documentation for all available options. Note that this plugin automatically adds the component's directory to the includePaths array.

Inject Globals Sass Paths

The injectGlobalPaths config is an array of paths that automatically get added as @import declarations to all components. This can be useful to inject Sass variables, mixins and functions to override defaults of external collections. For example, apps can override default Sass variables of Ionic components. Relative paths within injectGlobalPaths should be relative to the stencil config file.

exports.config = {
  plugins: [
    sass({
      injectGlobalPaths: [
        'src/globals/variables.scss',
        'src/globals/mixins.scss'
      ]
    })
  ]
};

Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, injectGlobalPaths should only be used for Sass variables, mixins and functions, but does not contain any CSS.

Related

• sass
• Stencil
• Ionic Discord
• Ionic Components
• Ionicons

Contributing

Please see our Contributor Code of Conduct for information on our rules of conduct.

stencil-sass's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update jest to v29.5.12 (@types/jest, jest, ts-jest)
• chore(deps): update dependency @types/node to v20.12.7

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update dependency rollup to v4.14.3
• chore(deps): update dependency @stencil/core to v4.16.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency sass to v1.75.0

Detected dependencies

github-actions

.github/workflows/actions/download-archive/action.yml

• actions/download-artifact v4.1.4@c850b930e6ba138125429b7e5c93fc707a7f8427

.github/workflows/actions/get-core-dependencies/action.yml

• actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8

.github/workflows/actions/publish-npm/action.yml

• actions/checkout v4.1.1@b4ffde65f46336ab88eb53be808477a3936bae11

.github/workflows/actions/upload-archive/action.yml

• actions/upload-artifact v4.3.1@5d5d22a31266ced268874388b861e4b58bb5c2f3

.github/workflows/build.yml

• actions/checkout v4.1.1@b4ffde65f46336ab88eb53be808477a3936bae11

.github/workflows/main.yml

• actions/checkout v4.1.1@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/setup-node v4.0.2@60edb5dd545a775178f52524783378180af0d1f8

.github/workflows/release-dev.yml

• actions/checkout v4.1.1@b4ffde65f46336ab88eb53be808477a3936bae11
• actions/checkout v4.1.1@b4ffde65f46336ab88eb53be808477a3936bae11

npm

package.json

• @ionic/prettier-config ^4.0.0
• @rollup/plugin-node-resolve ^15.0.0
• @rollup/plugin-typescript ^11.1.6
• @stencil/core ^4.0.0
• @types/jest ^29.0.0
• @types/node ^20.2.0
• jest ^29.0.0
• np ^10.0.0
• prettier ^3.0.0
• rimraf ^5.0.0
• rollup ^4.0.0
• sass ^1.58.3
• terser ^5.3.8
• ts-jest ^29.0.0
• typescript ~5.0.0
• @stencil/core >=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0
• node >=12.0.0
• npm >=6.0.0
• node 20.12.2
• npm 10.5.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Use sass in styles property (component decorator)

Not sure if this is the right place to ask this, but is it possible to use sass/scss inside the styles property of the decorator?

I like keeping components in a single file, but I also would like to use scss.

Example

@Component({
  tag: 'my-hero',
  styles: `
    .hero {
      ...
      &__details {
        ...
      }

      &__screenshot {
        ...
      }
    }
  `,
  shadow: true
})
export class Hero {
  render() {
    return (
        <div class="hero">
          <div class="hero__details">
            ...
          </div>
          <div class="hero__screenshot">
            ...
          </div>
        </div>
    );
  }
}

thanks.

Unable to import partials in global directory

I have a main stylesheet, global.scss, and two partials which I would like to import into it.

At the top of global.scss, I try to import them as I normally would using Sass:

@import "normalize";
@import "utils";

However, after doing this I receive the following error:

Bug: Sass build error contains an incorrect line when error is from a file referenced in injectGlobalPaths

Description
If there's a compilation error in the sass, it outputs that error to the console. The error prints out the file, an error description, the line number, and the code from that line. When using the injectGlobalPaths option, if any of the SCSS files referenced by that option or any SCSS files imported by these files contains an error, the build errors and prints the error to the terminal window. The error description is accurate, and the line number seems to be reflect the line number in the injected file, but the filename is wrong and the sample code that's contains the error is grabbed from the same incorrect file.

//stencil config
plugins:[
    sass({
      injectGlobalPaths: ['src/globalStyles/variables.scss']
    })
  ] 

//src/globalStyles/variables.scss
/*Emptly line 1*/
/*Emptly line 2*/
$badSyntax

//src/components/component/component.scss
select {
    border-color: blue;
}

Actual Result:
The file name and the code snippet in the error printed to the console are point to the component sass file and not the injected file where the error actually occurred.
Expected Result:
When compiling sass encounters an error, the error prints the injected file or the imported file that contains the error, and prints the correct reference to the offending code from that file.

Consider usage of @use statement instead of @import for injectGlobalPath options

It is possible to pass additional files to the injectGlobalPath option. The files are injected to sass files with @import rule. But SASS team wants to deprecate it. Please see https://sass-lang.com/documentation/at-rules/import. Moreover, @import rule can not go before the @use rule if it is used in the project.
Expected result
It is possible to inject files, passed via injectGlobalPath option, via @use rule.

Actual result
Files, passed to injectGlobalPath option, are injected with @import rule. https://github.com/ionic-team/stencil-sass/blob/master/src/util.ts#L52

Tries to compile sass files from external component package

Hi guys,

I've build a component library with Stencil and now trying to use it in a stencil-app.

In the stencil-app if I add stencil-sass support and run npm start it attempts to compile my stencil component, and since i have the mixin.scss file in injdectGlobalPaths inside the component project, the stencil-app will fail to compile sass.

Repos:
Component:
https://github.com/seanwuapps/wu-components
StencilApp:
https://github.com/seanwuapps/wu-components-docs

@use array format validation

Within v2, when a format that's passed is not passed as a multidimensional array, either validate the array and fire back a warning/error, or transform the array to a multidimensional array with a "*"

e.g.
injectGlobalPaths: ["some-path/global.scss"]

Either errors or transforms into: injectGlobalPaths: [["some-path/global.scss", "*"]]

does not works

@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

includePaths throws linting error

plugins: [
    sass({includePaths: ["node_modules"]})
  ]

The code compiles and runs fine, but gives this linting error in VS Code...

Argument of type '{ includePaths: string[]; }' is not assignable to parameter of type 'PluginOptions'.
Object literal may only specify known properties, and 'includePaths' does not exist in type 'PluginOptions'. [2345]

stencil-sass does not compile scss file

I want to compile my main.scss file but it currently does not do anything. I am not seeing any errors. What do I need to change for this to work?

Sourcemaps not being created

Using stencil.config.ts sass() options like the following do nothing:

sass({   
    sourceMap: true,
    sourceMapEmbed: true,
    sourceMapContents: true
})

No sourcemap data is generated in the resulting CSS file, and no *.cs.map file is generated when specifying a sourcemap path.

Support of Stencil 2.0

Are were plans to support Stencil 2.0 and when would that be? We can't migrate our projects to Stencil 2.x since stencil-sass does not support it.

Include partial sass file in component does not update web browser in watch

Hello,

If you have this structure :

--src
   |---components
            |---breadcrumb
                      |---breadcrumb.scss
                      |---_partial.scss

In breadcrumb.scss I include partial.scss.

When I change the css file partial.scss and save that file, I expect the visuals in the browser to have updated.

I need to save breadcrumb.scss to take into account the partials update

Compiling .sass files doesn't work correctly

It seems that the current version of @stencil/sass doesn't allow the use of syntax offered by .sass files the correct way.

I tried to figure this out so that I can understand what might be the root cause of this problem. I think there is likely a parsing problem (or something similar) of .sass files to the sass compiler. The classical css/scss syntax works even if the file extension is '.sass'. In other words, it seems that '.sass' files are treated exactly the same as '.scss' files.

This doesn't allow for the more clean '.sass' syntax.

Here is a screenshot with relevant information:

v1.4.0 breaks mixins included via injectGlobalPaths

Something about the upgrade from v1.3.2 to v1.4.0 has broken the ability to have global mixins declared in injectGlobalPaths files accessible to any other scss files in the project.

Here is a minimal reproduction of the issue: https://github.com/nikrolls/stenciljs-sass-globalpaths-repro

$ npm start

> [email protected] start
> stencil build --dev --watch --serve

[34:03.0]  @stencil/core
[34:03.2]  v1.17.4 🏏
[34:07.8]  build, stenciljs-sass-globalpaths-repro, dev mode, started ...
[34:07.9]  transpile started ...
[34:10.2]  transpile finished in 2.30 s
[34:10.2]  copy started ...
[34:10.2]  generate lazy started ...
[34:10.2]  copy finished (0 files) in 39 ms
[34:10.9]  generate lazy finished in 753 ms

[ ERROR ]  sass error: src/global/global.scss:1:72
           Undefined mixin.

      L1:  @include test-mixin;

[34:10.9]  build failed, watching for changes... in 3.12 s

However, if you change @stencil/sass in package.json to 1.3.2:

$ npm upgrade

changed 1 package, and audited 3 packages in 2s

found 0 vulnerabilities
$ npm start

> [email protected] start
> stencil build --dev --watch --serve

[35:42.3]  @stencil/core
[35:42.5]  v1.17.4 🏏
[35:47.1]  build, stenciljs-sass-globalpaths-repro, dev mode, started ...
[35:47.1]  transpile started ...
[35:49.7]  transpile finished in 2.53 s
[35:49.7]  copy started ...
[35:49.7]  generate lazy started ...
[35:49.7]  copy finished (0 files) in 71 ms
[35:50.6]  generate lazy finished in 888 ms
[35:50.6]  build finished, watching for changes... in 3.47 s

Everything works fine.

This simple repro only demonstrates the issue in globalStyle, however it affects component scss files as well.

This is also an issue in Stencil 2, but I kept it on Stencil 1 because @stencil/sass v1.3.2 doesn't support Stencil 2 and I wanted to keep the changes between scenarios to a minimum.

Property: injectGlobalPaths doesn't take into account @use rules

Lets say I have the following setup:

{
  injectGlobalPaths: ['./mixins.scss']
}

### mixins.scss
@mixin whatever {
  margin: 0;
}

### styles.scss
use "sass:math";

div {
  width: math.div(100, 2);
}

This will end up with error: @use rules must be written before any other rules.
https://sass-lang.com/documentation/at-rules/use

The code which adds the import statements, should analyze the file and add import clauses under @use statements instead of just adding them to beginning of the each file.

stencil-sass/src/util.ts

Line 55 in 7871073

return `@import "${injectGlobalPath}"${importTerminator}`;

feat: Add quietDepts options support

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Add 'quietDepts' options support to sass. This option is really useful to avoid logging third party deprecation warnings whenever you build your sass files.
This will allow to have more concise logs whenever building the styling files using sass plugin.
https://sass-lang.com/documentation/js-api/interfaces/stringoptionswithoutimporter/#quietDeps

Describe the Use Case

I'm using stencil and sass plugin. Whenever I try to build my app, I get tons of errors because of a third party library using '/' as division, which is currently deprecated.
I get too many errors that do not allow me to focus on the real problems and warning I own. I cannot use any silent mechanism supported by sass (https://sass-lang.com/documentation/js-api/interfaces/stringoptionswithoutimporter/#quietDeps)

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

plugin sass is incompatible with Config interface in stencil.config.ts

Stencil version:

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

I'm submitting a:

[x] bug report
[ ] feature request

Current behavior:
When passing sass() into the plugins array of the config, lint errors are thrown that it is not compatible with type Plugin[].

See Other information for the full lint error message.

Expected behavior:
When passing sass() into the plugins array of the config, no lint errors are shown.

Steps to reproduce:
Use config below.

Related code:

export const config: Config = {
plugins: [
    sass()
  ]
};

Other information:

[ts]
Type '{ namespace: string; plugins: { name: string; transform(sourceText: string, fileName: string, con...' is not assignable to type 'StencilConfig'.
  Types of property 'plugins' are incompatible.
    Type '{ name: string; transform(sourceText: string, fileName: string, context: PluginCtx): Promise<Plug...' is not assignable to type 'Plugin[]'.
      Type '{ name: string; transform(sourceText: string, fileName: string, context: PluginCtx): Promise<Plug...' is not assignable to type 'Plugin'.
        Types of property 'transform' are incompatible.
          Type '(sourceText: string, fileName: string, context: PluginCtx) => Promise<PluginTransformResults>' is not assignable to type '(sourceText: string, id: string, context: PluginCtx) => Promise<PluginTransformResults>'.
            Types of parameters 'context' and 'context' are incompatible.
              Type 'import("/Users/christiancook/code/stencil/dist/declarations/plugin").PluginCtx' is not assignable to type 'import("/Users/christiancook/code/vualto-vuplay-smart-vualto-skin/node_modules/@stencil/sass/dist...'.
                Types of property 'config' are incompatible.
                  Type 'Config' is not assignable to type '{ rootDir: string; srcDir: string; }'.
                    Property 'rootDir' is optional in type 'Config' but required in type '{ rootDir: string; srcDir: string; }'.
const config: Config

testing bug automation

sass error undefined variable using injectGlobalPaths

I noticed that injectGlobalPaths stopped working after I updated to v1.5.0

I reverted to 1.4 in the meantime.

Please let me know if you need more information.

node version: v14.16.1
os: Mac 10.15.7

Here's what my dependencies look like:

  "dependencies": {
    "@popperjs/core": "^2.9.1",
    "@stencil/angular-output-target": "0.0.6",
    "@stencil/core": "2.5.2",
    "@stencil/react-output-target": "0.0.9",
    "@stencil/vue-output-target": "^0.4.2",
    "bootstrap": "^5.1.0",
    "clipboard": "^2.0.8",
    "highlight.js": "^10.7.3",
    "html-entities": "^2.3.2",
    "marked": "^3.0.2"
  },
  "devDependencies": {
    "@stencil/postcss": "^2.0.0",
    "@stencil/sass": "1.4.1",
    "@types/autoprefixer": "^9.7.2",
    "@types/bootstrap": "^5.0.17",
    "@types/jest": "^26.0.20",
    "@types/puppeteer": "^5.4.0",
    "autoprefixer": "^10.2.1",
    "concurrently": "^6.2.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "jest-cli": "^26.6.3",
    "prettier": "^2.3.0",
    "rollup": "^2.56.3",
    "rollup-plugin-copy": "^3.4.0",
    "stencil-inline-svg": "^1.0.1",
    "ts-jest": "^26.5.6"
  }

watch mode for global styles not working

I use shared styles across components, and for organisation purposes I have several sass files like so:

/src/global/app.scss
/src/global/header.scss
/src/global/footer.scss

Then inside of app.scss I link to the other sass files like so:
@import "header.scss"

This works great on first render, but when changing one of this imported styles, despite seeing the console debug message from stencil that styles were generated, they are not applied on the page, not even with hard reload.

Is this not possible?

node-sass dependency throwing an error

The node-sass version specified in package.json doesn't support environments running node v10, causing an error to be shown. The latest release of node-sass (4.9.0) adds that support.

Can't find stylesheet to import

I'm trying to use material-components-web with Stencil but cannot import the styles.

Their readme for the button component tells me to import their styles like so:

@use "@material/button";

@include button.core-styles;

stencilconfig.ts:

import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';
import { postcss } from '@stencil/postcss';
import { sass } from '@stencil/sass';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';

export const config: Config = {
  namespace: 'components',
  taskQueue: 'async',
  globalStyle: 'src/styles.css',
  outputTargets: [
    reactOutputTarget({
      componentCorePackage: '@bv0012/components',
      proxiesFile: '../generated/components/react/src/components.ts',
    }),
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      dir: '../../dist/libs/components/dist',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      dir: '../../dist/libs/components/www',
      serviceWorker: null, // disable service workers
      copy: [
        { src: 'fonts/Inter-roman.var.woff2' },
        { src: 'fonts/Inter-italic.var.woff2' },
        { src: 'assets/icons' },
      ],
    },
  ],

  plugins: [
    sass({
      includePaths: ['node_modules'],
    }),
    postcss({
      plugins: [
        tailwindcss('./tailwind.config.js'),
        autoprefixer({
          cascade: false,
        }),
      ],
    }),
  ],
};

When I try to build the component library I get this error:

[ ERROR ]  sass error: ...some-repo/button/button.scss:1:1
           Can't find stylesheet to import.

      L1:  @use "@material/button";

external package import with '~' is broken

I found a weird bug around the core resolveModule implementation. I'm not sure this is the right place for this, but it's related to this package so I open a bugticket here.

The issue is the following:
We use font-awesome free package in our project and we cannot import the SCSS files directly with ~ for some reason in stencil.

@import '~bootstrap/scss/bootstrap'; // <- working
@import '~@fortawesome/fontawesome-free/scss/variables' // <- not working
@import '../../node_modules/@fortawesome/fontawesome-free/scss/variables' // <- working

Repository for this bug: https://github.com/petergaal91/stencil-sass-path-resolve-bug

VSCode hints

I can't seem to get any help in VSCode about the available variables and its values.

I have:

plugins: [
    sass({
      injectGlobalPaths: [
        'src/vars.scss',
        'src/common.scss'
      ]
    })
  ],

But when writing my styles, I don't get any intellisense

Stencil-sass v2

After making a clean install it is still downloading v1.4.1 so I can't use latest features from Sass like @use.
Docs says that there are a version 2, so that seems to be the issue. Am I doing something wrong?

Thanks in advance :)

Wrong transpilation of host element

Hi,

:host([disabled]) {
    pointer-events: none;
    color: $color__gray--dark;
}

is wrongly transpilet to

:host {
  pointer-events: none;
  color: #D6D6D6; }

-- missing disabled attribute.

Option "data" is overriden

Would it be possible to enable "data" option?
Seems like it is occupied and overridden internally.
See

stencil-sass/src/util.ts

Line 17 in c55b54e

renderOpts.data = sourceText;

injectGlobalPaths does not work on Windows

When specifying paths for injectGlobalPaths, it cannot resolve the file path correctly on a Windows development environment. It seems to drop all of the slashes, I remember this happening during early stencil developments.

[ ERROR ]  sass: ...project-folder-name/src/components/settings-button/settings-button.scss, line: 1
           File to import not found or unreadable: C:Users
           ontaÞvelopmentproject-folder-namesrcglobalindex.scss. Parent style sheet: stdin

Steps to reproduce:

1. Create a global scss file e.g. src/global/index.scss
2. Modify stencil.config.js sass() plugin to include this file in the injectGlobalPaths array
3. Make sure you have a component present which has a styleUrl pointing to a SCSS file
4. Perform stencil build --dev and watch the error appear in the console

Update to 1.23 or greater

A rather large new feature from sass that should benefit us all in the web component world is the change from @import to @use.

@use doesn't allow duplication of CSS imports, if you are working with encapsulated CSS (i.e shadow: true) this is a big thing, as for example currently with import if we want to use font-awsome icons or any module we will have to import that CSS for every component we want it in, that's a lot of bloat.

Security issue for hoek

This version of stencil-sass reports the hoeks security problem.

See here for valid versions:
sass/node-sass#2443

Seems minimum bump is to 4.2.1 ???
Problem here:

C:\ae\adaept.com\ae-svg-components>npm ls hoek
[email protected] C:\ae\adaept.com\ae-svg-components
+-- @stencil/[email protected]
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected]
|       +-- [email protected]
|       | `-- [email protected]  deduped
|       +-- [email protected]
|       `-- [email protected]
|         `-- [email protected]  deduped
`-- [email protected]
  `-- [email protected]
    +-- [email protected]
    `-- [email protected]
      `-- [email protected]

math.div function is undefined

A project using the latest stable version of material-components-web component fails to build due to missing math.div SASS function.

Could we have sass dependency updated?

[ ERROR ]  sass error: node_modules/@material/theme/_theme-color.scss:33:30
           Undefined function.

     L32:  @function _linear-channel-value($channel-value) {
     L33:    $normalized-channel-value: math.div($channel-value, 255);
     L34:    @if $normalized-channel-value < 0.03928 {

Injected SASS files not modified the component style on change

This is config for stenctil sass

sass({
  injectGlobalPaths: [
    './src/scss/base/variables.scss',
    './src/scss/base/animations.scss',
    './src/scss/base/mixins.scss',
    './src/scss/base/settings.scss',
  ]
})

When I change my-component.scss, the style change properly. This is the result:

[46:45.9]  changed file: my-component.scss
[46:45.9]  rebuild, mycomponent, dev mode, started ...
[46:45.9]  generate styles started ...
[46:45.9]  generate styles finished in 62 ms
[46:45.9]  generate bundles started ...
[46:45.9]  generate bundles finished in 1 ms
[46:45.9]  updated style: my-component
[46:45.9]  updated stylesheet: my-component.css
[46:45.9]  rebuild finished, watching for changes... in 82 ms

But, when I modified the injected SASS files (i.e _variables.scss) , Its not render the component style. This is the result

[47:16.3]  changed file: _variables.scss
[47:16.3]  rebuild, mycomponent, dev mode, started ...
[47:16.3]  generate styles started ...
[47:16.3]  generate styles finished in 5 ms
[47:16.3]  generate bundles started ...
[47:16.3]  generate bundles finished in 1 ms
[47:16.3]  rebuild finished, watching for changes... in 17 ms

I want the component style render too when I change the Injected styles.

Current, I need to re run the npm start command to get affected style. Any fix for this?

@use support for global injection

As far as I am concerned, the injectGlobalPaths config adds the paths as @import declarations to all components.

However, the @import rule will be phased at some point and using global injection in combination with the @use rule leads to an error as the @use must come before any other rules, which is currently not the case if the global paths are added as @import declarations to all components.

Are there any plans to add support for the @use rule with regards to the injectGlobalPaths config?

Upgrading to 1.1.0 causes fatal error during build

After upgrading to 1.1.0 running npm start results in:

[ ERROR ]  Cannot find module 'chokidar' Require stack: -
           C:\project\node_modules\@stencil\sass\dist\index.js -
           C:\project\stencil.config.ts -
           C:\project\node_modules\@stencil\core\dist\sys\node\index.js -
           C:\project\node_modules\@stencil\core\bin\stencil Error: Cannot find        
           module 'chokidar' Require stack: -
           C:\project\node_modules\@stencil\sass\dist\index.js -
           C:\project\stencil.config.ts -
           C:\project\node_modules\@stencil\core\dist\sys\node\index.js -
           C:\project\node_modules\@stencil\core\bin\stencil at
           Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15) at Function.Module._load
           (internal/modules/cjs/loader.js:527:27) at Module.require (internal/modules/cjs/loader.js:683:19) at require      
           (internal/modules/cjs/helpers.js:16:16) at
           C:\project\node_modules\@stencil\sass\dist\index.js:7:1013 at
           Object.<anonymous>
           (C:\project\node_modules\@stencil\sass\dist\index.js:7:1291217) at
           Module._compile (internal/modules/cjs/loader.js:776:30) at Object.Module._extensions..js
           (internal/modules/cjs/loader.js:787:10) at Module.load (internal/modules/cjs/loader.js:643:32) at
           Function.Module._load (internal/modules/cjs/loader.js:556:12)

stencil.config.ts

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

// https://stenciljs.com/docs/config

export const config: Config = {
  globalStyle: 'src/global/app.scss',
  globalScript: 'src/global/app.ts',
  plugins: [
    sass({
      includePaths: ['node_modules'],
      injectGlobalPaths: ['src/global/variables.scss', 'src/global/mixins.scss']
    })
  ],
  outputTargets: [
    {
      type: 'www',
      // comment the following line to disable service workers in production
      serviceWorker: null
    },
    {
      type: 'docs-readme'
    }
  ]
};

Running with @stencil/[email protected]

testing refine automation

Build doesn't recognize the library

When I run any kind of build command, I get the following error:

[ ERROR ] style error
Style "src\components\app-home\app-home.scss" is a Sass file,
however the "sass" plugin has not been installed. Please install the
"@stencil/sass" plugin and add it to "config.plugins" within the
project's stencil.config.js file. For more info please see:
https://www.npmjs.com/package/@stencil/sass

I can tell you that @stencil/sass is in my node modules, latest version.

These are all of my dependencies:

  "dependencies": {
    "@ionic/core": "^4.0.0-beta.1",
    "@stencil/core": "^0.10.10"
  },
  "devDependencies": {
    "@types/jest": "^22.2.2",
    "jest": "^22.4.3",
    "@stencil/sass": "latest"
  },

And this is my stencil.config.ts:

// https://stenciljs.com/docs/config
import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config = {
  outputTargets: [
    {
      type: 'www',
      serviceWorker: {
        swSrc: 'src/sw.js'
      }
    }
  ],
  globalScript: 'src/global/app.ts',
  plugins: [
    sass({
      injectGlobalPaths: ['src/global/app.scss']
    })
  ],
};

Make `sass` a peerDependency

Instead of manually updating the sass dependency every time an update is available, it could be done by the consumer instead.

using custom sass functions not working

Sass offers the api to register custom functions to use in sass stylesheets (https://sass-lang.com/documentation/js-api#functions)

These do not work due to the fact that stencil-sass comes with a packed version of dart-sass

Steps to reproduce

stencil.config.ts

import { Config } from '@stencil/core';
import {sass} from "@stencil/sass";
import {types} from "sass";

export const config: Config = {
  namespace: 'my-components',
  globalStyle: 'src/global/style.scss',
  plugins: [
    sass({
      functions: {
        'my-function($param)': function(param, done) {
      
           // do something fancy with param....
          return new types.String(param));
        }
      }
    })
  ]
};

src/global/style.scss

:root {
  --myvar:  my-function('my-param')
}

when I run the build the following error occurs

[ ERROR ]  sass error:src/global/style.scss:
           'my-param' must be a Sass value type.

Cause

The error occurs because dart-sass checks the type with instanceof, and the called constructor in the custom function implementation is not the same as the constructor checked in the bundled dart-sass code in stencil-sass

I "solve" the error reexporting the dart-sass object in stencil-sass and using the types from that module.
Thats not a viable workaround, more a proof of the error cause.

Suggestions

1

I don't know, why dart-sass is bundled with stencil-sass, but one solution would be to skip the bundling and load it as dependency instead of devDependency

2

Reexport the dart-sass instance in order enable the use dart-sass api outside of stencil-sass
However, this would limit the ability to use 3rd-party modules that use dart-sass

Build fails with "Can't find stylesheet to import." if injectGlobalPaths is used

Current Behavior

If using injectGlobalPaths parameter

plugins: [
    sass({
      injectGlobalPaths: ['src/globals/variables.scss'],
    }),
  ],

the build fails with

[ ERROR ]  sass error: ...tencil-example/libs/web-components/src/components/my-component/my-component.scss:1:9
           Can't find stylesheet to import.

If I leave out the parameter, the builds succeeds.I suspect the path resolution not working correctly on my nx workspace, because it works on a simple stencil project.

Expected Behavior

using injectGlobalPaths parameter should work without causing issues

Context (Environment)

• nx 11 workspace
• @stencil/core 2.3.0
• @stencil/sass: 1.4.1
• Windows

Steps to Reproduce

1. clone https://github.com/kerosin/nx-stencil-example
2. call nx build web-components