How to search and inject with vanilla JS in a style tag the CSS clasess used in HTML document?

Question

0.00/5 (No votes)

See more:

I am working with TailwindCSS. It has a JS script to find in your HTML file the TailwindCSS used and inject into a "style" tag of the HTML file.

<html><br />
  <head><br />
    <script src="https://cdn.tailwindcss.com"></script><br />
  </head><br />
  <body><br />
    <div id="loading" class=" flex h-screen"><br />
      <div class="m-auto"><br />
        <button class="btn rounded-full bg-red-700 p-5 text-white"><br />
          A red pill<br />
        </button><br />
      </div><br />
    </div><br />
  </body><br />
</html><br />

Here a simple example: https://web-platform-mo3pvj.stackblitz.io/

Can see the code to see the injected by the Tailwind .js

Exists any vanilla JS tool to extract the classes used in a .css file of a HTML and inject into a "style" tag? It is for work in development and remove the .css file in production.

Note: I know libraries like "UnCss" or "PurgeCss" but it needs a Node.js server installed

Thank you

What I have tried:

In base a full.css file, generate a new css code with only the used classes. With vanila JS.

Posted 5-Jun-23 8:37am

JR Grande

Add a Solution

Comments

Member 15627495 6-Jun-23 2:29am

as CSS are read and apply 'sequential', you do not need to locate a css field descriptor, then add one parameters.
you can put it at end of one file css, it will works !

the CSS need a accurate 'selector' , nothing else.

to help you understand :

#demo_tag{
 
 background-color:blue; // apply at reading
 background-color:yellow; // apply at reading
 background-color:red; // apply at reading, then :
 // the background will be 'red', because of a 'sequential reading' of the css
 // the last value for the color is display to the user.
}

later in my css file, I have again the same tag :

#demo_tag{

 background-color:purple;
 // the background will be purple , not red
}

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)