headlong - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

index.js

@@ -1,18 +0,8 @@
-export { default as colors } from "./utils/colors.js";
-import { theme } from "./utils/selector.js";
-import config from "./utils/config.js";
-import parse, { appendStyle } from "./utils/parser.js";
+import getConfig from "./lib/config.js";
+import getParser from "./lib/parser.js";
+import keyframes from "./lib/keyframes.js";
+import { preflight, variables } from "./lib/styles.js";
+import { theme } from "./lib/selector.js";
 
-let classes = new Set();
-
-const filterClases = i => Boolean(i) && !i.startsWith('svelte-') && !classes.has(i);
-
-function process(c) {
-  const css = parse(c);
-  classes.add(c);
-
-  return css;
-}
-
-const onObserve = mutations => {
+const onObserve = (process, appendStyle, filterClasses) => mutations => {
   let styles = [...new Set(
@@ -23,3 +13,3 @@ mutations
       .flat()
-      .filter(filterClases)
+      .filter(filterClasses)
   )]
@@ -33,3 +23,3 @@ .map(process)
       .filter(f => f.type === 'childList' && f.addedNodes.length && f.addedNodes[0].classList) // only works on a single node
-      .map(i => (i.addedNodes[0].classList.value || "").split(' ')).flat().filter(filterClases))
+      .map(i => (i.addedNodes[0].classList.value || "").split(' ')).flat().filter(filterClasses))
   ]
@@ -43,3 +33,3 @@ .map(process)
 
