ionic-team
Allow generate new component with scss file instead of css
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
I would like to make a PR for this feature, could someone asign me this issues. Thanks in advance
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
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
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.
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
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
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).
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!
