From 50b53bcaec1c6694d6188687c3913b030a1292e7 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 3 Dec 2021 20:55:48 -0800 Subject: [PATCH 1/8] prototype loop for building json --- src/_create-props.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/_create-props.js b/src/_create-props.js index b8312b86..3c9512c9 100644 --- a/src/_create-props.js +++ b/src/_create-props.js @@ -45,6 +45,20 @@ const individual_colors = { 'props.orange.css': OpenColors.Orange, } +const buildPropsJSON = ({filename,props}) => { + const type = filename.split('.')[1] + const file = fs.createWriteStream(`${type}.json`) + file.write(`{\n`) + file.write(` "${type}": {\n`) + + Object.entries(props).forEach(([prop, val]) => { + file.write(` "${prop}": { "value": "${val}" },\n`) + }) + + file.write(' }\n') + file.end('}') +} + const buildPropsStylesheet = ({filename, props}) => { const file = fs.createWriteStream(filename) @@ -77,9 +91,10 @@ const buildPropsStylesheet = ({filename, props}) => { file.end(appendedMeta) } -// gen prop stylesheets +// gen prop variants Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => { buildPropsStylesheet({filename, props}) + buildPropsJSON({filename, props}) }) // gen index.css From 5cf9d366a4ce19f3c1803bae7d54314ee1fdeff2 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 3 Dec 2021 21:13:43 -0800 Subject: [PATCH 2/8] fixes trailing comma --- src/_create-props.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/_create-props.js b/src/_create-props.js index 3c9512c9..41e95a0a 100644 --- a/src/_create-props.js +++ b/src/_create-props.js @@ -48,14 +48,17 @@ const individual_colors = { const buildPropsJSON = ({filename,props}) => { const type = filename.split('.')[1] const file = fs.createWriteStream(`${type}.json`) + file.write(`{\n`) file.write(` "${type}": {\n`) - Object.entries(props).forEach(([prop, val]) => { - file.write(` "${prop}": { "value": "${val}" },\n`) + const entries = Object.entries(props).map(([prop, val]) => { + return ` "${prop}": { "value": "${val}" }` }) - file.write(' }\n') + file.write(entries.join(',\n')) + + file.write('\n }\n') file.end('}') } From 04db6ed44e87413eb821ce9405d68c7134617e74 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 3 Dec 2021 21:17:19 -0800 Subject: [PATCH 3/8] indicate which we want as json --- src/_create-props.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/_create-props.js b/src/_create-props.js index 41e95a0a..0ceb72e8 100644 --- a/src/_create-props.js +++ b/src/_create-props.js @@ -45,6 +45,16 @@ const individual_colors = { 'props.orange.css': OpenColors.Orange, } +const jsonbundle = { + ...individual_colors, + 'props.sizes.css': Sizes, + 'props.easing.css': Easings, + 'props.zindex.css': Zindex, + 'props.aspects.css': Aspects, + 'props.gradients.css': Gradients, + 'props.borders.css': Borders, +} + const buildPropsJSON = ({filename,props}) => { const type = filename.split('.')[1] const file = fs.createWriteStream(`${type}.json`) @@ -97,6 +107,9 @@ const buildPropsStylesheet = ({filename, props}) => { // gen prop variants Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => { buildPropsStylesheet({filename, props}) +}) + +Object.entries(jsonbundle).forEach(([filename, props]) => { buildPropsJSON({filename, props}) }) From e8bac5b88cccf9799c2623f21bf1787dd3d8abc6 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Sun, 5 Dec 2021 23:02:44 -0800 Subject: [PATCH 4/8] match token spec, output single file, add npm export --- package.json | 3 ++- src/_create-props.js | 43 ++++++++++++++++--------------------------- test/basic.test.cjs | 6 ++++++ 3 files changed, 24 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index e8716010..d23037d2 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "./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" }, "browserslist": [ "defaults" diff --git a/src/_create-props.js b/src/_create-props.js index 0ceb72e8..34b01e9f 100644 --- a/src/_create-props.js +++ b/src/_create-props.js @@ -46,31 +46,24 @@ const individual_colors = { } const jsonbundle = { - ...individual_colors, - 'props.sizes.css': Sizes, - 'props.easing.css': Easings, - 'props.zindex.css': Zindex, - 'props.aspects.css': Aspects, - 'props.gradients.css': Gradients, - 'props.borders.css': Borders, + ...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 buildPropsJSON = ({filename,props}) => { - const type = filename.split('.')[1] - const file = fs.createWriteStream(`${type}.json`) - - file.write(`{\n`) - file.write(` "${type}": {\n`) - - const entries = Object.entries(props).map(([prop, val]) => { - return ` "${prop}": { "value": "${val}" }` - }) - - file.write(entries.join(',\n')) - - file.write('\n }\n') - file.end('}') -} +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) @@ -109,10 +102,6 @@ Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props] buildPropsStylesheet({filename, props}) }) -Object.entries(jsonbundle).forEach(([filename, props]) => { - buildPropsJSON({filename, props}) -}) - // gen index.css const entry = fs.createWriteStream('index.css') entry.write(`@import 'props.media.css'; diff --git a/test/basic.test.cjs b/test/basic.test.cjs index f3fc3d7c..62f4ded2 100644 --- 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')) }) \ No newline at end of file From 43218673a54b31e6dcaa831c66243e52b18dd036 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Sun, 5 Dec 2021 23:05:40 -0800 Subject: [PATCH 5/8] update test workflow to gen json --- .github/workflows/tests.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 92c570c1..df23aea9 100644 --- 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 From c2ca7a50c483440d0bf054a5d16a938e2c0769b5 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Sun, 5 Dec 2021 23:11:02 -0800 Subject: [PATCH 6/8] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d23037d2..ee68abf3 100644 --- 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" From da70a620a7d14fad4f548592156430f10a7faad5 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Mon, 6 Dec 2021 20:39:12 -0800 Subject: [PATCH 7/8] adds docsite info for json design tokens --- docsite/index.html | 31 ++++++++++++++++++++++++++++++- package.json | 4 +++- readme.md | 1 + 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index 1337e10e..0c8b00b2 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@

CSS variables.

- v1.0.8 + v1.0.12
Individual packs
+
+ Design Tokens +
+
+
+
as JSON
+

Follows the design tokens spec.

+ 

+                    import "https://unpkg.com/open-props/open-props.tokens.json"
+
+
+
+
+
+
PostCSS JIT Props

Only ship the props you use. Learn more.

@@ -756,6 +771,20 @@
Entry points
+ +
+ Design Tokens +
+
+ 

+                  /* 3 ways to import */
+                  import 'open-props/tokens'
+                  import 'open-props/json'
+                  import 'open-props/design-tokens'
+
+
+
+
diff --git a/package.json b/package.json index ee68abf3..4b1d75a6 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,9 @@ "./violet": "./violet.min.css", "./yellow": "./yellow.min.css", "./zindex": "./zindex.min.css", - "./json": "./open-props.tokens.json" + "./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 index c90f65e6..3a818e05 100644 --- 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/` From b3b99033c42612b2d2da64da637a3dc977ebd6a4 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Mon, 6 Dec 2021 20:40:52 -0800 Subject: [PATCH 8/8] mention json as an option --- docsite/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docsite/index.html b/docsite/index.html index 0c8b00b2..cf9b729b 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -570,7 +570,7 @@

Getting Started

-

Pick from CSS, PostCSS, or props as Javascript.

+

Pick from CSS, PostCSS, JSON, or props as Javascript.