• Resolved won5572

    (@won5572)


    I saw the windicss. Windi CSS is fully compatible with Tailwind CSS v2.
    I read about the compile page. (https://windicss.org/integrations/javascript.html)
    I think it’s able to generate the css from db content.
    Generate css >> upload by ajax-post >> import css file uploaed

    const { Processor } = require("windicss/lib");
    const { HTMLParser } = require("windicss/utils/parser");
    
    export function generateStyles(html) {
      // Get windi processor
      const processor = new Processor();
    
      // Parse HTML to get array of class matches with location
      const parser = new HTMLParser(html);
    
      // Generate preflight based on the HTML we input
      const preflightSheet = processor.preflight(html, false);
    
      console.log(preflightSheet);
    
      const PREFIX = "";
      const outputCSS = [];
      let outputHTML = "";
      let indexStart = 0;
    
      parser.parseClasses().forEach((p) => {
        // add HTML substring from index to match start
        outputHTML += html.substring(indexStart, p.start);
    
        // generate stylesheet
        const style = processor.compile(p.result, PREFIX);
    
        // add the styleSheet to the styles stack
        outputCSS.push(style.styleSheet);
    
        // append ignored classes and push to output
        outputHTML += [style.className, ...style.ignored].join(" ");
    
        // mark the end as our new start for next iteration
        indexStart = p.end;
      });
    
      // append the remainder of html
      outputHTML += html.substring(indexStart);
    
      // Build styles
      const MINIFY = false;
      const styles = outputCSS
        // extend the preflight sheet with each sheet from the stack
        .reduce((acc, curr) => acc.extend(curr), preflightSheet)
        .build(MINIFY);
    
      return {
        styles,
        outputHTML
      };
    }
    
    const test111 = generateStyles("<div class='p-3'>test</div>");
    console.log(test111);
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Greg

    (@freshbrewedweb)

    Hi @won5572 thanks for that suggestion! In the latest version 0.3 I moved to a server side generation of CSS instead of the client side since it was causing several issues that were hard to control including a potential security vulnerability (CSS injection).

    In the case of Windi CSS and your suggestion, unfortunately that would require a NodeJS runtime which we don’t have in WordPress. Instead I made my own server side Tailwind API here. Feel free to use for your cases directly too, it’s completely free.

    Plugin Author Greg

    (@freshbrewedweb)

    Marking resolved

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Opinion about tailwindcss compile by javascript’ is closed to new replies.