@stencil/core 4.18.3 → 4.19.0

package/cli/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI (CommonJS) v4.18.3 | MIT Licensed | https://stenciljs.com
+ Stencil CLI (CommonJS) v4.19.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __create = Object.create;
@@ -3617,8 +3617,14 @@ var taskGenerate = async (config) => {
     config.logger.error(tagError);
     return config.sys.exit(1);
   }
-  const filesToGenerateExt = await chooseFilesToGenerate();
-  if (void 0 === filesToGenerateExt) {
+  let cssExtension = "css";
+  if (!!config.plugins.find((plugin) => plugin.name === "sass")) {
+    cssExtension = await chooseSassExtension();
+  } else if (!!config.plugins.find((plugin) => plugin.name === "less")) {
+    cssExtension = "less";
+  }
+  const filesToGenerateExt = await chooseFilesToGenerate(cssExtension);
+  if (!filesToGenerateExt) {
     return;
   }
   const extensionsToGenerate = ["tsx", ...filesToGenerateExt];
@@ -3632,7 +3638,13 @@ var taskGenerate = async (config) => {
   await checkForOverwrite(filesToGenerate, config);
   const writtenFiles = await Promise.all(
     filesToGenerate.map(
-      (file) => getBoilerplateAndWriteFile(config, componentName, extensionsToGenerate.includes("css"), file)
+      (file) => getBoilerplateAndWriteFile(
+        config,
+        componentName,
+        extensionsToGenerate.includes("css") || extensionsToGenerate.includes("sass") || extensionsToGenerate.includes("scss") || extensionsToGenerate.includes("less"),
+        file,
+        cssExtension
+      )
     )
   ).catch((error) => config.logger.error(error));
   if (!writtenFiles) {
@@ -3645,22 +3657,34 @@ var taskGenerate = async (config) => {
   const absoluteRootDir = config.rootDir;
   writtenFiles.map((file) => console.log(`  - ${(0, import_path2.relative)(absoluteRootDir, file)}`));
 };
-var chooseFilesToGenerate = async () => {
+var chooseFilesToGenerate = async (cssExtension) => {
   const { prompt } = await Promise.resolve().then(() => __toESM(require_lib()));
   return (await prompt({
     name: "filesToGenerate",
     type: "multiselect",
     message: "Which additional files do you want to generate?",
     choices: [
-      { value: "css", title: "Stylesheet (.css)", selected: true },
+      { value: cssExtension, title: `Stylesheet (.${cssExtension})`, selected: true },
       { value: "spec.tsx", title: "Spec Test  (.spec.tsx)", selected: true },
       { value: "e2e.ts", title: "E2E Test (.e2e.ts)", selected: true }
     ]
   })).filesToGenerate;
 };
+var chooseSassExtension = async () => {
+  const { prompt } = await Promise.resolve().then(() => __toESM(require_lib()));
+  return (await prompt({
+    name: "sassFormat",
+    type: "select",
+    message: "Which Sass format would you like to use? (More info: https://sass-lang.com/documentation/syntax/#the-indented-syntax)",
+    choices: [
+      { value: "sass", title: `*.sass Format`, selected: true },
+      { value: "scss", title: "*.scss Format" }
+    ]
+  })).sassFormat;
+};
 var getFilepathForFile = (filePath, componentName, extension) => isTest2(extension) ? normalizePath((0, import_path2.join)(filePath, "test", `${componentName}.${extension}`)) : normalizePath((0, import_path2.join)(filePath, `${componentName}.${extension}`));
-var getBoilerplateAndWriteFile = async (config, componentName, withCss, file) => {
-  const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss);
+var getBoilerplateAndWriteFile = async (config, componentName, withCss, file, styleExtension) => {
+  const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss, styleExtension);
   await config.sys.writeFile(normalizePath(file.path), boilerplate);
   return file.path;
 };
@@ -3684,12 +3708,15 @@ var checkForOverwrite = async (files, config) => {
 var isTest2 = (extension) => {
   return extension === "e2e.ts" || extension === "spec.tsx";
 };
-var getBoilerplateByExtension = (tagName, extension, withCss) => {
+var getBoilerplateByExtension = (tagName, extension, withCss, styleExtension) => {
   switch (extension) {
     case "tsx":
-      return getComponentBoilerplate(tagName, withCss);
+      return getComponentBoilerplate(tagName, withCss, styleExtension);
     case "css":
-      return getStyleUrlBoilerplate();
+    case "less":
+    case "sass":
+    case "scss":
+      return getStyleUrlBoilerplate(styleExtension);
     case "spec.tsx":
       return getSpecTestBoilerplate(tagName);
     case "e2e.ts":
@@ -3698,11 +3725,11 @@ var getBoilerplateByExtension = (tagName, extension, withCss) => {
       throw new Error(`Unkown extension "${extension}".`);
   }
 };
-var getComponentBoilerplate = (tagName, hasStyle) => {
+var getComponentBoilerplate = (tagName, hasStyle, styleExtension) => {
   const decorator = [`{`];
   decorator.push(`  tag: '${tagName}',`);
   if (hasStyle) {
-    decorator.push(`  styleUrl: '${tagName}.css',`);
+    decorator.push(`  styleUrl: '${tagName}.${styleExtension}',`);
   }
   decorator.push(`  shadow: true,`);
   decorator.push(`}`);
@@ -3710,7 +3737,6 @@ var getComponentBoilerplate = (tagName, hasStyle) => {
 
 @Component(${decorator.join("\n")})
 export class ${toPascalCase(tagName)} {
-
   render() {
     return (
       <Host>
@@ -3718,11 +3744,12 @@ export class ${toPascalCase(tagName)} {
       </Host>
     );
   }
-
 }
 `;
 };
-var getStyleUrlBoilerplate = () => `:host {
+var getStyleUrlBoilerplate = (ext) => ext === "sass" ? `:host
+  display: block
+` : `:host {
   display: block;
 }
 `;

package/cli/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI v4.18.3 | MIT Licensed | https://stenciljs.com
+ Stencil CLI v4.19.0 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -3611,8 +3611,14 @@ var taskGenerate = async (config) => {
     config.logger.error(tagError);
     return config.sys.exit(1);
   }
-  const filesToGenerateExt = await chooseFilesToGenerate();
-  if (void 0 === filesToGenerateExt) {
+  let cssExtension = "css";
+  if (!!config.plugins.find((plugin) => plugin.name === "sass")) {
+    cssExtension = await chooseSassExtension();
+  } else if (!!config.plugins.find((plugin) => plugin.name === "less")) {
+    cssExtension = "less";
+  }
+  const filesToGenerateExt = await chooseFilesToGenerate(cssExtension);
+  if (!filesToGenerateExt) {
     return;
   }
   const extensionsToGenerate = ["tsx", ...filesToGenerateExt];
@@ -3626,7 +3632,13 @@ var taskGenerate = async (config) => {
   await checkForOverwrite(filesToGenerate, config);
   const writtenFiles = await Promise.all(
     filesToGenerate.map(
-      (file) => getBoilerplateAndWriteFile(config, componentName, extensionsToGenerate.includes("css"), file)
+      (file) => getBoilerplateAndWriteFile(
+        config,
+        componentName,
+        extensionsToGenerate.includes("css") || extensionsToGenerate.includes("sass") || extensionsToGenerate.includes("scss") || extensionsToGenerate.includes("less"),
+        file,
+        cssExtension
+      )
     )
   ).catch((error) => config.logger.error(error));
   if (!writtenFiles) {
@@ -3639,22 +3651,34 @@ var taskGenerate = async (config) => {
   const absoluteRootDir = config.rootDir;
   writtenFiles.map((file) => console.log(`  - ${relative(absoluteRootDir, file)}`));
 };
-var chooseFilesToGenerate = async () => {
+var chooseFilesToGenerate = async (cssExtension) => {
   const { prompt } = await Promise.resolve().then(() => __toESM(require_lib()));
   return (await prompt({
     name: "filesToGenerate",
     type: "multiselect",
     message: "Which additional files do you want to generate?",
     choices: [
-      { value: "css", title: "Stylesheet (.css)", selected: true },
+      { value: cssExtension, title: `Stylesheet (.${cssExtension})`, selected: true },
       { value: "spec.tsx", title: "Spec Test  (.spec.tsx)", selected: true },
       { value: "e2e.ts", title: "E2E Test (.e2e.ts)", selected: true }
     ]
   })).filesToGenerate;
 };
+var chooseSassExtension = async () => {
+  const { prompt } = await Promise.resolve().then(() => __toESM(require_lib()));
+  return (await prompt({
+    name: "sassFormat",
+    type: "select",
+    message: "Which Sass format would you like to use? (More info: https://sass-lang.com/documentation/syntax/#the-indented-syntax)",
+    choices: [
+      { value: "sass", title: `*.sass Format`, selected: true },
+      { value: "scss", title: "*.scss Format" }
+    ]
+  })).sassFormat;
+};
 var getFilepathForFile = (filePath, componentName, extension) => isTest2(extension) ? normalizePath(join2(filePath, "test", `${componentName}.${extension}`)) : normalizePath(join2(filePath, `${componentName}.${extension}`));
-var getBoilerplateAndWriteFile = async (config, componentName, withCss, file) => {
-  const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss);
+var getBoilerplateAndWriteFile = async (config, componentName, withCss, file, styleExtension) => {
+  const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss, styleExtension);
   await config.sys.writeFile(normalizePath(file.path), boilerplate);
   return file.path;
 };
@@ -3678,12 +3702,15 @@ var checkForOverwrite = async (files, config) => {
 var isTest2 = (extension) => {
   return extension === "e2e.ts" || extension === "spec.tsx";
 };
-var getBoilerplateByExtension = (tagName, extension, withCss) => {
+var getBoilerplateByExtension = (tagName, extension, withCss, styleExtension) => {
   switch (extension) {
     case "tsx":
-      return getComponentBoilerplate(tagName, withCss);
+      return getComponentBoilerplate(tagName, withCss, styleExtension);
     case "css":
-      return getStyleUrlBoilerplate();
+    case "less":
+    case "sass":
+    case "scss":
+      return getStyleUrlBoilerplate(styleExtension);
     case "spec.tsx":
       return getSpecTestBoilerplate(tagName);
     case "e2e.ts":
@@ -3692,11 +3719,11 @@ var getBoilerplateByExtension = (tagName, extension, withCss) => {
       throw new Error(`Unkown extension "${extension}".`);
   }
 };
-var getComponentBoilerplate = (tagName, hasStyle) => {
+var getComponentBoilerplate = (tagName, hasStyle, styleExtension) => {
   const decorator = [`{`];
   decorator.push(`  tag: '${tagName}',`);
   if (hasStyle) {
-    decorator.push(`  styleUrl: '${tagName}.css',`);
+    decorator.push(`  styleUrl: '${tagName}.${styleExtension}',`);
   }
   decorator.push(`  shadow: true,`);
   decorator.push(`}`);
@@ -3704,7 +3731,6 @@ var getComponentBoilerplate = (tagName, hasStyle) => {
 
 @Component(${decorator.join("\n")})
 export class ${toPascalCase(tagName)} {
-
   render() {
     return (
       <Host>
@@ -3712,11 +3738,12 @@ export class ${toPascalCase(tagName)} {
       </Host>
     );
   }
-
 }
 `;
 };
-var getStyleUrlBoilerplate = () => `:host {
+var getStyleUrlBoilerplate = (ext) => ext === "sass" ? `:host
+  display: block
+` : `:host {
   display: block;
 }
 `;

package/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/cli",
-  "version": "4.18.3",
+  "version": "4.19.0",
   "description": "Stencil CLI.",
   "main": "./index.cjs",
   "module": "./index.js",

package/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/compiler",
-  "version": "4.18.3",
+  "version": "4.19.0",
   "description": "Stencil Compiler.",
   "main": "./stencil.js",
   "types": "./stencil.d.ts",