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]

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 component.

[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 plugin of stencil, your cli should have the ability to create scss instead of css files

[max-scopp]

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

[diegolsarmiento]

Just to be aware: The extension in VS generates e2e file inside the component folder ('npm run generate' creates 'test' folder and inside spec and e2e files).

[tanner-reits]

Hi all 👋

I think this could be a nice addition we add in the future. To feel effective, however, seems like we would need to make some related changes to how our started projects are created for this to be useful end-to-end. I'll put a label on here so this can get ingested into our backlog for future refinement. Keep an eye here for future updates!

[christian-bromann]

Implemented in #5857

[tanner-reits]

This was included in today's v4.19.0 release!