How Can I Integrate Alpine with RunCSS? #611

mudgen · 2020-06-28T00:18:10Z

mudgen
Jun 28, 2020

RunCSS is a runtime version of TailwindCSS. See here: https://dev.to/mudgen/runcss-a-runtime-version-of-tailwindcss-5dic

RunCSS works by calling the processClasses function on the strings in the class attributes of DOM elements. processClasses generates at runtime the CSS needed by the browser.

In order to integrate RunCSS with Alpine, is there a way that Alpine can call the processClasses function on each string value for each class attribute for each DOM element?

As an example here is how RunCSS integrates with Webscript:

// Importing Webscript
import builders from 'https://unpkg.com/webscript@^0/dist/webscript.modern.js'
import createDOMElement from 'https://unpkg.com/webscript@^0/dist/createDOMElement.modern.js'
// Importing RunCSS
import processClasses from 'https://unpkg.com/runcss@^0/dist/runcss.modern.js'

// Integrating RunCSS with Webscript
function createElement (type, props, ...children) {
  if (props.class) {
    processClasses(props.class)
  }
  return createDOMElement(type, props, ...children)
}

// Create the builders used to build DOM elements
const { div, img, h2 } = builders(createElement)

// Card display
const card =
  div.class`md:flex bg-white rounded-lg p-6`(
    img.class`h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6`.src`./avatar.jpg`,
    div.class`text-center md:text-left`(
      h2.class`text-lg``Erin Lindford`,
      div.class`text-purple-500``Customer Support`,
      div.class`text-gray-600``[email protected]`,
      div.class`text-gray-600``(555) 765-4321`))

Here is an example of how to integrate RunCSS without a Javascript library:

<html>
<head><head>
<body>
  <!-- HTML that uses RunCSS here. -->
  <div class="md:flex bg-white rounded-lg p-6">
    <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
    <div class="text-center md:text-left">
      <h2 class="text-lg">Erin Lindford</h2>
      <div class="text-purple-500">Customer Support</div>
      <div class="text-gray-600">[email protected]</div>
      <div class="text-gray-600">(555) 765-4321</div>
    </div>
  </div>    
  <!-- This code generates all the CSS needed for the webpage. -->
  <script type="module">
    import processClasses from 'https://unpkg.com/runcss@^0/dist/runcss.modern.js'
    // Get all elements that have a class attribute.
    for(const element of document.querySelectorAll('*[class]')) {    
      processClasses(element.className)
    }  
  </script>
</body>

Someone said that integration with Alpine could be done with x-init. Could someone give me an example of that?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How Can I Integrate Alpine with RunCSS? #611

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How Can I Integrate Alpine with RunCSS? #611

mudgen Jun 28, 2020

Replies: 0 comments

mudgen
Jun 28, 2020