From d0fee82d2d9e2677d1d3057a4dafb650dbc824dc Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Mon, 6 Dec 2021 20:42:02 -0800 Subject: [PATCH] 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 --- .github/workflows/tests.yml | 1 + docsite/index.html | 33 +++++++++++++++++++++++++++++++-- package.json | 7 +++++-- readme.md | 1 + src/_create-props.js | 22 +++++++++++++++++++++- test/basic.test.cjs | 6 ++++++ 6 files changed, 65 insertions(+), 5 deletions(-) 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 diff --git a/docsite/index.html b/docsite/index.html index 1337e10e..cf9b729b 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@

CSS variables.

- v1.0.8 + v1.0.12

Getting Started

-

Pick from CSS, PostCSS, or props as Javascript.

+

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

@@ -651,6 +651,21 @@
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 e8716010..4b1d75a6 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" @@ -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 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/` diff --git a/src/_create-props.js b/src/_create-props.js index b8312b86..34b01e9f 100644 --- 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 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