Import JSON (#97)

* prototype loop for building json * fixes trailing comma * indicate which we want as json * match token spec, output single file, add npm export * update test workflow to gen json * version bump * adds docsite info for json design tokens * mention json as an option
argyleink · Dec 7, 2021 · d0fee82 · d0fee82
1 parent ebaf65b
commit d0fee82
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 5 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -9,5 +9,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
       - run: npm ci
+      - run: npm run gen:op
       - run: npm run lib:js
       - run: npm test
diff --git a/docsite/index.html b/docsite/index.html
@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
           </li>
         </ul>
         <small>
-          v1.0.8
+          v1.0.12
           <span class="license">
             <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
               <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
@@ -570,7 +570,7 @@ <h2>
       <header>
         <h2>Getting Started</h2>
         <div class="block-wrap">
-          <p>Pick from CSS, <a href="https://postcss.org/">PostCSS</a>, or props as Javascript.</p>
+          <p>Pick from CSS, <a href="https://postcss.org/">PostCSS</a>, JSON, or props as Javascript.</p>
           <blockquote class="icon-quote indigo">
             <svg viewBox="0 0 24 24">
               <path d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -651,6 +651,21 @@ <h6>Individual packs</h6>
               </div>
             </details>
 
+            <details class="started-details" id="design-tokens">
+              <summary>Design Tokens</summary>
+              <div>
+                <div class="block-wrap">
+                  <div>
+                    <h6>as JSON</h6>
+                    <p>Follows the <a href="https://design-tokens.github.io/community-group/format/">design tokens spec</a>.</p>
+                    <pre class="language-js"><code>
+                    import "https://unpkg.com/open-props/open-props.tokens.json"
+                    </code></pre>
+                  </div>
+                </div>
+              </div>
+            </details>
+
             <h5 id="jitprops">PostCSS JIT Props</h5>
             <p>Only ship the props you use. <a href="https://github.com/GoogleChromeLabs/postcss-jit-props">Learn more</a>.</p>
 
@@ -756,6 +771,20 @@ <h6>Entry points</h6>
                 </div>
               </div>
             </details>
+
+            <details class="started-details">
+              <summary>Design Tokens</summary>
+              <div>
+                <div class="block-wrap">
+                  <pre class="language-js"><code>
+                  /* 3 ways to import */
+                  import 'open-props/tokens'
+                  import 'open-props/json'
+                  import 'open-props/design-tokens'
+                  </code></pre>
+                </div>
+              </div>
+            </details>
           </div>
         </div>
       </article>

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "name": "open-props",
   "author": "Adam Argyle",
   "license": "MIT",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/argyleink/open-props"
@@ -53,7 +53,10 @@
     "./teal": "./teal.min.css",
     "./violet": "./violet.min.css",
     "./yellow": "./yellow.min.css",
-    "./zindex": "./zindex.min.css"
+    "./zindex": "./zindex.min.css",
+    "./json": "./open-props.tokens.json",
+    "./tokens": "./open-props.tokens.json",
+    "./design-tokens": "./open-props.tokens.json"
   },
   "browserslist": [
     "defaults"

diff --git a/readme.md b/readme.md
@@ -17,6 +17,7 @@
 
 #### CDN
 - [https://unpkg.com/open-props](https://unpkg.com/open-props)
+- [https://unpkg.com/open-props/open-props.tokens.json](https://unpkg.com/open-props/open-props.tokens.json)
 
 #### CLI
 - `npm run gen:op` - runs through `src/` js files and creates the PostCSS files in `src/`

diff --git a/src/_create-props.js b/src/_create-props.js
@@ -45,6 +45,26 @@ const individual_colors = {
   'props.orange.css': OpenColors.Orange,
 }
 
+const jsonbundle = {
+  ...Object.values(individual_colors).reduce((colors, color) => {
+    return Object.assign(colors, color)
+  }, {}),
+  ...Sizes,
+  ...Easings,
+  ...Zindex,
+  ...Aspects,
+  ...Gradients,
+  ...Borders,
+}
+const designtokens = Object.entries(jsonbundle).map(([key, token]) => {
+  return [key, {
+    value: token
+  }]
+})
+
+const JSONtokens = fs.createWriteStream('../open-props.tokens.json')
+JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2))
+
 const buildPropsStylesheet = ({filename, props}) => {
   const file = fs.createWriteStream(filename)
 
@@ -77,7 +97,7 @@ const buildPropsStylesheet = ({filename, props}) => {
   file.end(appendedMeta)
 }
 
-// gen prop stylesheets
+// gen prop variants
 Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => {
   buildPropsStylesheet({filename, props})
 })

diff --git a/test/basic.test.cjs b/test/basic.test.cjs
@@ -1,5 +1,6 @@
 const test = require('ava')
 const OpenProps = require('../dist/open-props.cjs')
+const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
   t.is(Object.keys(OpenProps).length, 351)
@@ -15,4 +16,9 @@ test('Import should have sizes', async t => {
 
 test('Import should have colors', async t => {
   t.assert(Object.keys(OpenProps).includes('--orange-0'))
+})
+
+test('JSON Import should have colors', async t => {
+  t.is(Object.keys(OPtokens).length, 274)
+  t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })