-
-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: added css to packem add command #53
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,19 @@ | ||
import { defineConfig } from "@visulima/packem/config"; | ||
import transformer from "@visulima/packem/transformer/esbuild"; | ||
import lessLoader from "@visulima/packem/css/loader/less"; | ||
import postcssLoader from "@visulima/packem/css/loader/postcss"; | ||
import sassLoader from "@visulima/packem/css/loader/sass"; | ||
import stylusLoader from "@visulima/packem/css/loader/stylus"; | ||
import lessLoader from "@visulima/packem/css/loader/less"; | ||
import sassLoader from "@visulima/packem/css/loader/sass"; | ||
import sourceMapLoader from "@visulima/packem/css/loader/sourcemap"; | ||
import cssnanoMinifier from "@visulima/packem/css/minifier/cssnano"; | ||
|
||
export default defineConfig({ | ||
transformer, | ||
rollup: { | ||
css: { | ||
mode: "extract", | ||
loaders: [lessLoader, postcssLoader, sassLoader, stylusLoader, sourceMapLoader], | ||
}, | ||
}, | ||
loaders: [postcssLoader, stylusLoader, lessLoader, sassLoader, sourceMapLoader,], | ||
minifier: cssnanoMinifier, | ||
} | ||
} | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -332,7 +332,7 @@ export { a }; | |
await createPackemConfig(temporaryDirectoryPath, { | ||
config: { | ||
onSuccess: "echo hello && echo world", | ||
} | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification Based on the implementation found in Security and cross-platform concerns confirmed in onSuccess implementation The current implementation of
Recommendations:
🔗 Analysis chainConsider security and cross-platform compatibility in onSuccess tests. The test cases for the
Let's check if there are any command validation or sanitization measures: Consider:
Let me search for more specific implementation details about the onSuccess command handling. Let me search for the specific implementation of the onSuccess handler to understand how commands are executed. 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Search for command validation in the codebase
rg -A 5 'onSuccess.*command'
Length of output: 1363 Script: #!/bin/bash
# Search for onSuccess implementation
ast-grep --pattern 'onSuccess'
# Also search for command execution related code
rg -A 10 'exec.*command|spawn.*command'
Length of output: 4627 Script: #!/bin/bash
# Search for files containing onSuccess implementation
fd -e ts -e js -e mjs onSuccess
# Search for the actual implementation
rg -A 10 "function.*onSuccess|const.*onSuccess"
Length of output: 2312 |
||
}); | ||
|
||
const binProcess = await execPackemSync("build", [], { | ||
|
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,12 +1,15 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { cwd } from "node:process"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { installPackage } from "@antfu/install-pkg"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { confirm, multiselect, select, spinner } from "@clack/prompts"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import type { Cli } from "@visulima/cerebro"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { readFile, writeFile } from "@visulima/fs"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { resolve } from "@visulima/path"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import MagicString from "magic-string"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
import findPackemFile from "../utils/find-packem-file"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import cssLoaderDependencies from "./utils/css-loader-dependencies"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
import type cssMinifierDependencies from "./utils/css-minifier-dependencies"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
prisis marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix incorrect 'import type' for 'cssMinifierDependencies' The Apply this diff to fix the import: -import type cssMinifierDependencies from "./utils/css-minifier-dependencies";
+import cssMinifierDependencies from "./utils/css-minifier-dependencies"; 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const typedocPackages = ["typedoc", "typedoc-plugin-markdown", "typedoc-plugin-rename-defaults", "@ckeditor/typedoc-plugins"]; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
@@ -18,12 +21,31 @@ const createAddCommand = (cli: Cli): void => { | |||||||||||||||||||||||||||||||||||||||||||||||||||||
required: true, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
}, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
description: "Add a optional packem feature to your project", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
// eslint-disable-next-line sonarjs/cognitive-complexity | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
execute: async ({ argument, logger, options }): Promise<void> => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
const s = spinner(); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+25
to
+26
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ensure the spinner is properly stopped and cleaned up. The spinner is started using Consider adding a try {
// Command execution logic
} catch (error) {
// Error handling
} finally {
s.stop();
} |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const rootDirectory = resolve(cwd(), options.dir ?? "."); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const packemConfigFilePath = await findPackemFile(rootDirectory, options.config ?? ""); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
let packemConfigFilePath: string | undefined; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
try { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
packemConfigFilePath = await findPackemFile(rootDirectory, options.config); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} catch { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
// @TODO: Add a sub command run question to run `packem init` if the user wants to | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.error("Could not find a packem config file, please run `packem init` first."); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
return; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const packemConfig: string = await readFile(packemConfigFilePath, { buffer: false }); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
let packemConfigFormat = "cjs"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfig.includes("import")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
packemConfigFormat = "esm"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const magic = new MagicString(packemConfig); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (argument.includes("typedoc")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
@@ -33,11 +55,11 @@ const createAddCommand = (cli: Cli): void => { | |||||||||||||||||||||||||||||||||||||||||||||||||||||
return; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.info("Adding typedoc dependencies..."); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
await installPackage(typedocPackages, { cwd: process.cwd(), dev: true, silent: true }); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend(`import typedocBuilder from "@visulima/packem/builder/typedoc";\n`); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfigFormat === "cjs") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend(`const typedocBuilder = require("@visulima/packem/builder/typedoc");\n`); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} else { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend(`import typedocBuilder from "@visulima/packem/builder/typedoc";\n`); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
// add the builder key to the packem config, if it doesn't exist | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfig.includes("builder: {")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
@@ -47,7 +69,142 @@ const createAddCommand = (cli: Cli): void => { | |||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.replace("transformer,", "transformer,\n builder: {\n typedoc: typedocBuilder,\n },"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.success("Typedoc added!"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.info("Adding typedoc dependencies..."); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
s.start("Installing packages"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
await installPackage(typedocPackages, { cwd: process.cwd(), dev: true, silent: true }); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
s.stop("Installed packages"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.success("\nTypedoc added!"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (argument.includes("css")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfig.includes("css: {") || packemConfig.includes("@visulima/packem/css")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.warn("Css loaders have already been added to the packem config."); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
return; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const cssLoaders: (keyof typeof cssLoaderDependencies | "sourceMap")[] = []; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const mainCssLoader = (await select({ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
message: "Pick a css loader", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
options: [ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "PostCSS", value: "postcss" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "Lightning CSS", value: "lightningcss" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
], | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
})) as keyof typeof cssLoaderDependencies; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
cssLoaders.push(mainCssLoader); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
let extraCssLoaders = (await multiselect({ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
message: "Pick extra loaders", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
options: [ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "Sass", value: "sass" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "Stylus", value: "stylus" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "Less", value: "less" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
], | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
required: false, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
})) as (keyof typeof cssLoaderDependencies)[]; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (extraCssLoaders.includes("sass")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
const sassLoader = await select({ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
message: "Pick a sass loader", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
options: [ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ hint: "recommended", label: "Sass embedded", value: "sass-embedded" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "Sass", value: "sass" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ hint: "legacy", label: "Node Sass", value: "node-sass" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
], | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
}); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (sassLoader !== "sass") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
extraCssLoaders = extraCssLoaders.filter((loader) => loader !== "sass"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
extraCssLoaders.push(sassLoader as keyof typeof cssLoaderDependencies); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
cssLoaders.push(...extraCssLoaders); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const packagesToInstall: string[] = []; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
for (const loader of cssLoaders) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
packagesToInstall.push(...cssLoaderDependencies[loader as keyof typeof cssLoaderDependencies]); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
cssLoaders.push("sourceMap"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
for (let loader of cssLoaders) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (loader === "sass-embedded" || loader === "node-sass") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
loader = "sass"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfigFormat === "cjs") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend(`const ${loader as string}Loader = require("@visulima/packem/css/loader/${loader.toLowerCase() as string}");\n`); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} else { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend(`import ${loader as string}Loader from "@visulima/packem/css/loader/${loader.toLowerCase() as string}";\n`); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+134
to
+146
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Review inclusion of 'sourceMap' in 'cssLoaders' Adding Remove Apply this diff to fix the issue: -cssLoaders.push("sourceMap");
for (let loader of cssLoaders) {
if (loader === "sass-embedded" || loader === "node-sass") {
loader = "sass";
}
- if (packemConfigFormat === "cjs") {
- magic.prepend(`const ${loader as string}Loader = require("@visulima/packem/css/loader/${loader.toLowerCase() as string}");\n`);
- } else {
- magic.prepend(`import ${loader as string}Loader from "@visulima/packem/css/loader/${loader.toLowerCase() as string}";\n`);
- }
+ const loaderImport = packemConfigFormat === "cjs"
+ ? `const ${loader}Loader = require("@visulima/packem/css/loader/${loader.toLowerCase()}");\n`
+ : `import ${loader}Loader from "@visulima/packem/css/loader/${loader.toLowerCase()}";\n`;
+
+ magic.prepend(loaderImport);
}
+// Handle source map configuration separately if required 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const useCssMinifier = (await confirm({ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
initialValue: false, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
message: "Do you want to minify your css?", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
})) as boolean; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
let cssMinifier: keyof typeof cssMinifierDependencies | undefined; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (useCssMinifier) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
cssMinifier = (await select({ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
message: "Pick a css minifier", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
options: [ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "CSSNano", value: "cssnano" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
{ label: "Lightning CSS", value: "lightningcss" }, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
], | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
})) as keyof typeof cssMinifierDependencies; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (!cssLoaders.includes("lightningcss")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
packagesToInstall.push(cssMinifier); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+165
to
+167
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Avoid adding undefined or duplicate packages When adding the CSS minifier to Add a check to prevent undefined values and duplicate entries. if (cssMinifier && !packagesToInstall.includes(cssMinifier)) {
packagesToInstall.push(cssMinifier);
} 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfigFormat === "cjs") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
`const ${cssMinifier as string}Minifier = require("@visulima/packem/css/minifier/${cssMinifier.toLowerCase() as string}");\n`, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} else { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.prepend(`import ${cssMinifier as string}Minifier from "@visulima/packem/css/minifier/${cssMinifier.toLowerCase() as string}";\n`); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
const stringCssLoaders = cssLoaders | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
.map((loader) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (loader === "sass-embedded" || loader === "node-sass") { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
// eslint-disable-next-line no-param-reassign | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
loader = "sass"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
return `${loader}Loader`; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
}) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
.join(", "); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
if (packemConfig.includes("rollup: {")) { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.replace( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
"rollup: {", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
`rollup: {\n css: {${cssMinifier ? `\n minifier: ${cssMinifier as string}Minifier,` : ""}\n loaders: [${stringCssLoaders}],\n },\n`, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} else { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
const transformerPlaceholder = packemConfig.includes(" transformer,") ? " transformer," : " transformer"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
magic.replace( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
transformerPlaceholder, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
` transformer,\n rollup: {\n css: {${cssMinifier ? `\n minifier: ${cssMinifier as string}Minifier,` : ""}\n loaders: [${stringCssLoaders}],\n },\n },`, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
s.start("Installing packages"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
await installPackage(packagesToInstall, { cwd: process.cwd(), dev: true, silent: true }); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
s.stop("Installed packages"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Handle package installation errors gracefully. While the package installation process is wrapped in a spinner to indicate progress, it's important to handle any errors that may occur during the installation gracefully. If an error occurs, the spinner should be stopped, and an appropriate error message should be logged to inform the user about the failure. Here's an example of how you can handle package installation errors: try {
s.start("Installing packages");
await installPackage(packagesToInstall, { cwd: process.cwd(), dev: true, silent: true });
s.stop("Packages installed successfully");
} catch (error) {
s.stop("Package installation failed");
logger.error("An error occurred while installing packages:");
logger.error(error);
// Optionally, you can provide instructions on how to manually install the packages
logger.info("Please try installing the packages manually using the following command:");
logger.info(`npm install ${packagesToInstall.join(" ")}`);
return;
} By catching any errors that occur during package installation, you can provide a better user experience by informing them about the failure and suggesting possible solutions. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Handle installation errors gracefully When installing packages, errors may occur (e.g., network issues, package not found). Currently, the code does not handle such exceptions. Wrap the package installation in a try-catch block to handle errors gracefully and inform the user. try {
loadingSpinner.start("Installing packages");
await installPackage(packagesToInstall, { cwd: process.cwd(), dev: true, silent: true });
loadingSpinner.stop("Installed packages");
+} catch (error) {
+ loadingSpinner.stop("Failed to install packages");
+ logger.error(`Package installation failed: ${error.message}`);
+ return;
}
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
logger.success("\nCSS loaders added!"); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
await writeFile(packemConfigFilePath, magic.toString(), { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
The loader order in the configuration file needs to be updated to match the intended processing sequence
The configuration in
examples/styles/packem.config.ts
has the loaders in the wrong order. According to the core implementation inpackages/packem/src/rollup/plugins/css/index.ts
, the intended processing sequence is:The current configuration has postcss first and sourcemap last, which contradicts the sorting order enforced by the
sortByNameOrder
function.🔗 Analysis chain
Verify CSS loader order for optimal processing.
The order of CSS loaders can impact the processing pipeline. Please verify that this order is intentional:
Consider whether preprocessors (Stylus, Less, Sass) should run before PostCSS for optimal results.
Let me check the actual implementation of the loader ordering logic to understand the intended sequence.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
Length of output: 523
Script:
Length of output: 786