headlong - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -33,3 +33,3 @@ export { default as colors } from "./utils/colors.js";
       .map(i => (i.addedNodes[0].classList.value || "").split(' ')).flat().filter(filterClases))
-   ]
+  ]
     .map(process)
@@ -44,5 +44,5 @@ .filter(Boolean)
   [...document.querySelectorAll("*")]
-      .map(i => i.classList.value.split(' '))
-      .flat()
-  )]
+    .map(i => i.classList.value.split(' '))
+    .flat()
+)]
   .filter(filterClases)
@@ -87,4 +87,4 @@ .map(process)
 
-export { parse, classes };
+export { parse, classes, config };
 
 export default init;

index.md

@@ -7,3 +7,3 @@ ---
 
-*Tailwind CSS on the fly without PostCSS*
+_Tailwind CSS on the fly without PostCSS_
 
@@ -14,5 +14,5 @@ [README](https://matyunya-headlong.ellx.app/)
 
-__Headlong__ is a runtime version of Tailwind CSS which requires no PostCSS nor purging. Instead of generating all the classes beforehand it adds classes on the fly to the stylesheet whenever they are introduced in the DOM.
+**Headlong** is a runtime version of Tailwind CSS which requires no PostCSS nor purging. Instead of generating all the classes beforehand it adds classes on the fly to the stylesheet whenever they are introduced in the DOM.
 
-This library is not intended to replace the original Tailwind. Yet, there are environments where one cannot use PostCSS or maybe needs to interpolate *the living hell* out of those class names, or play with configuration.
+This library is not intended to replace the original Tailwind. Yet, there are environments where one cannot use PostCSS or maybe needs to interpolate _the living hell_ out of those class names, or play with configuration.
 
@@ -27,3 +27,2 @@ Natural advantage of this approach is zero extra build time, _all_ classes are available by default, no need to enable responsive or whatever plugin.
 
-
 { className = input({ label: "New class name", value: "text-fuchsia-500", size: 4 })}
@@ -42,2 +41,3 @@
 ## Installation and usage
+
 ```
@@ -80,5 +80,2 @@ $ npm install headlong
 
-
-
-
 ### Placeholder color and opacity
@@ -89,3 +86,7 @@
 ```html
-<input type="text" placeholder="test placeholder" class="placeholder-red-500 placeholder-opacity-50 p-4 bg-red-100 my-8 block">
+<input
+  type="text"
+  placeholder="test placeholder"
+  class="placeholder-red-500 placeholder-opacity-50 p-4 bg-red-100 my-8 block"
+/>
 ```
@@ -101,5 +102,11 @@
 <div class="flex space-x-8 align-center items-center text-lg">
-  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">1</div>
-  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">2</div>
-  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">3</div>
+  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">
+    1
+  </div>
+  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">
+    2
+  </div>
+  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">
+    3
+  </div>
 </div>
@@ -120,5 +127,11 @@ ```
 <div class="grid grid-cols-1 divide-y divide-yellow-500">
-  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">1</div>
-  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">2</div>
-  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">3</div>
+  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">
+    1
+  </div>
+  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">
+    2
+  </div>
+  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">
+    3
+  </div>
 </div>
@@ -138,3 +151,5 @@ ```
 ```html
-<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 w-full h-12"></div>
+<div
+  class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 w-full h-12"
+></div>
 <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-12"></div>
@@ -155,7 +170,13 @@ <div class="bg-gradient-to-r from-red-500 h-12"></div>
 ```html
-<div class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-light-blue-100 grid grid-cols-1 sm:grid-cols-4 gap-6 justify-items-center p-8">
-  <div class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring ring-blue-200 text-center hover:shadow">
+<div
+  class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-light-blue-100 grid grid-cols-1 sm:grid-cols-4 gap-6 justify-items-center p-8"
+>
+  <div
+    class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring ring-blue-200 text-center hover:shadow"
+  >
     ring
   </div>
-  <div class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4 ring-blue-200 text-center hover:shadow">
+  <div
+    class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4 ring-blue-200 text-center hover:shadow"
+  >
     ring
@@ -162,0 +183,0 @@ </div>

package.json

 {
   "name": "headlong",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Tailwind CSS on the fly",
@@ -5,0 +5,0 @@ "scripts": {

utils/color.js

@@ -55,3 +55,3 @@ import colors from "./colors.js";
       ? `${mainCssProps[alias]}: ${colors[single]}`
-      :  mainCssProps[alias](colors[single]);
+      : mainCssProps[alias](colors[single]);
   }
@@ -58,0 +58,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138707

increased by0.05%

No dependency changes