-const getInitialClasses = () => [...new Set(
+const getInitialClasses = (process, filterClasses) => [...new Set(
   [...document.querySelectorAll("*")]
@@ -49,3 +39,3 @@ .map(i => i.classList.value.split(' '))
 )]
-  .filter(filterClases)
+  .filter(filterClasses)
   .map(process)
@@ -64,29 +54,70 @@ .filter(Boolean)
 
-export function init(container = document.querySelector('body')) {
-  const classObserver = new MutationObserver(onObserve);
+function mergeUserConfig(config, userConfig) {
+  if (!userConfig || !userConfig.theme) return config;
 
-  // TODO: can defaults be anywhere?
-  const ringOffsetColor = config.theme.ringOffsetColor(theme).DEFAULT;
-  const ringColor = config.theme.ringColor(theme).DEFAULT;
+  const configTheme = theme(config.theme);
 
-  observeClasses(classObserver, container);
-  const initialStyles = getInitialClasses();
-  appendStyle(`
-/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}
-  * {
-    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: ${ringOffsetColor || '#fff'};
-    --tw-ring-color: ${ringColor};
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: 0 0 #0000;
-    --tw-shadow: 0 0 #0000;
+  if (userConfig.theme.extend) {
+    for (key in userConfig.theme.extend) {
+      config.theme[key] = typeof config.theme[key] === 'function'
+        ? {
+        ...config.theme[key](configTheme),
+        ...userConfig.theme.extend[key],
+      } : {
+        ...config.theme[key],
+        ...userConfig.theme.extend[key],
+      };
+    }
   }
-` + initialStyles);
 
-  return () => classObserver.disconnect();
+  return {
+    ...config,
+    theme: Object.keys(config.theme).reduce((acc, cur) => ({
+      ...acc,
+      [cur]: userConfig.theme[cur] || config.theme[cur]
+    }), {})
+  };
 }
 
-export { parse, classes, config };
+const s = document.createElement('style');
+s.setAttribute('type', 'text/css');
 
+function appendStyle(css) {
+  if (!css) return;
+
+  if (s.styleSheet) {
+    s.styleSheet.cssText = css;
+  } else {
+    s.appendChild(document.createTextNode(css));
+  }
+  document.head.appendChild(s);
+}
+
+export function init(userConfig, container = document.querySelector('body')) {
+  const classes = new Set();
+  const filterClasses = i => Boolean(i) && !i.startsWith('svelte-') && !classes.has(i);
+
+  const configMerged = mergeUserConfig(getConfig(), userConfig);
+  const parse = getParser(configMerged);
+
+  const process = c => {
+    const css = parse(c);
+    if (css) classes.add(c);
+    return css;
+  }
+
+  const classObserver = new MutationObserver(onObserve(process, appendStyle, filterClasses));
+
+  observeClasses(classObserver, container);
+  const initialStyles = getInitialClasses(process, filterClasses);
+
+  appendStyle(preflight + variables(configMerged) + initialStyles + keyframes);
+
+  return {
+    unsubscribe: () => classObserver.disconnect(),
+    parse,
+    config: configMerged,
+  };
+}
+
 export default init;

index.md

@@ -1,5 +0,1 @@
----
-title: H E A D L O N G
----
-
 # Headlong
@@ -9,4 +5,2 @@
 
-[README](https://matyunya-headlong.ellx.app/)
-
 Tailwind CSS produces thousands of classes most of which will never be used. Changes to the Tailwind configuration might take seconds to take effect, and who has seconds to waste these days? There are [articles](https://nystudio107.com/blog/speeding-up-tailwind-css-builds) describing how to speed up Tailwind build times indicating the problem.
@@ -24,15 +18,15 @@
 
-<small>Type any utility class name into the input. If it exists you will see the definition below. Click the button to toggle the class on the test div.</small>
+<small>Type any utility class name into the input. Click the button to toggle the class on the test div.</small>
 
 { className = input({ label: "New class name", value: "text-fuchsia-500", size: 4 })}
 
-<div class="p-4 mb-8 block border font-mono text-xs dark:text-gray-100 text-gray:500 cursor-pointer">
+<div class="text-xs block my-8 font-mono p-2 bg-gray-100 items-center shadow-lg">
 
-{ parse(className) }
+{ parsed = headlong.parse(className) }
 
 </div>
 
-{ button({ label: "toggle", onClick: toggle, disabled: !className })}
+{ button({ label: "toggle", onClick: toggle, disabled: !parsed })}
 
-<span id="test" class="block ring ring-red-100 p-4 my-8 font-mono hover:italic"> I am a Headlong test</span>
+<span id="test" class="block ring hover:ring-8 transition duration-500 ring-red-100 p-4 my-8 font-mono hover:italic text-red-500 cursor-pointer hover:bg-light-blue-100 bg-opacity-0 hover:bg-opacity-50 rounded shadow-lg"> I am a Headlong test</span>
 
@@ -46,19 +40,18 @@ ## Installation and usage
 ```
-import { init, config } from "headlong";
-// or in ellx
-import { init, config } from "~matyunya/headlong";
+import headlong from "headlong";
 
-// directly modify the config
-// this is a temporary solution until "extend" is added.
-config.theme.colors.green.900 = "#meGreen";
+const {
+  unsubscribe,
+  parse,
+  config,
+  apply, // not quite there yet
+} = headlong(config, containerEl);
 
-const disconnect = init();
-
 // ...
 
 // stop listening to changes when you're done
-disconnect();
+unsubscribe();
 ```
 
-## Missing features
+## Roadmap
 
@@ -68,12 +61,13 @@ - [x] Ring
 - [x] Camelcased colors ("light-blue" is lightBlue in the default palette)
+- [x] "Extend" config section
+- [x] Preflight
+- [x] Container
+- [ ] `@apply` as a function
 - [ ] Combined selectors like ("sm:dark:hover:")
 - [ ] Negated values using css `calc` function relying on PostCSS plugin
 - [ ] Keyframes customization
-- [ ] "Extend" config section
-- [ ] Preflight
-- [ ] Container
 
 ## Classes
 
-Please refer to Tailwind [documentation](https://tailwindcss.com/docs) for all available classes.
+Please refer to Tailwind [documentation](https://tailwindcss.com/docs) for all available classes. Almost all of them work in headlong.
 
@@ -185,3 +179,3 @@ ### Placeholder color and opacity
   </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 hover:ring-8 duration-1000 cursor-pointer transform transition ring-blue-200 text-center hover:shadow">
     ring
@@ -193,3 +187,3 @@ </div>
 
-{ init() }
+{ headlong = init({}, document.getElementById('md')) }
 
@@ -196,0 +190,0 @@ </div>

package.json

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

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Number of package files

19

increased by26.67%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

51

increased byInfinity%

Worsened metrics

Total package byte prevSize

112504

decreased by-18.89%

Lines of code

2106

decreased by-0.85%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes