headlong - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

index.js

@@ -7,3 +7,3 @@ import getConfig from "./lib/config.js";
 
-const onObserve = (process, appendStyle, filterClasses) => mutations => {
+const onObserve = (process, filterClasses, appendStyle, appendStyleMedia) => mutations => {
   let styles = [...new Set(
@@ -17,6 +17,5 @@ mutations
     .map(process)
-    .filter(Boolean)
-    .join('\n');
+    .filter(Boolean);
 
-  styles += [...new Set(
+  styles = [...styles, [...new Set(
     mutations
@@ -27,6 +26,6 @@ .filter(f => f.type === 'childList' && f.addedNodes.length && f.addedNodes[0].classList) // only works on a single node
     .map(process)
-    .filter(Boolean)
-    .join('\n');
+    .filter(Boolean)];
 
-  appendStyle(styles);
+  appendStyle(styles.filter(s => !s.includes('@media')).join('\n'));
+  appendStyleMedia(styles.filter(s => s.includes('@media')).join('\n'));
 }
@@ -41,4 +40,3 @@
   .map(process)
-  .filter(Boolean)
-  .join('\n');
+  .filter(Boolean);
 
@@ -81,17 +79,26 @@ const observeClasses = (observer, container) => observer.observe(
 
-const s = document.createElement('style');
-s.setAttribute('type', 'text/css');
-
-function appendStyle(css) {
-  if (!css) return;
-
-  if (s.styleSheet) {
-    s.styleSheet.cssText = css;
+function appendCssToEl(css, el) {
+  if (el.styleSheet) {
+    el.styleSheet.cssText = css;
   } else {
-    s.appendChild(document.createTextNode(css));
+    el.appendChild(document.createTextNode(css));
   }
-  document.head.appendChild(s);
+  document.head.appendChild(el);
 }
 
 export function init(userConfig, container = document.querySelector('body')) {
+  const s = document.createElement('style');
+  s.setAttribute('type', 'text/css');
+
+  const med = document.createElement('style');
+  med.setAttribute('type', 'text/css');
+
+  function appendStyleMedia(css) {
+    appendCssToEl(css, med);
+  }
+
+  function appendStyle(css) {
+    appendCssToEl(css, s);
+  }
+
   const classes = new Set();
@@ -109,3 +116,3 @@ const filterClasses = i => Boolean(i) && !i.startsWith('svelte-') && !classes.has(i);
 
-  const classObserver = new MutationObserver(onObserve(process, appendStyle, filterClasses));
+  const classObserver = new MutationObserver(onObserve(process, filterClasses, appendStyle, appendStyleMedia));
 
@@ -115,3 +122,4 @@ observeClasses(classObserver, container);
 
-  appendStyle(preflight + variables(configMerged) + initialStyles + keyframes);
+  appendStyle(preflight + variables(configMerged) + initialStyles.filter(s => !s.includes('@media')).join('\n') + keyframes);
+  appendStyleMedia(initialStyles.filter(s => s.includes('@media')).join('\n'));
 
@@ -118,0 +126,0 @@ return {

index.md

@@ -21,3 +21,3 @@ # Headlong
 
-<div class="text-xs block my-8 font-mono p-2 bg-gray-100 items-center shadow-lg">
+<div class="text-xs block my-8 font-mono p-2 bg-gray-100 dark:bg-gray-800 items-center shadow-lg">
 
@@ -62,2 +62,3 @@ { parsed = headlong.parse(className) }
 - [x] Container
+- [x] Min/max breakpoints, object, array notation breakpoints
 - [ ] `@apply` as a function
@@ -67,2 +68,3 @@ - [ ] Combined selectors like ("sm:dark:hover:")
 - [ ] Keyframes customization
+- [ ] Proper breakpoints
 
@@ -69,0 +71,0 @@ ## Classes

lib/utilities.js

@@ -35,3 +35,3 @@ import { simpleMatch } from "./selector.js";
   ["gap-y", "row-gap", theme.gap],
-  ["shadow", "--tw-shadow", theme.boxShadow, "box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-theme.)"],
+  ["shadow", "--tw-shadow", theme.boxShadow, "box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);"],
   ["list", "list-style-type", theme.listStyleType],
@@ -38,0 +38,0 @@ ["placeholder-opacity", "--tw-placeholder-opacity", theme.placeholderOpacity],

lib/variants.js

@@ -1,2 +0,22 @@
-export const responsive = maxWidth => (className, style) => ` @media (max-width: ${maxWidth}) {
+// TODO: print and other media
+function responsiveRuleString(rule) {
+  if (typeof rule === 'string') {
+    return `(min-width: ${rule})`;
+  }
+
+  if (Array.isArray(rule)) {
+    return rule.map(responsiveRule).join(',');
+  }
+
+  const rules = [];
+  if (rule.max) {
+    rules.push(`(max-width: ${rule.max})`);
+  }
+  if (rules.min) {
+    rules.push(`(min-width: ${rule.max})`);
+  }
+
+  return rules.join('and');
+}
+export const responsive = rule => (className, style) => ` @media ${responsiveRuleString(rule)} {
   .${className} { ${style} }
@@ -3,0 +23,0 @@ }`;

package.json

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

README.md

@@ -47,5 +47,6 @@ # Headlong
 - [x] Container
+- [x] Min/max breakpoints, object, array notation breakpoints
 - [ ] `@apply` as a function
 - [ ] Combined selectors like ("sm:dark:hover:")
 - [ ] Negated values using css `calc` function relying on PostCSS plugin
-- [ ] Keyframes customization[]
+- [ ] Keyframes customization

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

154778

increased by0.68%

Lines of code

2366

increased by0.98%

Number of lines in readme file

52

increased by1.96%

No dependency changes