@slimr/css 2.0.1 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -73,9 +73,9 @@ export function App() {
73
73
  }
74
74
  ```
75
75
 
76
- ### Comparisons
76
+ ## Comparisons
77
77
 
78
- #### [Emotion](https://emotion.sh/docs/introduction)
78
+ ### [Emotion](https://emotion.sh/docs/introduction)
79
79
 
80
80
  - A popular css-in-js lib that inspired this lib
81
81
 
@@ -89,7 +89,7 @@ Cons
89
89
  - Many features require addons, which make bundle even larger
90
90
  - Does not support zx prop or css shorthand props
91
91
 
92
- #### [Astroturf](https://astroturfcss.github.io/astroturf/)
92
+ ### [Astroturf](https://astroturfcss.github.io/astroturf/)
93
93
 
94
94
  - A popular css-in-js lib similar to Emotion but compiles out the css into css stylesheets
95
95
 
@@ -104,6 +104,6 @@ Cons
104
104
  - Does not support zx prop or css shorthand props
105
105
  - Is not progressive -- all styles for all components is loaded and blocks initial page paint
106
106
 
107
- #### [Linaria](https://linaria.dev/)
107
+ ### [Linaria](https://linaria.dev/)
108
108
 
109
109
  - Pretty much identical to Astroturf, but maybe better Vite support
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slimr/css",
3
- "version": "2.0.1",
3
+ "version": "2.0.3",
4
4
  "author": "Brian Dombrowski",
5
5
  "license": "ISC",
6
6
  "private": false,
@@ -17,25 +17,15 @@
17
17
  "url": "https://github.com/bdombro/slimr.git"
18
18
  },
19
19
  "type": "module",
20
- "main": "./src/index.cjs",
21
- "module": "./src/index.js",
22
- "types": "./src/index.ts",
23
- "exports": {
24
- ".": {
25
- "import": "./src/index.js",
26
- "require": "./src/index.cjs",
27
- "types": "./src/index.ts"
28
- }
29
- },
30
- "files": [
31
- "src",
32
- "README.md",
33
- "tsconfig.json"
34
- ],
20
+ "main": "./cjs/index.js",
21
+ "module": "./esm/index.js",
22
+ "types": "./esm/index.d.ts",
35
23
  "scripts": {
36
- "build": "npm run clean && tsup",
37
- "clean": "find -E ./src -regex '.*(\\.js|\\.cjs|\\.d\\.ts|\\.map)' -delete",
38
- "prepack": "npm run build && npm version patch",
39
- "postpublish": "npm run clean"
24
+ "build": "npm-run-all clean lint --parallel build:*",
25
+ "build:esm": "OUT=esm; tsc -d -m es2020 --outDir $OUT --noEmit false && cp -r src/* $OUT",
26
+ "build:cjs": "OUT=cjs; tsc -d -m commonjs --outDir $OUT --noEmit false && cp -r src/* $OUT",
27
+ "clean": "rm -rf esm cjs",
28
+ "lint": "eslint .",
29
+ "prepack": "npm run build && npm version patch"
40
30
  }
41
31
  }
package/src/core.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  /** Breakpoints like chakra */
2
- const breakPoints = ['30em', '48em', '62em', '80em', '96em']
2
+ export const breakPoints = ['30em', '48em', '62em', '80em', '96em']
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
5
+ type allowableAny = any
3
6
 
4
7
  /** Joins class names and filters out blanks */
5
- export function classJoin(...classes: any[]) {
6
- return classes.filter((c) => c && typeof c === 'string').join(' ')
8
+ export function classJoin(...classes: allowableAny[]) {
9
+ return classes.filter(c => c && typeof c === 'string').join(' ')
7
10
  }
8
11
 
9
- // delete css comments i.e. {/* blah */}
12
+ /** delete css comments **/
10
13
  function deleteComments(css: string) {
11
14
  return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '')
12
15
  }
@@ -20,8 +23,9 @@ function expandArrayValues(css: string) {
20
23
  if (!css.includes('[')) return css
21
24
  return css
22
25
  .split('\n')
23
- .map((l) => {
24
- const [_, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
26
+ .map(l => {
27
+ // eslint-disable-next-line no-useless-escape
28
+ const [, prop, vals] = [...l.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)]?.[0] ?? []
25
29
  if (vals) {
26
30
  return vals
27
31
  .split(',')
@@ -104,7 +108,10 @@ export interface ShorthandProps {
104
108
  /** shorthand for css:z-index */
105
109
  z?: number | string
106
110
  }
107
- export const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {
111
+ export const shorthandPropsMap: Record<
112
+ keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>,
113
+ string
114
+ > = {
108
115
  ai: 'align-items',
109
116
  b: 'border',
110
117
  br: 'border-radius',
@@ -139,7 +146,9 @@ export const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'p
139
146
  function expandProps(css: string) {
140
147
  css = '\n' + css // inject a newline to make the regex easier
141
148
  // Handle 'mx', 'my', 'px', 'py'
142
- css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2')
149
+ css = css
150
+ .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
151
+ .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2')
143
152
  Object.entries(shorthandPropsMap).forEach(([k, v]) => {
144
153
  css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`)
145
154
  })
