Commit
Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Fri, 01 Jul 2022 04:46:09 +0000
Hash: bec71db092328cacede355588df22d3f15e9cb56
Timestamp: Fri, 01 Jul 2022 04:46:09 +0000 (2 years ago)

+338 -163 +/-6 browse
Shadow DOM builds (#241) 
Shadow DOM builds (#241)

* adds filename prefix and custom subject

* fixes #240

* adds test, fixes some missing build files

* test runner fix and test checks src instead of build file

* fixes selector not wrapped in `:where()`

* update docs

* don't wrap :host scoped props in :where()

* remove exports that point to nothing

* document :host web component usage

* fixes shadow src file have duplicate prefixes

* finishes documenting shadow paths
1diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
2index df23aea..c1bbc7c 100644
3--- a/.github/workflows/tests.yml
4+++ b/.github/workflows/tests.yml
5 @@ -9,6 +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 build
11 - run: npm run lib:js
12 - run: npm test
13 diff --git a/build/props.js b/build/props.js
14index 3dffb3b..7d4c648 100644
15--- a/build/props.js
16+++ b/build/props.js
17 @@ -17,54 +17,56 @@ import {buildPropsStylesheet} from './to-stylesheet.js'
18 import {toTokens} from './to-tokens.js'
19 import {toFigmaTokens} from './to-figmatokens.js'
20
21- const [,,prefix='',useWhere] = process.argv
22+ const [,,prefix='',useWhere,customSubject='',filePrefix=''] = process.argv
23
24- const selector = useWhere === 'true' ? ':where(html)' : 'html'
25+ const subject = customSubject === '' ? 'html' : customSubject
26+ const selector = useWhere === 'true' ? `:where(${subject})` : subject
27+ const pfx = filePrefix ? filePrefix + '.' : ''
28
29 const mainbundle = {
30- 'props.fonts.css': Fonts,
31- 'props.sizes.css': Sizes,
32- 'props.easing.css': Easings,
33- 'props.zindex.css': Zindex,
34- 'props.shadows.css': Shadows,
35- 'props.aspects.css': Aspects,
36- 'props.colors.css': OpenColors.default,
37- // 'props.svg.css': SVG,
38- 'props.gradients.css': Gradients,
39- 'props.animations.css': Animations,
40- 'props.borders.css': Borders,
41+ [`${pfx}props.fonts.css`]: Fonts,
42+ [`${pfx}props.sizes.css`]: Sizes,
43+ [`${pfx}props.easing.css`]: Easings,
44+ [`${pfx}props.zindex.css`]: Zindex,
45+ [`${pfx}props.shadows.css`]: Shadows,
46+ [`${pfx}props.aspects.css`]: Aspects,
47+ [`${pfx}props.colors.css`]: OpenColors.default,
48+ // [`${pfx}props.svg.css`]: SVG,
49+ [`${pfx}props.gradients.css`]: Gradients,
50+ [`${pfx}props.animations.css`]: Animations,
51+ [`${pfx}props.borders.css`]: Borders,
52 }
53
54 const individual_colors = {
55- 'props.gray.css': OpenColors.Gray,
56- 'props.red.css': OpenColors.Red,
57- 'props.pink.css': OpenColors.Pink,
58- 'props.grape.css': OpenColors.Grape,
59- 'props.violet.css': OpenColors.Violet,
60- 'props.indigo.css': OpenColors.Indigo,
61- 'props.blue.css': OpenColors.Blue,
62- 'props.cyan.css': OpenColors.Cyan,
63- 'props.teal.css': OpenColors.Teal,
64- 'props.green.css': OpenColors.Green,
65- 'props.lime.css': OpenColors.Lime,
66- 'props.yellow.css': OpenColors.Yellow,
67- 'props.orange.css': OpenColors.Orange,
68+ [`${pfx}props.gray.css`]: OpenColors.Gray,
69+ [`${pfx}props.red.css`]: OpenColors.Red,
70+ [`${pfx}props.pink.css`]: OpenColors.Pink,
71+ [`${pfx}props.grape.css`]: OpenColors.Grape,
72+ [`${pfx}props.violet.css`]: OpenColors.Violet,
73+ [`${pfx}props.indigo.css`]: OpenColors.Indigo,
74+ [`${pfx}props.blue.css`]: OpenColors.Blue,
75+ [`${pfx}props.cyan.css`]: OpenColors.Cyan,
76+ [`${pfx}props.teal.css`]: OpenColors.Teal,
77+ [`${pfx}props.green.css`]: OpenColors.Green,
78+ [`${pfx}props.lime.css`]: OpenColors.Lime,
79+ [`${pfx}props.yellow.css`]: OpenColors.Yellow,
80+ [`${pfx}props.orange.css`]: OpenColors.Orange,
81 }
82
83 const individual_colors_hsl = {
84- 'props.gray-hsl.css': ColorsHSL.Gray,
85- 'props.red-hsl.css': ColorsHSL.Red,
86- 'props.pink-hsl.css': ColorsHSL.Pink,
87- 'props.grape-hsl.css': ColorsHSL.Grape,
88- 'props.violet-hsl.css': ColorsHSL.Violet,
89- 'props.indigo-hsl.css': ColorsHSL.Indigo,
90- 'props.blue-hsl.css': ColorsHSL.Blue,
91- 'props.cyan-hsl.css': ColorsHSL.Cyan,
92- 'props.teal-hsl.css': ColorsHSL.Teal,
93- 'props.green-hsl.css': ColorsHSL.Green,
94- 'props.lime-hsl.css': ColorsHSL.Lime,
95- 'props.yellow-hsl.css': ColorsHSL.Yellow,
96- 'props.orange-hsl.css': ColorsHSL.Orange,
97+ [`${pfx}props.gray-hsl.css`]: ColorsHSL.Gray,
98+ [`${pfx}props.red-hsl.css`]: ColorsHSL.Red,
99+ [`${pfx}props.pink-hsl.css`]: ColorsHSL.Pink,
100+ [`${pfx}props.grape-hsl.css`]: ColorsHSL.Grape,
101+ [`${pfx}props.violet-hsl.css`]: ColorsHSL.Violet,
102+ [`${pfx}props.indigo-hsl.css`]: ColorsHSL.Indigo,
103+ [`${pfx}props.blue-hsl.css`]: ColorsHSL.Blue,
104+ [`${pfx}props.cyan-hsl.css`]: ColorsHSL.Cyan,
105+ [`${pfx}props.teal-hsl.css`]: ColorsHSL.Teal,
106+ [`${pfx}props.green-hsl.css`]: ColorsHSL.Green,
107+ [`${pfx}props.lime-hsl.css`]: ColorsHSL.Lime,
108+ [`${pfx}props.yellow-hsl.css`]: ColorsHSL.Yellow,
109+ [`${pfx}props.orange-hsl.css`]: ColorsHSL.Orange,
110 }
111
112 // gen design tokens
113 @@ -98,13 +100,13 @@ Object.entries({...mainbundle, ...individual_colors, ...individual_colors_hsl}).
114
115 // gen color hsl main file
116 buildPropsStylesheet({
117- filename: 'props.colors-hsl.css',
118+ filename: pfx + 'props.colors-hsl.css',
119 props: ColorsHSL.default},
120 {selector, prefix}
121 )
122
123 // gen index.css
124- const entry = fs.createWriteStream('../src/index.css')
125+ const entry = fs.createWriteStream(`../src/${pfx}index.css`)
126 entry.write(`@import 'props.media.css';
127 `)
128 Object.keys(mainbundle).forEach(filename => {
129 diff --git a/docsite/index.html b/docsite/index.html
130index 610b34d..b34e33e 100644
131--- a/docsite/index.html
132+++ b/docsite/index.html
133 @@ -119,7 +119,7 @@
134 </li>
135 </ul>
136 <small>
137- v1.3.16
138+ v1.4.0
139 <span class="license">
140 <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
141 <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>
142 @@ -354,38 +354,39 @@
143 351 props
144 </div>
145 </div>
146-
147+ </dd>
148+ <dt>Extras</dt>
149+ <dd class="size-chart" style="row-gap: var(--size-3)">
150 <div class="size"><strong>1.3</strong>kB</div>
151 <div class="file">
152- <a href="https://unpkg.com/open-props/normalize.min.css">normalize.min.css</a> <a href="https://codepen.io/argyleink/pen/KKvRORE"><small class="green-badge">demo</small></a>
153+ <a href="https://unpkg.com/open-props/normalize.min.css">normalize.min.css</a> <a
154+ href="https://codepen.io/argyleink/pen/KKvRORE"><small class="green-badge">demo</small></a>
155 <div class="child-ref">
156 <svg viewBox="0 0 24 24">
157- <use href="#bent-arrow"/>
158+ <use href="#bent-arrow" />
159 </svg>
160 <a href="https://github.com/argyleink/open-props/blob/main/src/extra/brand.css">brand.css</a>
161 </div>
162 <div class="child-ref">
163 <svg viewBox="0 0 24 24">
164- <use href="#bent-arrow"/>
165+ <use href="#bent-arrow" />
166 </svg>
167 <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.css">theme.css</a>
168 </div>
169 <div class="child-ref">
170 <svg viewBox="0 0 24 24">
171- <use href="#bent-arrow"/>
172+ <use href="#bent-arrow" />
173 </svg>
174 <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">theme.light.css</a>
175 </div>
176 <div class="child-ref">
177 <svg viewBox="0 0 24 24">
178- <use href="#bent-arrow"/>
179+ <use href="#bent-arrow" />
180 </svg>
181- <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">theme.dark.css</a>
182+ <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">theme.dark.css</a>
183 </div>
184 </div>
185- </dd>
186- <dt>Extras</dt>
187- <dd class="size-chart" style="row-gap: var(--size-3)">
188+
189 <div class="size"><strong>0.81</strong>kB</div>
190 <div class="file">
191 <a href="https://unpkg.com/open-props/buttons.min.css">buttons.min.css</a> <a href="https://codepen.io/argyleink/pen/gOXbvjj"><small class="green-badge">demo</small></a>
192 @@ -669,80 +670,98 @@
193 <div class="contain-pre">
194 <header>
195 <h4>CDN</h4>
196- <p>No installation required. <a href="https://unpkg.com/browse/open-props@latest/">View all.</a></p>
197+ <p>No installation required.</p>
198+ <p><a href="https://unpkg.com/browse/open-props@latest/">View all ↗</a></p>
199 </header>
200
201 <details class="started-details">
202 <summary>CSS</summary>
203- <div>
204- <h6>Bundles</h6>
205- <div class="block-wrap">
206- <pre class="language-css"><code>
207- /* index.css */
208- @import "https://unpkg.com/open-props";
209- @import "https://unpkg.com/open-props/normalize.min.css";
210- </code></pre>
211-
212- <pre class="language-html"><code>
213- &#60;!-- index.html --&#62;
214- &#60;link rel="stylesheet" href="https://unpkg.com/open-props"/&#62;
215- &#60;link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/&#62;
216- </code></pre>
217
218- <pre class="language-js"><code>
219- // index.js
220- import 'https://unpkg.com/open-props';
221- import 'https://unpkg.com/open-props/normalize.min.css';
222- </code></pre>
223- </div>
224-
225- <h6>Individual packs</h6>
226+ <div>
227+ <h6>index.css</h6>
228 <pre class="language-css"><code>
229- /* index.css */
230- @import "https://unpkg.com/open-props/colors.min.css";
231- @import "https://unpkg.com/open-props/colors-hsl.min.css";
232+ /* the props */
233+ @import "https://unpkg.com/open-props";
234+
235+ /* optional imports that use the props */
236+ @import "https://unpkg.com/open-props/normalize.min.css";
237+ @import "https://unpkg.com/open-props/buttons.min.css";
238
239+ /* individual imports */
240 @import "https://unpkg.com/open-props/indigo.min.css";
241 @import "https://unpkg.com/open-props/indigo-hsl.min.css";
242-
243 @import "https://unpkg.com/open-props/easings.min.css";
244 @import "https://unpkg.com/open-props/animations.min.css";
245-
246 @import "https://unpkg.com/open-props/sizes.min.css";
247 @import "https://unpkg.com/open-props/gradients.min.css";
248- /* etc */
249+ /* see PropPacks for the full list */
250 </code></pre>
251 </div>
252- </details>
253-
254- <details class="started-details">
255- <summary>PostCSS</summary>
256
257 <div>
258- <h6>Entry Points</h6>
259- <pre class="language-css"><code>
260- /* index.pcss */
261- @import "https://unpkg.com/open-props/src/index.css";
262- @import "https://unpkg.com/open-props/src/extra/normalize.css";
263+ <h6>index.html</h6>
264+ <pre class="language-html"><code>
265+ &#60;!-- the props --&#62;
266+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props"/&#62;
267+
268+ &#60;!-- optional imports that use the props --&#62;
269+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/&#62;
270+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/buttons.min.css"/&#62;
271+
272+ &#60;!-- individual imports --&#62;
273+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/indigo.min.css"/&#62;
274+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/indigo-hsl.min.css"/&#62;
275+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/easings.min.css"/&#62;
276+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/animations.min.css"/&#62;
277+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/sizes.min.css"/&#62;
278+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/gradients.min.css"/&#62;
279+ &#60;!-- see PropPacks for the full list --&#62;
280 </code></pre>
281 </div>
282
283 <div>
284- <h6>Individual packs</h6>
285- <pre class="language-css"><code>
286- /* index.pcss */
287- @import "https://unpkg.com/open-props/src/props.colors.css";
288- @import "https://unpkg.com/open-props/src/props.colors-hsl.css";
289+ <h6>index.js</h6>
290+ <pre class="language-js"><code>
291+ // the props
292+ import 'https://unpkg.com/open-props';
293+
294+ // optional imports that use the props
295+ import 'https://unpkg.com/open-props/normalize.min.css';
296+ import 'https://unpkg.com/open-props/buttons.min.css';
297+
298+ // individual imports
299+ import 'https://unpkg.com/open-props/indigo.min.css';
300+ import 'https://unpkg.com/open-props/indigo-hsl.min.css';
301+ import 'https://unpkg.com/open-props/easings.min.css';
302+ import 'https://unpkg.com/open-props/animations.min.css';
303+ import 'https://unpkg.com/open-props/sizes.min.css';
304+ import 'https://unpkg.com/open-props/gradients.min.css';
305+ // see PropPacks for the full list
306+ </code></pre>
307+ </div>
308+ </details>
309
310- @import "https://unpkg.com/open-props/src/props.indigo.css";
311- @import "https://unpkg.com/open-props/src/props.indigo-hsl.css";
312+ <details class="started-details">
313+ <summary>PostCSS</summary>
314
315- @import "https://unpkg.com/open-props/src/props.easings.css";
316- @import "https://unpkg.com/open-props/src/props.animations.css";
317+ <div>
318+ <h6>CSS import examples</h6>
319+ <pre class="language-css"><code>
320+ /* the props */
321+ @import "https://unpkg.com/open-props/src/index.css";
322
323- @import "https://unpkg.com/open-props/src/props.sizes.css";
324- @import "https://unpkg.com/open-props/src/props.gradients.css";
325- /* etc */
326+ /* optional imports that use the props */
327+ @import "https://unpkg.com/open-props/src/extra/normalize.css";
328+ @import "https://unpkg.com/open-props/src/extra/buttons.css";
329+
330+ /* individual imports */
331+ @import "https://unpkg.com/open-props/src/indigo.min.css";
332+ @import "https://unpkg.com/open-props/src/indigo-hsl.min.css";
333+ @import "https://unpkg.com/open-props/src/easings.min.css";
334+ @import "https://unpkg.com/open-props/src/animations.min.css";
335+ @import "https://unpkg.com/open-props/src/sizes.min.css";
336+ @import "https://unpkg.com/open-props/src/gradients.min.css";
337+ /* see PropPacks for the full list */
338 </code></pre>
339 </div>
340 </details>
341 @@ -771,6 +790,46 @@
342 </div>
343 </div>
344 </details>
345+
346+ <details class="started-details">
347+ <summary>Web Components</summary>
348+
349+ <div>
350+ <h6>NPM import examples</h6>
351+ <pre class="language-css"><code>
352+ /* the props */
353+ @import "open-props/shadow/style";
354+ @import "open-props/open-props.shadow.min.css";
355+
356+ /* individual imports */
357+ @import "open-props/shadow/indigo";
358+ @import "open-props/shadow/indigo-hsl";
359+ @import "open-props/shadow/easings";
360+ @import "open-props/shadow/animations";
361+ @import "open-props/shadow/sizes";
362+ @import "open-props/shadow/gradients";
363+ /* see PropPacks for the full list */
364+ </code></pre>
365+ </div>
366+
367+ <div>
368+ <h6>CDN import examples</h6>
369+ <p>These props are scoped to <b>:host</b> for use in shadow DOM.</p>
370+ <pre class="language-css"><code>
371+ /* the props */
372+ @import "https://unpkg.com/open-props/open-props.shadow.min.css";
373+
374+ /* individual imports */
375+ @import "https://unpkg.com/open-props/indigo.shadow.min.css";
376+ @import "https://unpkg.com/open-props/indigo.shadow-hsl.min.css";
377+ @import "https://unpkg.com/open-props/easings.shadow.min.css";
378+ @import "https://unpkg.com/open-props/animations.shadow.min.css";
379+ @import "https://unpkg.com/open-props/sizes.shadow.min.css";
380+ @import "https://unpkg.com/open-props/gradients.shadow.min.css";
381+ /* see PropPacks for the full list */
382+ </code></pre>
383+ </div>
384+ </details>
385 </div>
386
387 <div class="contain-pre" id="npm">
388 @@ -780,57 +839,45 @@
389 <details class="started-details">
390 <summary>CSS</summary>
391 <div>
392- <br>
393- <p><a href="https://stackblitz.com/edit/jit-open-props?file=index.css">Try in browser!</a></p>
394- <h6>Bundles</h6>
395+ <h6>CSS Imports</h6>
396 <div class="block-wrap">
397 <pre class="language-css"><code>
398- /* index.css */
399+ /* the props */
400 @import "open-props/style";
401- @import "open-props/normalize";
402- </code></pre>
403
404- <pre class="language-js"><code>
405- // index.js loading CSS files
406- import 'open-props/style';
407- import 'open-props/normalize';
408- </code></pre>
409- </div>
410- </div>
411-
412- <div>
413- <h6>Individual packs</h6>
414- <div class="block-wrap">
415- <pre class="language-css"><code>
416- /* index.pcss */
417- @import "open-props/colors";
418- @import "open-props/colors-hsl";
419+ /* optional imports that use the props */
420+ @import "open-props/normalize";
421+ @import "open-props/buttons";
422
423+ /* individual imports */
424 @import "open-props/indigo";
425- @import "open-props/indigo-hsl";
426-
427 @import "open-props/easings";
428 @import "open-props/animations";
429-
430 @import "open-props/sizes";
431 @import "open-props/gradients";
432- /* etc */
433+ /* see PropPacks for the full list */
434 </code></pre>
435+ </div>
436+ </div>
437
438- <pre class="language-js"><code>
439- // index.js
440- import 'open-props/colors';
441- import 'open-props/colors-hsl';
442-
443- import 'open-props/indigo';
444- import 'open-props/indigo-hsl';
445-
446- import 'open-props/easings';
447- import 'open-props/animations';
448-
449- import 'open-props/sizes';
450- import 'open-props/gradients';
451- /* etc */
452+ <div>
453+ <h6>Full Path Imports</h6>
454+ <div class="block-wrap">
455+ <pre class="language-css"><code>
456+ /* the props */
457+ @import "open-props/open-props.min.css";
458+
459+ /* optional imports that use the props */
460+ @import "open-props/normalize.min.css";
461+ @import "open-props/buttons.min.css";
462+
463+ /* individual imports */
464+ @import "open-props/indigo.min.css";
465+ @import "open-props/easings.min.css";
466+ @import "open-props/animations.min.css";
467+ @import "open-props/sizes.min.css";
468+ @import "open-props/gradients.min.css";
469+ /* see PropPacks for the full list */
470 </code></pre>
471 </div>
472 </div>
473 @@ -838,17 +885,45 @@
474
475 <details class="started-details">
476 <summary>PostCSS</summary>
477- <div class="block-wrap">
478- <div>
479- <h6>Entry points</h6>
480- <pre class="language-css"><code>
481- /* index.pcss */
482- @import "open-props/postcss/style";
483- @import "open-props/postcss/normalize";
484- </code></pre>
485- <br>
486- <p>The PostCSS normalize <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.css#L1">comes with</a> the Custom Media props</p>
487- </div>
488+
489+ <div>
490+ <h6>CSS Imports</h6>
491+ <pre class="language-css"><code>
492+ /* the props */
493+ @import "open-props/postcss/style";
494+
495+ /* optional imports that use the props */
496+ @import "open-props/postcss/normalize";
497+ @import "open-props/postcss/buttons";
498+
499+ /* individual imports */
500+ @import "open-props/postcss/indigo";
501+ @import "open-props/postcss/easings";
502+ @import "open-props/postcss/animations";
503+ @import "open-props/postcss/sizes";
504+ @import "open-props/postcss/gradients";
505+ /* see PropPacks for the full list */
506+ </code></pre>
507+ </div>
508+
509+ <div>
510+ <h6>Full Path CSS Imports</h6>
511+ <pre class="language-css"><code>
512+ /* the props */
513+ @import "open-props/postcss/index.css";
514+
515+ /* optional imports that use the props */
516+ @import "open-props/postcss/extra/normalize.css";
517+ @import "open-props/postcss/extra/buttons.css";
518+
519+ /* individual imports */
520+ @import "open-props/postcss/indigo.min.css";
521+ @import "open-props/postcss/easings.min.css";
522+ @import "open-props/postcss/animations.min.css";
523+ @import "open-props/postcss/sizes.min.css";
524+ @import "open-props/postcss/gradients.min.css";
525+ /* see PropPacks for the full list */
526+ </code></pre>
527 </div>
528 </details>
529
530 @@ -885,6 +960,7 @@
531
532 // import the gradients
533 import Gradients from 'open-props/src/gradients';
534+ // see PropPacks for the full list
535 </code></pre>
536 </div>
537 </div>
538 @@ -963,17 +1039,28 @@
539 <h6>Customize Bundles</h6>
540 <p></p>
541 <pre class="language-js"><code>
542- npm run gen:nowhere // bundle without `:where()`
543- npm run gen:prefixed // each prop prefixed with `op`, like `--op-font-size-1`
544- node _create-props.js 'my-prefix' // each prop with your own prefix
545+ // bulid src files
546+ npm run gen:shadowdom // src files with `:host` instead of `html`
547+ npm run gen:nowhere // src files without `:where()`
548+ npm run gen:prefixed // each prop prefixed with `op`, like `--op-font-size-1`
549+
550+ // full custom! pass args with node to the props.js script
551+ node props.js 'ns' true ':root' 'my'
552+ ⇣
553+ // arg1: default '', is a custom namespace, props will be --ns-gray-1
554+ // arg2: default false, indicates wrapping in :where() or not
555+ // arg3: default '', set a custom selector like :scope, .my-class, etc
556+ // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
557 </code></pre>
558 </div>
559 <div>
560 <h6>Build Locally</h6>
561 <pre class="language-js"><code>
562- npm run gen:op // runs through `src/` js files and creates the PostCSS files in `src/`
563- npm run bundle // creates all the various minified bundles of props
564- npm run lib:js // builds the JS modules for NPM
565+ npm run gen:op // runs through `src/` js files and creates the PostCSS files in `src/`
566+ npm run gen:shadowdom // runs through `src/` js files and creates the PostCSS files in `src/`
567+ npm run build // does both gen:op and gen:shadowdom
568+ npm run bundle // creates all the various minified bundles of props
569+ npm run lib:js // builds the JS modules for NPM
570 </code></pre>
571 </div>
572 </div>
573 diff --git a/package.json b/package.json
574index f33c7ac..c60c2a6 100644
575--- a/package.json
576+++ b/package.json
577 @@ -3,7 +3,7 @@
578 "name": "open-props",
579 "author": "Adam Argyle",
580 "license": "MIT",
581- "version": "1.3.16",
582+ "version": "1.4.0",
583 "repository": {
584 "type": "git",
585 "url": "https://github.com/argyleink/open-props"
586 @@ -82,6 +82,45 @@
587 "./yellow": "./yellow.min.css",
588 "./yellow-hsl": "./yellow-hsl.min.css",
589 "./zindex": "./zindex.min.css",
590+ "./shadow/style": "./open-props.shadow.min.css",
591+ "./shadow/animations": "./animations.shadow.min.css",
592+ "./shadow/aspects": "./aspects.shadow.min.css",
593+ "./shadow/blue": "./blue.shadow.min.css",
594+ "./shadow/blue-hsl": "./blue-hsl.shadow.min.css",
595+ "./shadow/borders": "./borders.shadow.min.css",
596+ "./shadow/colors": "./colors.shadow.min.css",
597+ "./shadow/colors-hsl": "./colors-hsl.shadow.min.css",
598+ "./shadow/cyan": "./cyan.shadow.min.css",
599+ "./shadow/cyan-hsl": "./cyan-hsl.shadow.min.css",
600+ "./shadow/easings": "./easings.shadow.min.css",
601+ "./shadow/fonts": "./fonts.shadow.min.css",
602+ "./shadow/gradients": "./gradients.shadow.min.css",
603+ "./shadow/grape": "./grape.shadow.min.css",
604+ "./shadow/grape-hsl": "./grape-hsl.shadow.min.css",
605+ "./shadow/gray": "./gray.shadow.min.css",
606+ "./shadow/gray-hsl": "./gray-hsl.shadow.min.css",
607+ "./shadow/green": "./green.shadow.min.css",
608+ "./shadow/green-hsl": "./green-hsl.shadow.min.css",
609+ "./shadow/indigo": "./indigo.shadow.min.css",
610+ "./shadow/indigo-hsl": "./indigo-hsl.shadow.min.css",
611+ "./shadow/lime": "./lime.shadow.min.css",
612+ "./shadow/lime-hsl": "./lime-hsl.shadow.min.css",
613+ "./shadow/media": "./media.shadow.min.css",
614+ "./shadow/orange": "./orange.shadow.min.css",
615+ "./shadow/orange-hsl": "./orange-hsl.shadow.min.css",
616+ "./shadow/pink": "./pink.shadow.min.css",
617+ "./shadow/pink-hsl": "./pink-hsl.shadow.min.css",
618+ "./shadow/red": "./red.shadow.min.css",
619+ "./shadow/red-hsl": "./red-hsl.shadow.min.css",
620+ "./shadow/shadows": "./shadows.shadow.min.css",
621+ "./shadow/sizes": "./sizes.shadow.min.css",
622+ "./shadow/teal": "./teal.shadow.min.css",
623+ "./shadow/teal-hsl": "./teal-hsl.shadow.min.css",
624+ "./shadow/violet": "./violet.shadow.min.css",
625+ "./shadow/violet-hsl": "./violet-hsl.shadow.min.css",
626+ "./shadow/yellow": "./yellow.shadow.min.css",
627+ "./shadow/yellow-hsl": "./yellow-hsl.shadow.min.css",
628+ "./shadow/zindex": "./zindex.shadow.min.css",
629 "./json": "./open-props.tokens.json",
630 "./tokens": "./open-props.tokens.json",
631 "./design-tokens": "./open-props.tokens.json"
632 @@ -90,13 +129,14 @@
633 "defaults"
634 ],
635 "scripts": {
636- "build": "npm run gen:op",
637+ "build": "npm run gen:op && npm run gen:shadowdom",
638 "test": "ava test/basic.test.cjs",
639- "bundle": "concurrently npm:lib:*",
640+ "bundle": "concurrently npm:lib:* npm:shadow:*",
641 "bundle:pre-edit": "json -I -f package.json -e \"this.unpkg=''\"",
642 "bundle:post-edit": "json -I -f package.json -e \"this.unpkg='open-props.min.css'\"",
643 "gen:op": "cd build && node props.js '' true",
644 "gen:nowhere": "cd build && node props.js '' false",
645+ "gen:shadowdom": "cd build && node props.js '' false ':host' 'shadow'",
646 "gen:prefixed": "cd build && node props.js 'op' true",
647 "lib:js": "npm run bundle:pre-edit && microbundle --no-sourcemap && npm run bundle:post-edit",
648 "lib:all": "postcss src/index.css -o open-props.min.css",
649 @@ -140,7 +180,45 @@
650 "lib:colors:yellow": "postcss src/props.yellow.css -o yellow.min.css",
651 "lib:colors:yellow-hsl": "postcss src/props.yellow-hsl.css -o yellow-hsl.min.css",
652 "lib:colors:orange": "postcss src/props.orange.css -o orange.min.css",
653- "lib:colors:orange-hsl": "postcss src/props.orange-hsl.css -o orange-hsl.min.css"
654+ "lib:colors:orange-hsl": "postcss src/props.orange-hsl.css -o orange-hsl.min.css",
655+ "shadow:all": "postcss src/shadow.index.css -o open-props.shadow.min.css",
656+ "shadow:animations": "postcss src/shadow.props.animations.css -o animations.shadow.min.css",
657+ "shadow:aspects": "postcss src/shadow.props.aspects.css -o aspects.shadow.min.css",
658+ "shadow:borders": "postcss src/shadow.props.borders.css -o borders.shadow.min.css",
659+ "shadow:easing": "postcss src/shadow.props.easing.css -o easings.shadow.min.css",
660+ "shadow:fonts": "postcss src/shadow.props.fonts.css -o fonts.shadow.min.css",
661+ "shadow:gradients": "postcss src/shadow.props.gradients.css -o gradients.shadow.min.css",
662+ "shadow:shadows": "postcss src/shadow.props.shadows.css -o shadows.shadow.min.css",
663+ "shadow:sizes": "postcss src/shadow.props.sizes.css -o sizes.shadow.min.css",
664+ "shadow:zindex": "postcss src/shadow.props.zindex.css -o zindex.shadow.min.css",
665+ "shadow:colors": "postcss src/shadow.props.colors.css -o colors.shadow.min.css",
666+ "shadow:colors-hsl": "postcss src/shadow.props.colors-hsl.css -o colors-hsl.shadow.min.css",
667+ "shadow:colors:gray": "postcss src/shadow.props.gray.css -o gray.shadow.min.css",
668+ "shadow:colors:gray-hsl": "postcss src/shadow.props.gray-hsl.css -o gray-hsl.shadow.min.css",
669+ "shadow:colors:red": "postcss src/shadow.props.red.css -o red.shadow.min.css",
670+ "shadow:colors:red-hsl": "postcss src/shadow.props.red-hsl.css -o red-hsl.shadow.min.css",
671+ "shadow:colors:pink": "postcss src/shadow.props.pink.css -o pink.shadow.min.css",
672+ "shadow:colors:pink-hsl": "postcss src/shadow.props.pink-hsl.css -o pink-hsl.shadow.min.css",
673+ "shadow:colors:grape": "postcss src/shadow.props.grape.css -o grape.shadow.min.css",
674+ "shadow:colors:grape-hsl": "postcss src/shadow.props.grape-hsl.css -o grape-hsl.shadow.min.css",
675+ "shadow:colors:violet": "postcss src/shadow.props.violet.css -o violet.shadow.min.css",
676+ "shadow:colors:violet-hsl": "postcss src/shadow.props.violet-hsl.css -o violet-hsl.shadow.min.css",
677+ "shadow:colors:indigo": "postcss src/shadow.props.indigo.css -o indigo.shadow.min.css",
678+ "shadow:colors:indigo-hsl": "postcss src/shadow.props.indigo-hsl.css -o indigo-hsl.shadow.min.css",
679+ "shadow:colors:blue": "postcss src/shadow.props.blue.css -o blue.shadow.min.css",
680+ "shadow:colors:blue-hsl": "postcss src/shadow.props.blue-hsl.css -o blue-hsl.shadow.min.css",
681+ "shadow:colors:cyan": "postcss src/shadow.props.cyan.css -o cyan.shadow.min.css",
682+ "shadow:colors:cyan-hsl": "postcss src/shadow.props.cyan-hsl.css -o cyan-hsl.shadow.min.css",
683+ "shadow:colors:teal": "postcss src/shadow.props.teal.css -o teal.shadow.min.css",
684+ "shadow:colors:teal-hsl": "postcss src/shadow.props.teal-hsl.css -o teal-hsl.shadow.min.css",
685+ "shadow:colors:green": "postcss src/shadow.props.green.css -o green.shadow.min.css",
686+ "shadow:colors:green-hsl": "postcss src/shadow.props.green-hsl.css -o green-hsl.shadow.min.css",
687+ "shadow:colors:lime": "postcss src/shadow.props.lime.css -o lime.shadow.min.css",
688+ "shadow:colors:lime-hsl": "postcss src/shadow.props.lime-hsl.css -o lime-hsl.shadow.min.css",
689+ "shadow:colors:yellow": "postcss src/shadow.props.yellow.css -o yellow.shadow.min.css",
690+ "shadow:colors:yellow-hsl": "postcss src/shadow.props.yellow-hsl.css -o yellow-hsl.shadow.min.css",
691+ "shadow:colors:orange": "postcss src/shadow.props.orange.css -o orange.shadow.min.css",
692+ "shadow:colors:orange-hsl": "postcss src/shadow.props.orange-hsl.css -o orange-hsl.shadow.min.css"
693 },
694 "devDependencies": {
695 "ava": "^3.15.0",
696 diff --git a/readme.md b/readme.md
697index 3e9eb01..b2ab987 100644
698--- a/readme.md
699+++ b/readme.md
700 @@ -28,6 +28,7 @@
701 #### CLI
702 - `npm run gen:op` - runs through `src/` js files and creates the PostCSS files in `src/`
703 - `npm run gen:nowhere` - creates a version of Open Props without the use of `:where()`
704+ - `npm run gen:shadowdom` - creates a version of Open Props with `:host` as the selector scope
705 - `npm run gen:prefixed` - creates a version of Open Props with each prop prefixed with `op`, like `--op-font-size-1`
706 - `npm run bundle` - creates all the various minified bundles of props
707 - `npm run lib:js` - builds the JS modules for NPM
708 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
709index a4191c7..0e93c92 100644
710--- a/test/basic.test.cjs
711+++ b/test/basic.test.cjs
712 @@ -1,4 +1,5 @@
713 const test = require('ava')
714+ const fs = require('fs')
715 const OpenProps = require('../dist/open-props.cjs')
716 const OPtokens = require('../open-props.tokens.json')
717
718 @@ -29,4 +30,10 @@ test('JSON Import should have colors', async t => {
719
720 test('JSON Import should have types', async t => {
721 t.assert(OPtokens['--gray-0'].type, 'color')
722+ })
723+
724+ test('Should produce shadow :host props', async t => {
725+ t.assert(fs.existsSync('./src/shadow.index.css'))
726+ t.assert(fs.existsSync('./src/shadow.props.easing.css'))
727+ t.assert(fs.existsSync('./src/shadow.props.shadows.css'))
728 })
729\ No newline at end of file