Guidelines for Implementing Stylesheets from a Referenced Node Module

Question

Guidelines for Implementing Stylesheets from a Referenced Node Module

I am currently developing a VS Code module that incorporates highlight.js to produce HTML for syntax highlighting of source code. Within the highlight.js npm package, there is a directory named styles containing various CSS files that I intend to utilize.

Is there a specific procedure I should follow in order to retrieve these CSS files during run-time?

I am referring to all of them.

It seems likely that utilizing something like require will be necessary to ensure they are packaged even without individual references to each CSS file. However, I require assistance on how to achieve this.

Furthermore, how does one access these packaged resources?

css npm visual-studio-code vscode-extensions

Answer 1

Answer №1

Automatically, the bundling process takes care of everything for you without any manual intervention required. During deployment, your project's node_modules folder is included along with the extension.

To access the resources within these modules, it's crucial to know their location. These modules are deployed to a node_modules folder that can be found directly on the extension path.

Now, how do you determine the extension folder's location during runtime? While there is a method described in this VSCode extensions location variable, it's not recommended. Here's a better approach:

let x = vscode.extensions.getExtension("dilcorp.groovyext");
if (!x) {
  throw new Error("Cannot resolve extension. Has the name changed? " +
                  "It is defined by the publisher and the extension name " + 
                  "which are defined in package.json`); 
}
let stylePath = `${x.extensionPath}/node_modules/highlight.js/styles`;

The above code has two key parts. Firstly, we extract runtime information about the extension, including its absolute file path stored as a property called extensionPath.

The second part leverages the fact that our extension project's node_modules directory is copied into the extensionPath folder.

This approach works effectively when running through the debugger.

Answer 2

Automatically, the bundling process takes care of everything for you without any manual intervention required. During deployment, your project's node_modules folder is included along with the extension.

To access the resources within these modules, it's crucial to know their location. These modules are deployed to a node_modules folder that can be found directly on the extension path.

Now, how do you determine the extension folder's location during runtime? While there is a method described in this VSCode extensions location variable, it's not recommended. Here's a better approach:

let x = vscode.extensions.getExtension("dilcorp.groovyext");
if (!x) {
  throw new Error("Cannot resolve extension. Has the name changed? " +
                  "It is defined by the publisher and the extension name " + 
                  "which are defined in package.json`); 
}
let stylePath = `${x.extensionPath}/node_modules/highlight.js/styles`;

The above code has two key parts. Firstly, we extract runtime information about the extension, including its absolute file path stored as a property called extensionPath.

The second part leverages the fact that our extension project's node_modules directory is copied into the extensionPath folder.

This approach works effectively when running through the debugger.

Guidelines for Implementing Stylesheets from a Referenced Node Module

Answer №1

Similar questions

Delay the occurrence of a hover effect until the previous effect has finished executing

A syntax error has been identified when using a globally installed npm package for a CLI Node.js/CoffeeScript application

Tips for dynamically modifying style mode in Vue.js

Jquery div mysteriously disappearing without explanation

Element is not perfectly aligned with the bottom; Slightly below the bottom edge

What causes the "node: bad option" error to occur when I include a custom flag in the nodejs command line within an Angular 9 application?

How to make text dynamically shrink with TailwindCSS class 'flex-shrink-0'

Effortlessly glide to the form and center your attention on the textarea

Issues that can prove to be catastrophic during the creation of Knockout.js

creating a table with only two td's for formatting

It has been quite the challenge trying to integrate Argon2 with Angular 8 on MacOS, as it seems completely non-functional at the

Swap Text Inside String - JS

CSS: Struggling to Keep Footer at the Bottom of the Page

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

Incorporating Java project dependencies into an npm project

How to properly set margins for button components in Material UI

Elements are not detected after applying display:none

How can I customize the visibility toggles for the password input field in Angular Material?

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Companimation Woes: CSS3 Animations Not Triggering Unless Loaded