Commit
Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Tue, 07 Dec 2021 04:42:02 +0000
Hash: d0fee82d2d9e2677d1d3057a4dafb650dbc824dc
Timestamp: Tue, 07 Dec 2021 04:42:02 +0000 (3 years ago)

+65 -5 +/-6 browse
Import `JSON` (#97) 
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
1diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
2index 92c570c..df23aea 100644
3--- a/.github/workflows/tests.yml
4+++ b/.github/workflows/tests.yml
5 @@ -9,5 +9,6 @@ jobs:
6 - uses: actions/checkout@v2
7 - uses: actions/setup-node@v2
8 - run: npm ci
9+ - run: npm run gen:op
10 - run: npm run lib:js
11 - run: npm test
12 diff --git a/docsite/index.html b/docsite/index.html
13index 1337e10..cf9b729 100644
14--- a/docsite/index.html
15+++ b/docsite/index.html
16 @@ -119,7 +119,7 @@
17 </li>
18 </ul>
19 <small>
20- v1.0.8
21+ v1.0.12
22 <span class="license">
23 <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
24 <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>
25 @@ -570,7 +570,7 @@
26 <header>
27 <h2>Getting Started</h2>
28 <div class="block-wrap">
29- <p>Pick from CSS, <a href="https://postcss.org/">PostCSS</a>, or props as Javascript.</p>
30+ <p>Pick from CSS, <a href="https://postcss.org/">PostCSS</a>, JSON, or props as Javascript.</p>
31 <blockquote class="icon-quote indigo">
32 <svg viewBox="0 0 24 24">
33 <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" />
34 @@ -651,6 +651,21 @@
35 </div>
36 </details>
37
38+ <details class="started-details" id="design-tokens">
39+ <summary>Design Tokens</summary>
40+ <div>
41+ <div class="block-wrap">
42+ <div>
43+ <h6>as JSON</h6>
44+ <p>Follows the <a href="https://design-tokens.github.io/community-group/format/">design tokens spec</a>.</p>
45+ <pre class="language-js"><code>
46+ import "https://unpkg.com/open-props/open-props.tokens.json"
47+ </code></pre>
48+ </div>
49+ </div>
50+ </div>
51+ </details>
52+
53 <h5 id="jitprops">PostCSS JIT Props</h5>
54 <p>Only ship the props you use. <a href="https://github.com/GoogleChromeLabs/postcss-jit-props">Learn more</a>.</p>
55
56 @@ -756,6 +771,20 @@
57 </div>
58 </div>
59 </details>
60+
61+ <details class="started-details">
62+ <summary>Design Tokens</summary>
63+ <div>
64+ <div class="block-wrap">
65+ <pre class="language-js"><code>
66+ /* 3 ways to import */
67+ import 'open-props/tokens'
68+ import 'open-props/json'
69+ import 'open-props/design-tokens'
70+ </code></pre>
71+ </div>
72+ </div>
73+ </details>
74 </div>
75 </div>
76 </article>
77 diff --git a/package.json b/package.json
78index e871601..4b1d75a 100644
79--- a/package.json
80+++ b/package.json
81 @@ -3,7 +3,7 @@
82 "name": "open-props",
83 "author": "Adam Argyle",
84 "license": "MIT",
85- "version": "1.0.11",
86+ "version": "1.0.12",
87 "repository": {
88 "type": "git",
89 "url": "https://github.com/argyleink/open-props"
90 @@ -53,7 +53,10 @@
91 "./teal": "./teal.min.css",
92 "./violet": "./violet.min.css",
93 "./yellow": "./yellow.min.css",
94- "./zindex": "./zindex.min.css"
95+ "./zindex": "./zindex.min.css",
96+ "./json": "./open-props.tokens.json",
97+ "./tokens": "./open-props.tokens.json",
98+ "./design-tokens": "./open-props.tokens.json"
99 },
100 "browserslist": [
101 "defaults"
102 diff --git a/readme.md b/readme.md
103index c90f65e..3a818e0 100644
104--- a/readme.md
105+++ b/readme.md
106 @@ -17,6 +17,7 @@
107
108 #### CDN
109 - [https://unpkg.com/open-props](https://unpkg.com/open-props)
110+ - [https://unpkg.com/open-props/open-props.tokens.json](https://unpkg.com/open-props/open-props.tokens.json)
111
112 #### CLI
113 - `npm run gen:op` - runs through `src/` js files and creates the PostCSS files in `src/`
114 diff --git a/src/_create-props.js b/src/_create-props.js
115index b8312b8..34b01e9 100644
116--- a/src/_create-props.js
117+++ b/src/_create-props.js
118 @@ -45,6 +45,26 @@ const individual_colors = {
119 'props.orange.css': OpenColors.Orange,
120 }
121
122+ const jsonbundle = {
123+ ...Object.values(individual_colors).reduce((colors, color) => {
124+ return Object.assign(colors, color)
125+ }, {}),
126+ ...Sizes,
127+ ...Easings,
128+ ...Zindex,
129+ ...Aspects,
130+ ...Gradients,
131+ ...Borders,
132+ }
133+ const designtokens = Object.entries(jsonbundle).map(([key, token]) => {
134+ return [key, {
135+ value: token
136+ }]
137+ })
138+
139+ const JSONtokens = fs.createWriteStream('../open-props.tokens.json')
140+ JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2))
141+
142 const buildPropsStylesheet = ({filename, props}) => {
143 const file = fs.createWriteStream(filename)
144
145 @@ -77,7 +97,7 @@ const buildPropsStylesheet = ({filename, props}) => {
146 file.end(appendedMeta)
147 }
148
149- // gen prop stylesheets
150+ // gen prop variants
151 Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => {
152 buildPropsStylesheet({filename, props})
153 })
154 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
155index f3fc3d7..62f4ded 100644
156--- a/test/basic.test.cjs
157+++ b/test/basic.test.cjs
158 @@ -1,5 +1,6 @@
159 const test = require('ava')
160 const OpenProps = require('../dist/open-props.cjs')
161+ const OPtokens = require('../open-props.tokens.json')
162
163 test('Should have an all included import', t => {
164 t.is(Object.keys(OpenProps).length, 351)
165 @@ -15,4 +16,9 @@ test('Import should have sizes', async t => {
166
167 test('Import should have colors', async t => {
168 t.assert(Object.keys(OpenProps).includes('--orange-0'))
169+ })
170+
171+ test('JSON Import should have colors', async t => {
172+ t.is(Object.keys(OPtokens).length, 274)
173+ t.assert(Object.keys(OPtokens).includes('--orange-0'))
174 })
175\ No newline at end of file