@@ -149,7 +158,7 @@ function expandProps(css: string) {
149
158
  /** Find @keyframes, @media, @container queries in css **/
150
159
  function findQueries(css: string) {
151
160
  const queries = []
152
- for (let m of css.matchAll(/[@&]/gm)) {
161
+ for (const m of css.matchAll(/[@&]/gm)) {
153
162
  let query = ''
154
163
  let bodyStart = 0
155
164
  let openCount = 0
@@ -183,8 +192,8 @@ function findQueries(css: string) {
183
192
  function trim(css: string) {
184
193
  return css
185
194
  .split('\n')
186
- .map((l) => l.trim())
187
- .filter((l) => l)
195
+ .map(l => l.trim())
196
+ .filter(l => l)
188
197
  .join('\n')
189
198
  }
190
199
 
@@ -204,7 +213,10 @@ export function t2s(...tsp: TemplateStringProps) {
204
213
  const [s, ...p] = tsp
205
214
  return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')
206
215
  }
207
- export type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]
216
+ export type TemplateStringProps = [
217
+ strings: TemplateStringsArray | string,
218
+ ...placeHolders: string[]
219
+ ]
208
220
 
209
221
  /**
210
222
  * Injects css to the page
@@ -251,13 +263,13 @@ export function createClass(...p: TemplateStringProps) {
251
263
  css = expandArrayValues(css)
252
264
  const qs = findQueries(css)
253
265
 
254
- for (let q of qs.reverse()) {
266
+ for (const q of qs.reverse()) {
255
267
  css = css.slice(0, q.start) + css.slice(q.end)
256
268
  }
257
269
 
258
270
  css = `.${className}{\n${css}\n}\n`
259
271
  css += qs
260
- .map((q) => {
272
+ .map(q => {
261
273
  if (q.query.startsWith('&')) {
262
274
  return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`
263
275
  }
package/src/index.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export * from './core.js'
2
- export { createClass as css } from './core.js'
2
+ export {createClass as css} from './core.js'
package/src/core.cjs DELETED
@@ -1,23 +0,0 @@
1
- "use strict";var g=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var c=(r,n)=>{for(var t in n)g(r,t,{get:n[t],enumerable:!0})},y=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of f(n))!b.call(r,e)&&e!==t&&g(r,e,{get:()=>n[e],enumerable:!(o=l(n,e))||o.enumerable});return r};var h=r=>y(g({},"__esModule",{value:!0}),r);var T={};c(T,{addCss:()=>m,classJoin:()=>$,createClass:()=>u,shorthandProps:()=>P,shorthandPropsMap:()=>p,t2s:()=>d});module.exports=h(T);var x=["30em","48em","62em","80em","96em"];function $(...r){return r.filter(n=>n&&typeof n=="string").join(" ")}function j(r){return r.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,"")}function w(r){return r.includes("[")?r.split(`
2
- `).map(n=>{var s;let[t,o,e]=(s=[...n.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)][0])!=null?s:[];return e?e.split(",").map((i,a)=>(i=i.trim(),!i||i==="null"||i==="undefined"?"":a===0?`${o}: ${i};`:`@media (min-width: ${x[a-1]}) { ${o}: ${i}; }`)).join(`
3
- `):n}).join(`
4
- `):r}var p={ai:"align-items",b:"border",br:"border-radius",bg:"background",c:"color",d:"display",f:"flex",fd:"flex-direction",i:"inset",h:"height",jc:"justify-content",m:"margin",ml:"margin-left",mr:"margin-right",mt:"margin-top",mb:"margin-bottom",maxW:"max-width",minW:"min-width",p:"padding",pl:"padding-left",pr:"padding-right",pt:"padding-top",pb:"padding-bottom",pos:"position",ta:"text-align",w:"width",z:"z-index"},P=[...Object.keys(p),"mx","my","px","py"];function S(r){return r=`
5
- `+r,r=r.replace(/([mp])x:([^;]*)/g,`$1l:$2;
6
- $1r:$2`).replace(/([mp])y:([^;]*);/g,`$1t:$2;
7
- $1b:$2`),Object.entries(p).forEach(([n,t])=>{r=r.replace(new RegExp(`([
8
- ;])${n}:`,"g"),`$1${t}:`)}),r.trim()}function k(r){let n=[];for(let t of r.matchAll(/[@&]/gm)){let o="",e=0,s=0;for(let i=t.index;i<r.length;i++)if(r[i]==="{")s===0&&(o=r.slice(t.index,i).trim(),e=i+1),s++;else if(r[i]==="}"&&(s--,s===0)){n.push({start:t.index,end:i+1,query:o,outerBody:r.slice(t.index,i+1),innerBody:r.slice(e,i)});break}s!==0&&console.error(`${o} not closed: "${r}"`)}return n}function q(r){return r.split(`
9
- `).map(n=>n.trim()).filter(n=>n).join(`
10
- `)}function d(...r){let[n,...t]=r;return typeof n=="string"?n:n.map((o,e)=>{var s;return o+((s=t==null?void 0:t[e])!=null?s:"")}).join("")}function m(r){m.que.add(r),setTimeout(()=>{let n=[...m.que].join(`
11
- `);if(n){m.que.clear();let t=document.createElement("style");t.id=`u${m.count++}`,t.innerHTML=n,document.head.appendChild(t)}},0)}m.que=new Set;m.count=0;function u(...r){let n=d(...r);if(!n)return"";let t=u.history.get(n);if(!t){t="s"+u.count++,u.history.set(n,t),n=j(n),n=S(n),n=w(n);let o=k(n);for(let e of o.reverse())n=n.slice(0,e.start)+n.slice(e.end);n=`.${t}{
12
- ${n}
13
- }
14
- `,n+=o.map(e=>e.query.startsWith("&")?`.${t}${e.query.slice(1)}{
15
- ${e.innerBody}
16
- }`:e.query.startsWith("@keyframes")?e.outerBody:`${e.query}{
17
- .${t}{${e.innerBody}
18
- }
19
- }`).join(`
20
- `),n=q(n)+`
21
-
22
- `,m(n)}return t}u.count=0;u.history=new Map;0&&(module.exports={addCss,classJoin,createClass,shorthandProps,shorthandPropsMap,t2s});
23
- //# sourceMappingURL=core.cjs.map
package/src/core.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["core.ts"],"sourcesContent":["/** Breakpoints like chakra */\nconst breakPoints = ['30em', '48em', '62em', '80em', '96em']\n\n/** Joins class names and filters out blanks */\nexport function classJoin(...classes: any[]) {\n return classes.filter((c) => c && typeof c === 'string').join(' ')\n}\n\n// delete css comments i.e. {/* blah */}\nfunction deleteComments(css: string) {\n return css.replace(/{\\/\\*[\\s\\S]*?(?=\\*\\/})\\*\\/}/gm, '')\n}\n\n/**\n * Expands array values into media queries\n *\n * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles\n */\nfunction expandArrayValues(css: string) {\n if (!css.includes('[')) return css\n return css\n .split('\\n')\n .map((l) => {\n const [_, prop, vals] = [...l.matchAll(/([A-Za-z\\-]*):[ ]*\\[([^\\]]+)\\]/g)]?.[0] ?? []\n if (vals) {\n return vals\n .split(',')\n .map((val, i) => {\n val = val.trim()\n if (!val || val === 'null' || val === 'undefined') return ''\n if (i === 0) {\n return `${prop}: ${val};`\n }\n return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`\n })\n .join('\\n')\n }\n return l\n })\n .join('\\n')\n}\n\nexport interface ShorthandProps {\n /** shorthand for css:align-items */\n ai?: string\n /** shorthand for css:border */\n b?: string | number\n /** shorthand for css:border-radius */\n br?: string | number\n /** shorthand for css:background */\n bg?: string\n /** shorthand for css:color */\n c?: string\n /** shorthand for css:display */\n d?: string\n /** shorthand for css:flex */\n f?: string\n /** shorthand for css:flex-direction */\n fd?: string\n /** shorthand for css:height */\n h?: number | string\n /** shorthand for css:inset */\n i?: number | string\n /** shorthand for css:justify-content */\n jc?: string\n /** shorthand for css:margin */\n m?: number | string\n /** shorthand for css:margin-left */\n ml?: number | string\n /** shorthand for css:margin-right */\n mr?: number | string\n /** shorthand for css:margin-top */\n mt?: number | string\n /** shorthand for css:margin-bottom */\n mb?: number | string\n /** shorthand for css:margin-top & margin-bottom */\n my?: number | string\n /** shorthand for css:margin-left & margin-right */\n mx?: number | string\n /** shorthand for css:max-width */\n maxW?: number | string\n /** shorthand for css:min-width */\n minW?: number | string\n /** shorthand for css:padding */\n p?: number | string\n /** shorthand for css:padding-left */\n pl?: number | string\n /** shorthand for css:padding-right */\n pr?: number | string\n /** shorthand for css:padding-top */\n pt?: number | string\n /** shorthand for css:padding-bottom */\n pb?: number | string\n /** shorthand for css:padding-top & padding-bottom */\n py?: number | string\n /** shorthand for css:padding-left & padding-right */\n px?: number | string\n /** shorthand for css:position */\n pos?: number | string\n /** shorthand for css:text-align */\n ta?: string\n /** shorthand for css:width */\n w?: number | string\n /** shorthand for css:z-index */\n z?: number | string\n}\nexport const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {\n ai: 'align-items',\n b: 'border',\n br: 'border-radius',\n bg: 'background',\n c: 'color',\n d: 'display',\n f: 'flex',\n fd: 'flex-direction',\n i: 'inset',\n h: 'height',\n jc: 'justify-content',\n m: 'margin',\n ml: 'margin-left',\n mr: 'margin-right',\n mt: 'margin-top',\n mb: 'margin-bottom',\n maxW: 'max-width',\n minW: 'min-width',\n p: 'padding',\n pl: 'padding-left',\n pr: 'padding-right',\n pt: 'padding-top',\n pb: 'padding-bottom',\n pos: 'position',\n ta: 'text-align',\n w: 'width',\n z: 'z-index',\n}\nexport const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']\n\n/** Expand short-hand css props to full */\nfunction expandProps(css: string) {\n css = '\\n' + css // inject a newline to make the regex easier\n // Handle 'mx', 'my', 'px', 'py'\n css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\\n$1b:$2')\n Object.entries(shorthandPropsMap).forEach(([k, v]) => {\n css = css.replace(new RegExp(`([ \\n\\t;])${k}:`, 'g'), `$1${v}:`)\n })\n return css.trim()\n}\n\n/** Find @keyframes, @media, @container queries in css **/\nfunction findQueries(css: string) {\n const queries = []\n for (let m of css.matchAll(/[@&]/gm)) {\n let query = ''\n let bodyStart = 0\n let openCount = 0\n for (let i = m.index!; i < css.length; i++) {\n if (css[i] === '{') {\n if (openCount === 0) {\n query = css.slice(m.index, i).trim()\n bodyStart = i + 1\n }\n openCount++\n } else if (css[i] === '}') {\n openCount--\n if (openCount === 0) {\n queries.push({\n start: m.index,\n end: i + 1,\n query,\n outerBody: css.slice(m.index, i + 1),\n innerBody: css.slice(bodyStart, i),\n })\n break\n }\n }\n }\n if (openCount !== 0) console.error(`${query} not closed: \"${css}\"`)\n }\n return queries\n}\n\n/** Trims whitespace for every line */\nfunction trim(css: string) {\n return css\n .split('\\n')\n .map((l) => l.trim())\n .filter((l) => l)\n .join('\\n')\n}\n\n/**\n * Assemble a string from a template string array and a list of placeholders.\n *\n * - If the first argument is a string, it is returned as is.\n *\n * i.e.\n * myFoo(...props: TemplateStringProps) => {\n * const inputStr = t2s(...props);\n * }\n * myFoo`hello ${name}` => 'hello world'\n * myFoo(`hello ${name}`) => 'hello world'\n */\nexport function t2s(...tsp: TemplateStringProps) {\n const [s, ...p] = tsp\n return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')\n}\nexport type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]\n\n/**\n * Injects css to the page\n *\n * - Batches adds for performance\n *\n * @param css - css to be injected\n * @returns void\n */\nexport function addCss(css: string) {\n addCss.que.add(css)\n setTimeout(() => {\n const css = [...addCss.que].join('\\n')\n if (css) {\n addCss.que.clear()\n const s = document.createElement('style')\n s.id = `u${addCss.count++}`\n s.innerHTML = css\n document.head.appendChild(s)\n }\n }, 0)\n}\naddCss.que = new Set<string>()\naddCss.count = 0\n\n/**\n * Injects css and creates unique class names\n *\n * - Skips if already added\n *\n * @param css - string or template string, to be injected\n * @returns a unique class name\n */\nexport function createClass(...p: TemplateStringProps) {\n let css = t2s(...p)\n if (!css) return ''\n let className = createClass.history.get(css)\n if (!className) {\n className = 's' + createClass.count++\n createClass.history.set(css, className)\n\n css = deleteComments(css)\n css = expandProps(css)\n css = expandArrayValues(css)\n const qs = findQueries(css)\n\n for (let q of qs.reverse()) {\n css = css.slice(0, q.start) + css.slice(q.end)\n }\n\n css = `.${className}{\\n${css}\\n}\\n`\n css += qs\n .map((q) => {\n if (q.query.startsWith('&')) {\n return `.${className}${q.query.slice(1)}{\\n${q.innerBody}\\n}`\n }\n if (q.query.startsWith('@keyframes')) {\n return q.outerBody\n }\n return `${q.query}{\\n.${className}{${q.innerBody}\\n}\\n}`\n })\n .join('\\n')\n\n css = trim(css) + '\\n\\n'\n\n addCss(css)\n }\n return className\n}\ncreateClass.count = 0\ncreateClass.history = new Map<string, string>()\n"],"mappings":"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","names":["core_exports","__export","addCss","classJoin","createClass","shorthandProps","shorthandPropsMap","t2s","__toCommonJS","breakPoints","classes","c","deleteComments","css","expandArrayValues","l","_a","_","prop","vals","val","i","expandProps","k","v","findQueries","queries","m","query","bodyStart","openCount","trim","tsp","s","p","className","qs","q"]}
package/src/core.d.ts DELETED
@@ -1,110 +0,0 @@
1
- /** Joins class names and filters out blanks */
2
- declare function classJoin(...classes: any[]): string;
3
- interface ShorthandProps {
4
- /** shorthand for css:align-items */
5
- ai?: string;
6
- /** shorthand for css:border */
7
- b?: string | number;
8
- /** shorthand for css:border-radius */
9
- br?: string | number;
10
- /** shorthand for css:background */
11
- bg?: string;
12
- /** shorthand for css:color */
13
- c?: string;
14
- /** shorthand for css:display */
15
- d?: string;
16
- /** shorthand for css:flex */
17
- f?: string;
18
- /** shorthand for css:flex-direction */
19
- fd?: string;
20
- /** shorthand for css:height */
21
- h?: number | string;
22
- /** shorthand for css:inset */
23
- i?: number | string;
24
- /** shorthand for css:justify-content */
25
- jc?: string;
26
- /** shorthand for css:margin */
27
- m?: number | string;
28
- /** shorthand for css:margin-left */
29
- ml?: number | string;
30
- /** shorthand for css:margin-right */
31
- mr?: number | string;
32
- /** shorthand for css:margin-top */
33
- mt?: number | string;
34
- /** shorthand for css:margin-bottom */
35
- mb?: number | string;
36
- /** shorthand for css:margin-top & margin-bottom */
37
- my?: number | string;
38
- /** shorthand for css:margin-left & margin-right */
39
- mx?: number | string;
40
- /** shorthand for css:max-width */
41
- maxW?: number | string;
42
- /** shorthand for css:min-width */
43
- minW?: number | string;
44
- /** shorthand for css:padding */
45
- p?: number | string;
46
- /** shorthand for css:padding-left */
47
- pl?: number | string;
48
- /** shorthand for css:padding-right */
49
- pr?: number | string;
50
- /** shorthand for css:padding-top */
51
- pt?: number | string;
52
- /** shorthand for css:padding-bottom */
53
- pb?: number | string;
54
- /** shorthand for css:padding-top & padding-bottom */
55
- py?: number | string;
56
- /** shorthand for css:padding-left & padding-right */
57
- px?: number | string;
58
- /** shorthand for css:position */
59
- pos?: number | string;
60
- /** shorthand for css:text-align */
61
- ta?: string;
62
- /** shorthand for css:width */
63
- w?: number | string;
64
- /** shorthand for css:z-index */
65
- z?: number | string;
66
- }
67
- declare const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string>;
68
- declare const shorthandProps: string[];
69
- /**
70
- * Assemble a string from a template string array and a list of placeholders.
71
- *
72
- * - If the first argument is a string, it is returned as is.
73
- *
74
- * i.e.
75
- * myFoo(...props: TemplateStringProps) => {
76
- * const inputStr = t2s(...props);
77
- * }
78
- * myFoo`hello ${name}` => 'hello world'
79
- * myFoo(`hello ${name}`) => 'hello world'
80
- */
81
- declare function t2s(...tsp: TemplateStringProps): string;
82
- type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]];
83
- /**
84
- * Injects css to the page
85
- *
86
- * - Batches adds for performance
87
- *
88
- * @param css - css to be injected
89
- * @returns void
90
- */
91
- declare function addCss(css: string): void;
92
- declare namespace addCss {
93
- var que: Set<string>;
94
- var count: number;
95
- }
96
- /**
97
- * Injects css and creates unique class names
98
- *
99
- * - Skips if already added
100
- *
101
- * @param css - string or template string, to be injected
102
- * @returns a unique class name
103
- */
104
- declare function createClass(...p: TemplateStringProps): string;
105
- declare namespace createClass {
106
- var count: number;
107
- var history: Map<string, string>;
108
- }
109
-
110
- export { ShorthandProps, TemplateStringProps, addCss, classJoin, createClass, shorthandProps, shorthandPropsMap, t2s };
package/src/core.js DELETED
@@ -1,23 +0,0 @@
1
- var a=["30em","48em","62em","80em","96em"];function h(...r){return r.filter(n=>n&&typeof n=="string").join(" ")}function d(r){return r.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,"")}function l(r){return r.includes("[")?r.split(`
2
- `).map(n=>{var s;let[t,o,e]=(s=[...n.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)][0])!=null?s:[];return e?e.split(",").map((i,g)=>(i=i.trim(),!i||i==="null"||i==="undefined"?"":g===0?`${o}: ${i};`:`@media (min-width: ${a[g-1]}) { ${o}: ${i}; }`)).join(`
3
- `):n}).join(`
4
- `):r}var p={ai:"align-items",b:"border",br:"border-radius",bg:"background",c:"color",d:"display",f:"flex",fd:"flex-direction",i:"inset",h:"height",jc:"justify-content",m:"margin",ml:"margin-left",mr:"margin-right",mt:"margin-top",mb:"margin-bottom",maxW:"max-width",minW:"min-width",p:"padding",pl:"padding-left",pr:"padding-right",pt:"padding-top",pb:"padding-bottom",pos:"position",ta:"text-align",w:"width",z:"z-index"},x=[...Object.keys(p),"mx","my","px","py"];function f(r){return r=`
5
- `+r,r=r.replace(/([mp])x:([^;]*)/g,`$1l:$2;
6
- $1r:$2`).replace(/([mp])y:([^;]*);/g,`$1t:$2;
7
- $1b:$2`),Object.entries(p).forEach(([n,t])=>{r=r.replace(new RegExp(`([
8
- ;])${n}:`,"g"),`$1${t}:`)}),r.trim()}function b(r){let n=[];for(let t of r.matchAll(/[@&]/gm)){let o="",e=0,s=0;for(let i=t.index;i<r.length;i++)if(r[i]==="{")s===0&&(o=r.slice(t.index,i).trim(),e=i+1),s++;else if(r[i]==="}"&&(s--,s===0)){n.push({start:t.index,end:i+1,query:o,outerBody:r.slice(t.index,i+1),innerBody:r.slice(e,i)});break}s!==0&&console.error(`${o} not closed: "${r}"`)}return n}function c(r){return r.split(`
9
- `).map(n=>n.trim()).filter(n=>n).join(`
10
- `)}function y(...r){let[n,...t]=r;return typeof n=="string"?n:n.map((o,e)=>{var s;return o+((s=t==null?void 0:t[e])!=null?s:"")}).join("")}function m(r){m.que.add(r),setTimeout(()=>{let n=[...m.que].join(`
11
- `);if(n){m.que.clear();let t=document.createElement("style");t.id=`u${m.count++}`,t.innerHTML=n,document.head.appendChild(t)}},0)}m.que=new Set;m.count=0;function u(...r){let n=y(...r);if(!n)return"";let t=u.history.get(n);if(!t){t="s"+u.count++,u.history.set(n,t),n=d(n),n=f(n),n=l(n);let o=b(n);for(let e of o.reverse())n=n.slice(0,e.start)+n.slice(e.end);n=`.${t}{
12
- ${n}
13
- }
14
- `,n+=o.map(e=>e.query.startsWith("&")?`.${t}${e.query.slice(1)}{
15
- ${e.innerBody}
16
- }`:e.query.startsWith("@keyframes")?e.outerBody:`${e.query}{
17
- .${t}{${e.innerBody}
18
- }
19
- }`).join(`
20
- `),n=c(n)+`
21
-
22
- `,m(n)}return t}u.count=0;u.history=new Map;export{m as addCss,h as classJoin,u as createClass,x as shorthandProps,p as shorthandPropsMap,y as t2s};
23
- //# sourceMappingURL=core.js.map
package/src/core.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["core.ts"],"sourcesContent":["/** Breakpoints like chakra */\nconst breakPoints = ['30em', '48em', '62em', '80em', '96em']\n\n/** Joins class names and filters out blanks */\nexport function classJoin(...classes: any[]) {\n return classes.filter((c) => c && typeof c === 'string').join(' ')\n}\n\n// delete css comments i.e. {/* blah */}\nfunction deleteComments(css: string) {\n return css.replace(/{\\/\\*[\\s\\S]*?(?=\\*\\/})\\*\\/}/gm, '')\n}\n\n/**\n * Expands array values into media queries\n *\n * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles\n */\nfunction expandArrayValues(css: string) {\n if (!css.includes('[')) return css\n return css\n .split('\\n')\n .map((l) => {\n const [_, prop, vals] = [...l.matchAll(/([A-Za-z\\-]*):[ ]*\\[([^\\]]+)\\]/g)]?.[0] ?? []\n if (vals) {\n return vals\n .split(',')\n .map((val, i) => {\n val = val.trim()\n if (!val || val === 'null' || val === 'undefined') return ''\n if (i === 0) {\n return `${prop}: ${val};`\n }\n return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`\n })\n .join('\\n')\n }\n return l\n })\n .join('\\n')\n}\n\nexport interface ShorthandProps {\n /** shorthand for css:align-items */\n ai?: string\n /** shorthand for css:border */\n b?: string | number\n /** shorthand for css:border-radius */\n br?: string | number\n /** shorthand for css:background */\n bg?: string\n /** shorthand for css:color */\n c?: string\n /** shorthand for css:display */\n d?: string\n /** shorthand for css:flex */\n f?: string\n /** shorthand for css:flex-direction */\n fd?: string\n /** shorthand for css:height */\n h?: number | string\n /** shorthand for css:inset */\n i?: number | string\n /** shorthand for css:justify-content */\n jc?: string\n /** shorthand for css:margin */\n m?: number | string\n /** shorthand for css:margin-left */\n ml?: number | string\n /** shorthand for css:margin-right */\n mr?: number | string\n /** shorthand for css:margin-top */\n mt?: number | string\n /** shorthand for css:margin-bottom */\n mb?: number | string\n /** shorthand for css:margin-top & margin-bottom */\n my?: number | string\n /** shorthand for css:margin-left & margin-right */\n mx?: number | string\n /** shorthand for css:max-width */\n maxW?: number | string\n /** shorthand for css:min-width */\n minW?: number | string\n /** shorthand for css:padding */\n p?: number | string\n /** shorthand for css:padding-left */\n pl?: number | string\n /** shorthand for css:padding-right */\n pr?: number | string\n /** shorthand for css:padding-top */\n pt?: number | string\n /** shorthand for css:padding-bottom */\n pb?: number | string\n /** shorthand for css:padding-top & padding-bottom */\n py?: number | string\n /** shorthand for css:padding-left & padding-right */\n px?: number | string\n /** shorthand for css:position */\n pos?: number | string\n /** shorthand for css:text-align */\n ta?: string\n /** shorthand for css:width */\n w?: number | string\n /** shorthand for css:z-index */\n z?: number | string\n}\nexport const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {\n ai: 'align-items',\n b: 'border',\n br: 'border-radius',\n bg: 'background',\n c: 'color',\n d: 'display',\n f: 'flex',\n fd: 'flex-direction',\n i: 'inset',\n h: 'height',\n jc: 'justify-content',\n m: 'margin',\n ml: 'margin-left',\n mr: 'margin-right',\n mt: 'margin-top',\n mb: 'margin-bottom',\n maxW: 'max-width',\n minW: 'min-width',\n p: 'padding',\n pl: 'padding-left',\n pr: 'padding-right',\n pt: 'padding-top',\n pb: 'padding-bottom',\n pos: 'position',\n ta: 'text-align',\n w: 'width',\n z: 'z-index',\n}\nexport const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']\n\n/** Expand short-hand css props to full */\nfunction expandProps(css: string) {\n css = '\\n' + css // inject a newline to make the regex easier\n // Handle 'mx', 'my', 'px', 'py'\n css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\\n$1b:$2')\n Object.entries(shorthandPropsMap).forEach(([k, v]) => {\n css = css.replace(new RegExp(`([ \\n\\t;])${k}:`, 'g'), `$1${v}:`)\n })\n return css.trim()\n}\n\n/** Find @keyframes, @media, @container queries in css **/\nfunction findQueries(css: string) {\n const queries = []\n for (let m of css.matchAll(/[@&]/gm)) {\n let query = ''\n let bodyStart = 0\n let openCount = 0\n for (let i = m.index!; i < css.length; i++) {\n if (css[i] === '{') {\n if (openCount === 0) {\n query = css.slice(m.index, i).trim()\n bodyStart = i + 1\n }\n openCount++\n } else if (css[i] === '}') {\n openCount--\n if (openCount === 0) {\n queries.push({\n start: m.index,\n end: i + 1,\n query,\n outerBody: css.slice(m.index, i + 1),\n innerBody: css.slice(bodyStart, i),\n })\n break\n }\n }\n }\n if (openCount !== 0) console.error(`${query} not closed: \"${css}\"`)\n }\n return queries\n}\n\n/** Trims whitespace for every line */\nfunction trim(css: string) {\n return css\n .split('\\n')\n .map((l) => l.trim())\n .filter((l) => l)\n .join('\\n')\n}\n\n/**\n * Assemble a string from a template string array and a list of placeholders.\n *\n * - If the first argument is a string, it is returned as is.\n *\n * i.e.\n * myFoo(...props: TemplateStringProps) => {\n * const inputStr = t2s(...props);\n * }\n * myFoo`hello ${name}` => 'hello world'\n * myFoo(`hello ${name}`) => 'hello world'\n */\nexport function t2s(...tsp: TemplateStringProps) {\n const [s, ...p] = tsp\n return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')\n}\nexport type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]\n\n/**\n * Injects css to the page\n *\n * - Batches adds for performance\n *\n * @param css - css to be injected\n * @returns void\n */\nexport function addCss(css: string) {\n addCss.que.add(css)\n setTimeout(() => {\n const css = [...addCss.que].join('\\n')\n if (css) {\n addCss.que.clear()\n const s = document.createElement('style')\n s.id = `u${addCss.count++}`\n s.innerHTML = css\n document.head.appendChild(s)\n }\n }, 0)\n}\naddCss.que = new Set<string>()\naddCss.count = 0\n\n/**\n * Injects css and creates unique class names\n *\n * - Skips if already added\n *\n * @param css - string or template string, to be injected\n * @returns a unique class name\n */\nexport function createClass(...p: TemplateStringProps) {\n let css = t2s(...p)\n if (!css) return ''\n let className = createClass.history.get(css)\n if (!className) {\n className = 's' + createClass.count++\n createClass.history.set(css, className)\n\n css = deleteComments(css)\n css = expandProps(css)\n css = expandArrayValues(css)\n const qs = findQueries(css)\n\n for (let q of qs.reverse()) {\n css = css.slice(0, q.start) + css.slice(q.end)\n }\n\n css = `.${className}{\\n${css}\\n}\\n`\n css += qs\n .map((q) => {\n if (q.query.startsWith('&')) {\n return `.${className}${q.query.slice(1)}{\\n${q.innerBody}\\n}`\n }\n if (q.query.startsWith('@keyframes')) {\n return q.outerBody\n }\n return `${q.query}{\\n.${className}{${q.innerBody}\\n}\\n}`\n })\n .join('\\n')\n\n css = trim(css) + '\\n\\n'\n\n addCss(css)\n }\n return className\n}\ncreateClass.count = 0\ncreateClass.history = new Map<string, string>()\n"],"mappings":"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","names":["breakPoints","classJoin","classes","c","deleteComments","css","expandArrayValues","l","_a","_","prop","vals","val","i","shorthandPropsMap","shorthandProps","expandProps","k","v","findQueries","queries","m","query","bodyStart","openCount","trim","t2s","tsp","s","p","addCss","createClass","className","qs","q"]}
package/src/index.cjs DELETED
@@ -1,23 +0,0 @@
1
- "use strict";var g=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var b=(r,n)=>{for(var t in n)g(r,t,{get:n[t],enumerable:!0})},y=(r,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of f(n))!c.call(r,e)&&e!==t&&g(r,e,{get:()=>n[e],enumerable:!(o=l(n,e))||o.enumerable});return r};var x=r=>y(g({},"__esModule",{value:!0}),r);var C={};b(C,{addCss:()=>m,classJoin:()=>$,createClass:()=>u,css:()=>u,shorthandProps:()=>P,shorthandPropsMap:()=>p,t2s:()=>d});module.exports=x(C);var h=["30em","48em","62em","80em","96em"];function $(...r){return r.filter(n=>n&&typeof n=="string").join(" ")}function j(r){return r.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,"")}function w(r){return r.includes("[")?r.split(`
2
- `).map(n=>{var s;let[t,o,e]=(s=[...n.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)][0])!=null?s:[];return e?e.split(",").map((i,a)=>(i=i.trim(),!i||i==="null"||i==="undefined"?"":a===0?`${o}: ${i};`:`@media (min-width: ${h[a-1]}) { ${o}: ${i}; }`)).join(`
3
- `):n}).join(`
4
- `):r}var p={ai:"align-items",b:"border",br:"border-radius",bg:"background",c:"color",d:"display",f:"flex",fd:"flex-direction",i:"inset",h:"height",jc:"justify-content",m:"margin",ml:"margin-left",mr:"margin-right",mt:"margin-top",mb:"margin-bottom",maxW:"max-width",minW:"min-width",p:"padding",pl:"padding-left",pr:"padding-right",pt:"padding-top",pb:"padding-bottom",pos:"position",ta:"text-align",w:"width",z:"z-index"},P=[...Object.keys(p),"mx","my","px","py"];function S(r){return r=`
5
- `+r,r=r.replace(/([mp])x:([^;]*)/g,`$1l:$2;
6
- $1r:$2`).replace(/([mp])y:([^;]*);/g,`$1t:$2;
7
- $1b:$2`),Object.entries(p).forEach(([n,t])=>{r=r.replace(new RegExp(`([
8
- ;])${n}:`,"g"),`$1${t}:`)}),r.trim()}function k(r){let n=[];for(let t of r.matchAll(/[@&]/gm)){let o="",e=0,s=0;for(let i=t.index;i<r.length;i++)if(r[i]==="{")s===0&&(o=r.slice(t.index,i).trim(),e=i+1),s++;else if(r[i]==="}"&&(s--,s===0)){n.push({start:t.index,end:i+1,query:o,outerBody:r.slice(t.index,i+1),innerBody:r.slice(e,i)});break}s!==0&&console.error(`${o} not closed: "${r}"`)}return n}function q(r){return r.split(`
9
- `).map(n=>n.trim()).filter(n=>n).join(`
10
- `)}function d(...r){let[n,...t]=r;return typeof n=="string"?n:n.map((o,e)=>{var s;return o+((s=t==null?void 0:t[e])!=null?s:"")}).join("")}function m(r){m.que.add(r),setTimeout(()=>{let n=[...m.que].join(`
11
- `);if(n){m.que.clear();let t=document.createElement("style");t.id=`u${m.count++}`,t.innerHTML=n,document.head.appendChild(t)}},0)}m.que=new Set;m.count=0;function u(...r){let n=d(...r);if(!n)return"";let t=u.history.get(n);if(!t){t="s"+u.count++,u.history.set(n,t),n=j(n),n=S(n),n=w(n);let o=k(n);for(let e of o.reverse())n=n.slice(0,e.start)+n.slice(e.end);n=`.${t}{
12
- ${n}
13
- }
14
- `,n+=o.map(e=>e.query.startsWith("&")?`.${t}${e.query.slice(1)}{
15
- ${e.innerBody}
16
- }`:e.query.startsWith("@keyframes")?e.outerBody:`${e.query}{
17
- .${t}{${e.innerBody}
18
- }
19
- }`).join(`
20
- `),n=q(n)+`
21
-
22
- `,m(n)}return t}u.count=0;u.history=new Map;0&&(module.exports={addCss,classJoin,createClass,css,shorthandProps,shorthandPropsMap,t2s});
23
- //# sourceMappingURL=index.cjs.map
package/src/index.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["index.ts","core.ts"],"sourcesContent":["export * from './core.js'\nexport { createClass as css } from './core.js'\n","/** Breakpoints like chakra */\nconst breakPoints = ['30em', '48em', '62em', '80em', '96em']\n\n/** Joins class names and filters out blanks */\nexport function classJoin(...classes: any[]) {\n return classes.filter((c) => c && typeof c === 'string').join(' ')\n}\n\n// delete css comments i.e. {/* blah */}\nfunction deleteComments(css: string) {\n return css.replace(/{\\/\\*[\\s\\S]*?(?=\\*\\/})\\*\\/}/gm, '')\n}\n\n/**\n * Expands array values into media queries\n *\n * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles\n */\nfunction expandArrayValues(css: string) {\n if (!css.includes('[')) return css\n return css\n .split('\\n')\n .map((l) => {\n const [_, prop, vals] = [...l.matchAll(/([A-Za-z\\-]*):[ ]*\\[([^\\]]+)\\]/g)]?.[0] ?? []\n if (vals) {\n return vals\n .split(',')\n .map((val, i) => {\n val = val.trim()\n if (!val || val === 'null' || val === 'undefined') return ''\n if (i === 0) {\n return `${prop}: ${val};`\n }\n return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`\n })\n .join('\\n')\n }\n return l\n })\n .join('\\n')\n}\n\nexport interface ShorthandProps {\n /** shorthand for css:align-items */\n ai?: string\n /** shorthand for css:border */\n b?: string | number\n /** shorthand for css:border-radius */\n br?: string | number\n /** shorthand for css:background */\n bg?: string\n /** shorthand for css:color */\n c?: string\n /** shorthand for css:display */\n d?: string\n /** shorthand for css:flex */\n f?: string\n /** shorthand for css:flex-direction */\n fd?: string\n /** shorthand for css:height */\n h?: number | string\n /** shorthand for css:inset */\n i?: number | string\n /** shorthand for css:justify-content */\n jc?: string\n /** shorthand for css:margin */\n m?: number | string\n /** shorthand for css:margin-left */\n ml?: number | string\n /** shorthand for css:margin-right */\n mr?: number | string\n /** shorthand for css:margin-top */\n mt?: number | string\n /** shorthand for css:margin-bottom */\n mb?: number | string\n /** shorthand for css:margin-top & margin-bottom */\n my?: number | string\n /** shorthand for css:margin-left & margin-right */\n mx?: number | string\n /** shorthand for css:max-width */\n maxW?: number | string\n /** shorthand for css:min-width */\n minW?: number | string\n /** shorthand for css:padding */\n p?: number | string\n /** shorthand for css:padding-left */\n pl?: number | string\n /** shorthand for css:padding-right */\n pr?: number | string\n /** shorthand for css:padding-top */\n pt?: number | string\n /** shorthand for css:padding-bottom */\n pb?: number | string\n /** shorthand for css:padding-top & padding-bottom */\n py?: number | string\n /** shorthand for css:padding-left & padding-right */\n px?: number | string\n /** shorthand for css:position */\n pos?: number | string\n /** shorthand for css:text-align */\n ta?: string\n /** shorthand for css:width */\n w?: number | string\n /** shorthand for css:z-index */\n z?: number | string\n}\nexport const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {\n ai: 'align-items',\n b: 'border',\n br: 'border-radius',\n bg: 'background',\n c: 'color',\n d: 'display',\n f: 'flex',\n fd: 'flex-direction',\n i: 'inset',\n h: 'height',\n jc: 'justify-content',\n m: 'margin',\n ml: 'margin-left',\n mr: 'margin-right',\n mt: 'margin-top',\n mb: 'margin-bottom',\n maxW: 'max-width',\n minW: 'min-width',\n p: 'padding',\n pl: 'padding-left',\n pr: 'padding-right',\n pt: 'padding-top',\n pb: 'padding-bottom',\n pos: 'position',\n ta: 'text-align',\n w: 'width',\n z: 'z-index',\n}\nexport const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']\n\n/** Expand short-hand css props to full */\nfunction expandProps(css: string) {\n css = '\\n' + css // inject a newline to make the regex easier\n // Handle 'mx', 'my', 'px', 'py'\n css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\\n$1b:$2')\n Object.entries(shorthandPropsMap).forEach(([k, v]) => {\n css = css.replace(new RegExp(`([ \\n\\t;])${k}:`, 'g'), `$1${v}:`)\n })\n return css.trim()\n}\n\n/** Find @keyframes, @media, @container queries in css **/\nfunction findQueries(css: string) {\n const queries = []\n for (let m of css.matchAll(/[@&]/gm)) {\n let query = ''\n let bodyStart = 0\n let openCount = 0\n for (let i = m.index!; i < css.length; i++) {\n if (css[i] === '{') {\n if (openCount === 0) {\n query = css.slice(m.index, i).trim()\n bodyStart = i + 1\n }\n openCount++\n } else if (css[i] === '}') {\n openCount--\n if (openCount === 0) {\n queries.push({\n start: m.index,\n end: i + 1,\n query,\n outerBody: css.slice(m.index, i + 1),\n innerBody: css.slice(bodyStart, i),\n })\n break\n }\n }\n }\n if (openCount !== 0) console.error(`${query} not closed: \"${css}\"`)\n }\n return queries\n}\n\n/** Trims whitespace for every line */\nfunction trim(css: string) {\n return css\n .split('\\n')\n .map((l) => l.trim())\n .filter((l) => l)\n .join('\\n')\n}\n\n/**\n * Assemble a string from a template string array and a list of placeholders.\n *\n * - If the first argument is a string, it is returned as is.\n *\n * i.e.\n * myFoo(...props: TemplateStringProps) => {\n * const inputStr = t2s(...props);\n * }\n * myFoo`hello ${name}` => 'hello world'\n * myFoo(`hello ${name}`) => 'hello world'\n */\nexport function t2s(...tsp: TemplateStringProps) {\n const [s, ...p] = tsp\n return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')\n}\nexport type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]\n\n/**\n * Injects css to the page\n *\n * - Batches adds for performance\n *\n * @param css - css to be injected\n * @returns void\n */\nexport function addCss(css: string) {\n addCss.que.add(css)\n setTimeout(() => {\n const css = [...addCss.que].join('\\n')\n if (css) {\n addCss.que.clear()\n const s = document.createElement('style')\n s.id = `u${addCss.count++}`\n s.innerHTML = css\n document.head.appendChild(s)\n }\n }, 0)\n}\naddCss.que = new Set<string>()\naddCss.count = 0\n\n/**\n * Injects css and creates unique class names\n *\n * - Skips if already added\n *\n * @param css - string or template string, to be injected\n * @returns a unique class name\n */\nexport function createClass(...p: TemplateStringProps) {\n let css = t2s(...p)\n if (!css) return ''\n let className = createClass.history.get(css)\n if (!className) {\n className = 's' + createClass.count++\n createClass.history.set(css, className)\n\n css = deleteComments(css)\n css = expandProps(css)\n css = expandArrayValues(css)\n const qs = findQueries(css)\n\n for (let q of qs.reverse()) {\n css = css.slice(0, q.start) + css.slice(q.end)\n }\n\n css = `.${className}{\\n${css}\\n}\\n`\n css += qs\n .map((q) => {\n if (q.query.startsWith('&')) {\n return `.${className}${q.query.slice(1)}{\\n${q.innerBody}\\n}`\n }\n if (q.query.startsWith('@keyframes')) {\n return q.outerBody\n }\n return `${q.query}{\\n.${className}{${q.innerBody}\\n}\\n}`\n })\n .join('\\n')\n\n css = trim(css) + '\\n\\n'\n\n addCss(css)\n }\n return className\n}\ncreateClass.count = 0\ncreateClass.history = new Map<string, string>()\n"],"mappings":"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","names":["src_exports","__export","addCss","classJoin","createClass","shorthandProps","shorthandPropsMap","t2s","__toCommonJS","breakPoints","classJoin","classes","c","deleteComments","css","expandArrayValues","l","_a","_","prop","vals","val","i","shorthandPropsMap","shorthandProps","expandProps","k","v","findQueries","queries","m","query","bodyStart","openCount","trim","t2s","tsp","s","p","addCss","createClass","className","qs","q"]}
package/src/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { ShorthandProps, TemplateStringProps, addCss, classJoin, createClass, createClass as css, shorthandProps, shorthandPropsMap, t2s } from './core.js';
package/src/index.js DELETED
@@ -1,23 +0,0 @@
1
- var a=["30em","48em","62em","80em","96em"];function x(...r){return r.filter(n=>n&&typeof n=="string").join(" ")}function d(r){return r.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm,"")}function l(r){return r.includes("[")?r.split(`
2
- `).map(n=>{var s;let[t,o,e]=(s=[...n.matchAll(/([A-Za-z\-]*):[ ]*\[([^\]]+)\]/g)][0])!=null?s:[];return e?e.split(",").map((i,g)=>(i=i.trim(),!i||i==="null"||i==="undefined"?"":g===0?`${o}: ${i};`:`@media (min-width: ${a[g-1]}) { ${o}: ${i}; }`)).join(`
3
- `):n}).join(`
4
- `):r}var p={ai:"align-items",b:"border",br:"border-radius",bg:"background",c:"color",d:"display",f:"flex",fd:"flex-direction",i:"inset",h:"height",jc:"justify-content",m:"margin",ml:"margin-left",mr:"margin-right",mt:"margin-top",mb:"margin-bottom",maxW:"max-width",minW:"min-width",p:"padding",pl:"padding-left",pr:"padding-right",pt:"padding-top",pb:"padding-bottom",pos:"position",ta:"text-align",w:"width",z:"z-index"},h=[...Object.keys(p),"mx","my","px","py"];function f(r){return r=`
5
- `+r,r=r.replace(/([mp])x:([^;]*)/g,`$1l:$2;
6
- $1r:$2`).replace(/([mp])y:([^;]*);/g,`$1t:$2;
7
- $1b:$2`),Object.entries(p).forEach(([n,t])=>{r=r.replace(new RegExp(`([
8
- ;])${n}:`,"g"),`$1${t}:`)}),r.trim()}function c(r){let n=[];for(let t of r.matchAll(/[@&]/gm)){let o="",e=0,s=0;for(let i=t.index;i<r.length;i++)if(r[i]==="{")s===0&&(o=r.slice(t.index,i).trim(),e=i+1),s++;else if(r[i]==="}"&&(s--,s===0)){n.push({start:t.index,end:i+1,query:o,outerBody:r.slice(t.index,i+1),innerBody:r.slice(e,i)});break}s!==0&&console.error(`${o} not closed: "${r}"`)}return n}function b(r){return r.split(`
9
- `).map(n=>n.trim()).filter(n=>n).join(`
10
- `)}function y(...r){let[n,...t]=r;return typeof n=="string"?n:n.map((o,e)=>{var s;return o+((s=t==null?void 0:t[e])!=null?s:"")}).join("")}function m(r){m.que.add(r),setTimeout(()=>{let n=[...m.que].join(`
11
- `);if(n){m.que.clear();let t=document.createElement("style");t.id=`u${m.count++}`,t.innerHTML=n,document.head.appendChild(t)}},0)}m.que=new Set;m.count=0;function u(...r){let n=y(...r);if(!n)return"";let t=u.history.get(n);if(!t){t="s"+u.count++,u.history.set(n,t),n=d(n),n=f(n),n=l(n);let o=c(n);for(let e of o.reverse())n=n.slice(0,e.start)+n.slice(e.end);n=`.${t}{
12
- ${n}
13
- }
14
- `,n+=o.map(e=>e.query.startsWith("&")?`.${t}${e.query.slice(1)}{
15
- ${e.innerBody}
16
- }`:e.query.startsWith("@keyframes")?e.outerBody:`${e.query}{
17
- .${t}{${e.innerBody}
18
- }
19
- }`).join(`
20
- `),n=b(n)+`
21
-
22
- `,m(n)}return t}u.count=0;u.history=new Map;export{m as addCss,x as classJoin,u as createClass,u as css,h as shorthandProps,p as shorthandPropsMap,y as t2s};
23
- //# sourceMappingURL=index.js.map
package/src/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["core.ts"],"sourcesContent":["/** Breakpoints like chakra */\nconst breakPoints = ['30em', '48em', '62em', '80em', '96em']\n\n/** Joins class names and filters out blanks */\nexport function classJoin(...classes: any[]) {\n return classes.filter((c) => c && typeof c === 'string').join(' ')\n}\n\n// delete css comments i.e. {/* blah */}\nfunction deleteComments(css: string) {\n return css.replace(/{\\/\\*[\\s\\S]*?(?=\\*\\/})\\*\\/}/gm, '')\n}\n\n/**\n * Expands array values into media queries\n *\n * Inspired by https://chakra-ui.com/docs/styled-system/responsive-styles\n */\nfunction expandArrayValues(css: string) {\n if (!css.includes('[')) return css\n return css\n .split('\\n')\n .map((l) => {\n const [_, prop, vals] = [...l.matchAll(/([A-Za-z\\-]*):[ ]*\\[([^\\]]+)\\]/g)]?.[0] ?? []\n if (vals) {\n return vals\n .split(',')\n .map((val, i) => {\n val = val.trim()\n if (!val || val === 'null' || val === 'undefined') return ''\n if (i === 0) {\n return `${prop}: ${val};`\n }\n return `@media (min-width: ${breakPoints[i - 1]}) { ${prop}: ${val}; }`\n })\n .join('\\n')\n }\n return l\n })\n .join('\\n')\n}\n\nexport interface ShorthandProps {\n /** shorthand for css:align-items */\n ai?: string\n /** shorthand for css:border */\n b?: string | number\n /** shorthand for css:border-radius */\n br?: string | number\n /** shorthand for css:background */\n bg?: string\n /** shorthand for css:color */\n c?: string\n /** shorthand for css:display */\n d?: string\n /** shorthand for css:flex */\n f?: string\n /** shorthand for css:flex-direction */\n fd?: string\n /** shorthand for css:height */\n h?: number | string\n /** shorthand for css:inset */\n i?: number | string\n /** shorthand for css:justify-content */\n jc?: string\n /** shorthand for css:margin */\n m?: number | string\n /** shorthand for css:margin-left */\n ml?: number | string\n /** shorthand for css:margin-right */\n mr?: number | string\n /** shorthand for css:margin-top */\n mt?: number | string\n /** shorthand for css:margin-bottom */\n mb?: number | string\n /** shorthand for css:margin-top & margin-bottom */\n my?: number | string\n /** shorthand for css:margin-left & margin-right */\n mx?: number | string\n /** shorthand for css:max-width */\n maxW?: number | string\n /** shorthand for css:min-width */\n minW?: number | string\n /** shorthand for css:padding */\n p?: number | string\n /** shorthand for css:padding-left */\n pl?: number | string\n /** shorthand for css:padding-right */\n pr?: number | string\n /** shorthand for css:padding-top */\n pt?: number | string\n /** shorthand for css:padding-bottom */\n pb?: number | string\n /** shorthand for css:padding-top & padding-bottom */\n py?: number | string\n /** shorthand for css:padding-left & padding-right */\n px?: number | string\n /** shorthand for css:position */\n pos?: number | string\n /** shorthand for css:text-align */\n ta?: string\n /** shorthand for css:width */\n w?: number | string\n /** shorthand for css:z-index */\n z?: number | string\n}\nexport const shorthandPropsMap: Record<keyof Omit<ShorthandProps, 'mx' | 'my' | 'px' | 'py'>, string> = {\n ai: 'align-items',\n b: 'border',\n br: 'border-radius',\n bg: 'background',\n c: 'color',\n d: 'display',\n f: 'flex',\n fd: 'flex-direction',\n i: 'inset',\n h: 'height',\n jc: 'justify-content',\n m: 'margin',\n ml: 'margin-left',\n mr: 'margin-right',\n mt: 'margin-top',\n mb: 'margin-bottom',\n maxW: 'max-width',\n minW: 'min-width',\n p: 'padding',\n pl: 'padding-left',\n pr: 'padding-right',\n pt: 'padding-top',\n pb: 'padding-bottom',\n pos: 'position',\n ta: 'text-align',\n w: 'width',\n z: 'z-index',\n}\nexport const shorthandProps = [...Object.keys(shorthandPropsMap), 'mx', 'my', 'px', 'py']\n\n/** Expand short-hand css props to full */\nfunction expandProps(css: string) {\n css = '\\n' + css // inject a newline to make the regex easier\n // Handle 'mx', 'my', 'px', 'py'\n css = css.replace(/([mp])x:([^;]*)/g, '$1l:$2;\\n$1r:$2').replace(/([mp])y:([^;]*);/g, '$1t:$2;\\n$1b:$2')\n Object.entries(shorthandPropsMap).forEach(([k, v]) => {\n css = css.replace(new RegExp(`([ \\n\\t;])${k}:`, 'g'), `$1${v}:`)\n })\n return css.trim()\n}\n\n/** Find @keyframes, @media, @container queries in css **/\nfunction findQueries(css: string) {\n const queries = []\n for (let m of css.matchAll(/[@&]/gm)) {\n let query = ''\n let bodyStart = 0\n let openCount = 0\n for (let i = m.index!; i < css.length; i++) {\n if (css[i] === '{') {\n if (openCount === 0) {\n query = css.slice(m.index, i).trim()\n bodyStart = i + 1\n }\n openCount++\n } else if (css[i] === '}') {\n openCount--\n if (openCount === 0) {\n queries.push({\n start: m.index,\n end: i + 1,\n query,\n outerBody: css.slice(m.index, i + 1),\n innerBody: css.slice(bodyStart, i),\n })\n break\n }\n }\n }\n if (openCount !== 0) console.error(`${query} not closed: \"${css}\"`)\n }\n return queries\n}\n\n/** Trims whitespace for every line */\nfunction trim(css: string) {\n return css\n .split('\\n')\n .map((l) => l.trim())\n .filter((l) => l)\n .join('\\n')\n}\n\n/**\n * Assemble a string from a template string array and a list of placeholders.\n *\n * - If the first argument is a string, it is returned as is.\n *\n * i.e.\n * myFoo(...props: TemplateStringProps) => {\n * const inputStr = t2s(...props);\n * }\n * myFoo`hello ${name}` => 'hello world'\n * myFoo(`hello ${name}`) => 'hello world'\n */\nexport function t2s(...tsp: TemplateStringProps) {\n const [s, ...p] = tsp\n return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('')\n}\nexport type TemplateStringProps = [strings: TemplateStringsArray | string, ...placeHolders: string[]]\n\n/**\n * Injects css to the page\n *\n * - Batches adds for performance\n *\n * @param css - css to be injected\n * @returns void\n */\nexport function addCss(css: string) {\n addCss.que.add(css)\n setTimeout(() => {\n const css = [...addCss.que].join('\\n')\n if (css) {\n addCss.que.clear()\n const s = document.createElement('style')\n s.id = `u${addCss.count++}`\n s.innerHTML = css\n document.head.appendChild(s)\n }\n }, 0)\n}\naddCss.que = new Set<string>()\naddCss.count = 0\n\n/**\n * Injects css and creates unique class names\n *\n * - Skips if already added\n *\n * @param css - string or template string, to be injected\n * @returns a unique class name\n */\nexport function createClass(...p: TemplateStringProps) {\n let css = t2s(...p)\n if (!css) return ''\n let className = createClass.history.get(css)\n if (!className) {\n className = 's' + createClass.count++\n createClass.history.set(css, className)\n\n css = deleteComments(css)\n css = expandProps(css)\n css = expandArrayValues(css)\n const qs = findQueries(css)\n\n for (let q of qs.reverse()) {\n css = css.slice(0, q.start) + css.slice(q.end)\n }\n\n css = `.${className}{\\n${css}\\n}\\n`\n css += qs\n .map((q) => {\n if (q.query.startsWith('&')) {\n return `.${className}${q.query.slice(1)}{\\n${q.innerBody}\\n}`\n }\n if (q.query.startsWith('@keyframes')) {\n return q.outerBody\n }\n return `${q.query}{\\n.${className}{${q.innerBody}\\n}\\n}`\n })\n .join('\\n')\n\n css = trim(css) + '\\n\\n'\n\n addCss(css)\n }\n return className\n}\ncreateClass.count = 0\ncreateClass.history = new Map<string, string>()\n"],"mappings":"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","names":["breakPoints","classJoin","classes","c","deleteComments","css","expandArrayValues","l","_a","_","prop","vals","val","i","shorthandPropsMap","shorthandProps","expandProps","k","v","findQueries","queries","m","query","bodyStart","openCount","trim","t2s","tsp","s","p","addCss","createClass","className","qs","q"]}