Stencil: Allow generate new component with scss file instead of css

[JeanOsorio]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[x ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Can generate a new component with scss file instead of css

Expected behavior:
allow to generate a new component with a scss file and with the css file inside decorator

Steps to reproduce:
npm run generate

✔ Component tag name (dash-case): … my-component
✔ Which additional files do you want to generate? › Stylesheet, Spec Test, E2E Test

$ stencil generate super-component

The following files have been generated:

• src/components/component/my-component.tsx
• src/components/component/my-component.css
• src/components/component/my-component.spec.ts
• src/components/component/my-component.e2e.ts

Related code:

import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css', 
  shadow: true
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    return <div>Hello, World! I'm {this.getText()}</div>;
  }
}

Other information:
Here is the suggestion of simonhaenisch on slack https://stencil-worldwide.slack.com/archives/C79EANFL7/p1579693868137100

[JeanOsorio]

I would like to make a PR for this feature, could someone asign me this issues. Thanks in advance

[romulocintra]

Hi @JeanOsorio ,

Do you have npm install @stencil/sass --save-dev that was made to support this use case.

Please have at look a Plugins documentation https://stenciljs.com/docs/plugins

[JeanOsorio]

Hello @romulocintra I’ve already install the sass plugin, all my components work with sass files, but I have to manually change from .css to .scss, so my proposal is to generate a component with a scss instead of css

[Drohno]

Personally I totally agree with @JeanOsorio. With the actual capabilities of StencilJS a thing as simple as create a new component using SASS from the beginning it is a no way man feature (not able to do so).
Otherwise as @romulocintra states, it can process sass to css and then do whatever you please with ease, but it is a pain in the head to manually change each time from css to sass when creating a new compo.

[romulocintra]

I believe the core architecture based on plugins intends to be optioned and pluggable, adding this probably would go against it and open different threads about:

• Why not support sass/less/stylus +
• Extra weight if you mean add the plugin to the core

Having this in generation process as option or parameter of the CLI would be more recommended, always checking if plugin exist or installed and probably accepting as many options as plugins. Or give support for custom templates

[Drohno]

That is @romulocintra exactly my point of view about this.
If you have installed the sass pligin if stencil, your cli would have to have the new ability to create scss instead of css files

[max-scopp]

You can use vscode Stencil tools in the meantime, you can configure the extensions.