add TS support, cleans up modules

build/props.js

@@ -17,6 +17,8 @@ import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
 
 import {buildPropsStylesheet} from './to-stylesheet.js'
 import {toTokens} from './to-tokens.js'
+import {toObject} from './to-object.js'
+import {toTypes, preparedTypes} from './to-types.js'
 import {toFigmaTokens} from './to-figmatokens.js'
 
 const [,,prefix='',useWhere,customSubject='',filePrefix=''] = process.argv
@@ -82,6 +84,32 @@ const figmatokensSYNC = { 'open-props': { ...figmatokens } }
 const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json')
 FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
 
+if (!fs.existsSync('../dist'))
+  fs.mkdirSync('../dist')
+
+const JS = fs.createWriteStream('../dist/open-props.js')
+JS.end(`var OpenProps = ${JSON.stringify(toObject(), null, 2)}`)
+
+const ES = fs.createWriteStream('../dist/open-props.module.js')
+ES.end(`export default ${JSON.stringify(toObject(), null, 2)}`)
+
+const CJS = fs.createWriteStream('../dist/open-props.cjs')
+CJS.end(`module.exports = ${JSON.stringify(toObject(), null, 2)}`)
+
+// const UMD = fs.createWriteStream('../dist/open-props.umd.js')
+// UMD.end(`module.exports = ${JSON.stringify(toObject(), null, 2)}`)
+
+const TS = fs.createWriteStream('../dist/open-props.ts')
+TS.end(`export default ${JSON.stringify(toObject(), null, 2)}`)
+
+const TSD = fs.createWriteStream('../dist/open-props.d.ts')
+TSD.end(`declare const OpenProps: ${JSON.stringify(toTypes(), null, 2).replaceAll(',',';')};\nexport default OpenProps;`)
+
+preparedTypes().forEach(({filename, json}) => {
+  let bundle = fs.createWriteStream('../src/props.'+filename+'.d.ts');
+  bundle.end(`declare const _default: ${JSON.stringify(json, null, 2).replaceAll(',',';')};\nexport default _default;`)
+})
+
 // gen prop variants
 Object.entries({
   ...mainbundle, 

build/to-object.js

@@ -0,0 +1,35 @@
+import Animations from '../src/props.animations.js'
+import Sizes from '../src/props.sizes.js'
+import Colors from '../src/props.colors.js'
+import ColorsHSL from '../src/props.colors-hsl.js'
+import Fonts from '../src/props.fonts.js'
+import Borders from '../src/props.borders.js'
+import Aspects from '../src/props.aspects.js'
+import Easings from '../src/props.easing.js'
+import Gradients from '../src/props.gradients.js'
+import Shadows from '../src/props.shadows.js'
+import SVG from '../src/props.svg.js'
+import Zindex from '../src/props.zindex.js'
+import MaskEdges from '../src/props.masks.edges.js'
+import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
+
+import {mapToObjectNotation} from './utils.js'
+
+export const toObject = () => {
+  return mapToObjectNotation({
+    ...Animations,
+    ...Sizes,
+    ...Colors,
+    ...ColorsHSL,
+    ...Fonts,
+    ...Borders,
+    ...Aspects,
+    ...Easings,
+    ...SVG,
+    ...Gradients,
+    ...Shadows,
+    ...Zindex,
+    ...MaskEdges,
+    ...MaskCornerCuts,
+  })
+}

build/to-types.js

@@ -0,0 +1,66 @@
+import Animations from '../src/props.animations.js'
+import Sizes from '../src/props.sizes.js'
+import Colors from '../src/props.colors.js'
+import ColorsHSL from '../src/props.colors-hsl.js'
+import Fonts from '../src/props.fonts.js'
+import Borders from '../src/props.borders.js'
+import Aspects from '../src/props.aspects.js'
+import Easings from '../src/props.easing.js'
+import Gradients from '../src/props.gradients.js'
+import Shadows from '../src/props.shadows.js'
+import SVG from '../src/props.svg.js'
+import Zindex from '../src/props.zindex.js'
+import MaskEdges from '../src/props.masks.edges.js'
+import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
+
+import {mapToObjectNotation} from './utils.js'
+
+const mapTypes = collection =>
+  Object.fromEntries(Object.entries(collection)
+    .map(([key, val]) => 
+      [key, typeof val]))
+
+export const toTypes = () => {
+  return mapToObjectNotation({
+    ...mapTypes(Animations),
+    ...mapTypes(Sizes),
+    ...mapTypes(Colors),
+    ...mapTypes(ColorsHSL),
+    ...mapTypes(Fonts),
+    ...mapTypes(Borders),
+    ...mapTypes(Aspects),
+    ...mapTypes(Easings),
+    ...mapTypes(SVG),
+    ...mapTypes(Gradients),
+    ...mapTypes(Shadows),
+    ...mapTypes(Zindex),
+    ...mapTypes(MaskEdges),
+    ...mapTypes(MaskCornerCuts),
+  })
+}
+
+export const preparedTypes = () => {
+  return [
+    {filename: 'animations', props: Animations},
+    {filename: 'sizes', props: Sizes},
+    {filename: 'colors', props: Colors},
+    {filename: 'colors-hsl', props: ColorsHSL},
+    {filename: 'fonts', props: Fonts},
+    {filename: 'borders', props: Borders},
+    {filename: 'aspects', props: Aspects},
+    {filename: 'easings', props: Easings},
+    {filename: 'svg', props: SVG},
+    {filename: 'gradients', props: Gradients},
+    {filename: 'shadows', props: Shadows},
+    {filename: 'zindex', props: Zindex},
+    {filename: 'masks-edges', props: MaskEdges},
+    {filename: 'masks-corner-cuts', props: MaskCornerCuts},
+  ].map(({filename, props}) => {
+    const json = mapToObjectNotation(mapTypes(props))
+
+    return {
+      filename,
+      json,
+    }
+  })
+}

build/utils.js

@@ -0,0 +1,12 @@
+export const camelize = text => {
+  text = text.replace(/[-]+(.)?/g, (_, c) => c 
+    ? c.toUpperCase() 
+    : '')
+  return text.substr(0, 1).toLowerCase() + text.substr(1)
+}
+
+export const mapToObjectNotation = props => {
+  for (var prop in props)
+    props[camelize(prop)] = props[prop]
+  return props
+}

package.json

@@ -20,8 +20,10 @@
   "main": "dist/open-props.cjs",
   "unpkg": "open-props.min.css",
   "module": "dist/open-props.module.js",
+  "types": "dist/open-props.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/open-props.d.ts",
       "import": "./dist/open-props.module.js",
       "require": "./dist/open-props.cjs",
       "default": "./dist/open-props.cjs"
@@ -178,14 +180,11 @@
   "scripts": {
     "build": "concurrently npm:gen:op npm:gen:shadowdom",
     "test": "ava test/basic.test.cjs",
-    "bundle": "concurrently npm:lib:* -m 25 && concurrently npm:shadow:* -m 25 && npm run module:js",
-    "bundle:pre-edit": "json -I -f package.json -e \"this.unpkg=''\"",
-    "bundle:post-edit": "json -I -f package.json -e \"this.unpkg='open-props.min.css'\"",
+    "bundle": "concurrently npm:lib:* -m 25 && concurrently npm:shadow:* -m 25",
     "gen:op": "cd build && node props.js \"\" true",
     "gen:nowhere": "cd build && node props \"\" false",
     "gen:shadowdom": "cd build && node props \"\" false \":host\" \"shadow\"",
     "gen:prefixed": "cd build && node props.js \"op\" true",
-    "module:js": "npm run bundle:pre-edit && microbundle --no-sourcemap && npm run bundle:post-edit",
     "lib:all": "postcss src/index.css -o open-props.min.css",
     "lib:normalize": "postcss src/extra/normalize.css -o normalize.min.css && node ./build/extras.js",
     "lib:normalize:light": "postcss src/extra/normalize.light.css -o normalize.light.min.css",
@@ -305,7 +304,6 @@
     "concurrently": "^7.2.2",
     "cssnano": "^5.1.10",
     "json": "^11.0.0",
-    "microbundle": "^0.13.3",
     "open-color": "^1.9.1",
     "postcss": "^8.3.9",
     "postcss-cli": "^8.3.1",

test/basic.test.cjs

@@ -51,4 +51,8 @@ test('Should produce normalize files', async t => {
 test('Should produce optional mask props', async t => {
   t.assert(fs.existsSync('./masks.edges.min.css'))
   t.assert(fs.existsSync('./masks.corner-cuts.min.css'))
+
+test('Should produce typings files', async t => {
+  t.assert(fs.existsSync('./dist/open-props.d.ts'))
+  t.assert(fs.existsSync('./dist/props.sizes.d.ts'))
 })