Creates a 'link' element with the path specified in the first parameter and connects it to the element specified in the second parameter (which defaults to document.body).

📝 Pre-Requirements

All the pre-requisites mentioned here are not necessary, only the one you choose to install.

• git To clone the repository using git.
• npm To install the package using npm.

🔧 Instalation

Git

git clone 'https://github.com/OWLjz18/import-css-jz.git'

Or as a submodule:

git submodule add 'https://github.com/OWLjz18/import-css-jz.git'

NPM

npm install import-css-jz

🔎 Use

First of all, they need to import the module. Then you can save it with the name you like, I choose to do it under the name "importCSS".

Now suppose you have a file called code.js and a style sheet called magic.css and you want to import that style sheet into the DOM, we would do something like this:

// code.js
import importCSS from '/import-css-jz';

importCSS('./magic.css');

That would be the same as this, if you did it manually:

const styleSheet = document.createElement('link');
link.rel = 'stylesheet';
link.href = './magic.css';

document.head.append(styleSheet);

A case in which its use may seem interesting to you would be when creating web components in a vanilla way, since as we know, style sheets cannot reach the shadowDOM.

Let's see an example, it will be a bit long, but explanatory:

Let's first create the context, we have a file called "component.js" and one called "component.css". Now we will see both files and then we will explain what happens in both.

component.css:

.myCustomTitle {
  color: red;
}

component.js:

import importCSS from '/import-css-jz/src/index.js';

const MyComponent = class extends HTMLElement {
  
  constructor () {

    super();

    this.attachShadow({mode: 'open'});

  }
  
  _render () {
    
    this.shadowRoot.innerHTML = '<h1 class="myCustomTitle">Hello World?</h1>';
    
    importCSS('./component.css', this.shadowRoot);
    
  }
  
  connectedCallback () {
    
    this._render();
    
  }
  
  static get observedAttributes () {}

  attributeChangedCallback (name, oldValue, newValue) {}

};

customElements.define('my-component', MyComponent);

So what do we do here? Easy, let's explain in parts:

First we create a simple component with the text "Hello World?" and add a myCustomTitle class to it, with which from CSS, we hope to give it a red color.

The interesting thing here happens in the _render method, where after specifying the content of the component, we execute importCSS, but this time, passing this.shadowRoot as the second parameter so that when the component is rendered , your style sheet is connected in shadowDOM and not in document.head as it is by default.

And with that, we would have our component saying "Hello World?" in color red, because... He read the style sheet!!

Note: import-css-jz is responsible for verifying that the style sheet you are about to import is not already in your document, if it is, import-css-jz does not add it, in order to avoid connecting the same style sheet.

🦉 Author

• José Zambrano (OWLjz18) => Project Creator.
  • Email => [email protected]
  • Instagram => @owljz18

📃 License

This project is licensed under an MIT license, please visit the LICENSE.md file for more information about it.