From 5c1cf7bfd7d3227cbc0f58dd1f1d16565c2e75f9 Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 30 Jun 2016 11:01:11 -0600 Subject: [PATCH] Fix component generation The component build now uses the latest PostCSS API. The postcss-select library was also improved so selectors with pseudo elements/classes are also returned. Note that this update introduced some performance hits I will have to address later. --- build.js | 4 + components/articles/large-title-text.html | 42 -- .../articles/large-title-text/index.html | 23 +- .../articles/left-title-top-border/index.html | 36 +- components/articles/left-title/index.html | 38 +- .../articles/title-text-image/index.html | 23 +- components/articles/title-text/index.html | 23 +- components/collections/news-card/index.html | 51 ++- .../collections/product-card/index.html | 27 +- .../profile-card-title-subtitle/index.html | 23 +- .../collections/profile-card/index.html | 23 +- components/collections/text-card/index.html | 23 +- components/footers/small-print/index.html | 55 ++- components/footers/social-circles/index.html | 53 ++- components/footers/social-text/index.html | 53 ++- components/footers/social/index.html | 53 ++- components/headers/avatar/index.html | 390 ------------------ .../circle-avatar-title-subtitle/index.html | 21 +- .../headers/fixed-semi-transparent/index.html | 57 ++- .../rounded-avatar-title-subtitle/index.html | 21 +- .../layout/centered-container/index.html | 23 +- .../layout/flag-object-collapse/index.html | 23 +- components/layout/flag-object/index.html | 25 +- .../four-column-collapse-two/index.html | 38 +- components/layout/four-column/index.html | 36 +- .../layout/two-column-collapse-one/index.html | 38 +- components/layout/two-column/index.html | 36 +- components/lists/border-spaced/index.html | 23 +- components/lists/border-tight/index.html | 19 +- .../lists/large-links-inline/index.html | 53 ++- components/lists/links-inline/index.html | 53 ++- .../links-with-borders-inline/index.html | 53 ++- components/lists/slab-stat/index.html | 21 +- components/lists/title-text/index.html | 23 +- .../nav/large-title-link-list/index.html | 53 ++- components/nav/list-overflow/index.html | 53 ++- .../nav/logo-links-inline-collapse/index.html | 53 ++- components/nav/logo-links-inline/index.html | 53 ++- components/nav/title-link-list/index.html | 53 ++- src/components-build.js | 10 +- 40 files changed, 1048 insertions(+), 730 deletions(-) delete mode 100644 components/articles/large-title-text.html delete mode 100644 components/headers/avatar/index.html diff --git a/build.js b/build.js index ffa13705c..22cf12598 100644 --- a/build.js +++ b/build.js @@ -1,4 +1,8 @@ require('./src/components-build')() +console.log('components build complete') require('./src/table-of-styles-build')() +console.log('table of styles build complete') require('./src/table-of-properties-build')() +console.log('table of properties build complete') require('./src/home-build')() +console.log('home build complete') diff --git a/components/articles/large-title-text.html b/components/articles/large-title-text.html deleted file mode 100644 index 671891aee..000000000 --- a/components/articles/large-title-text.html +++ /dev/null @@ -1,42 +0,0 @@ -{{{ - "bodyClass" : "bg-white" -}}} -
-

- 9.5.1 If the text will be read on the screen, design it for that medium. -

-

- Like a forest or a garden or a field, an honest page of letters can absorb -- - and will repay -- as much attention as it is given. Much type now, however, is - composed not for the page but for the screen of a computer. That screen can be - alive with flowing color, but the best computer monitors have dismal resolution - (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of - the norm for professional digital typesetting). When the text is crudely - rendered, the eye goes looking for distraction, which the screen is all too - able to provide. -

-

- The screen mimics the sky, not the earth. It bombards the eye with light - instead of waiting to repay the gift of vision. It is not simultaneously - restful and lively, like a field full of flowers, or the face of a thinking - human being, or a well-made typographic page. And we read the screen the way we - read the sky: in quick sweeps, guessing at the weather from the changing shapes - of clouds, or like astronomers, in magnified small bits, examining details. We - look to it for clues and revelations more than wisdom. This makes it an - attractive place for advertising and dogmatizing, but not so good a place for - thoughtful text. -

-

- The screen, in other words, is a reading environment even more fugitive than - the newspaper. Intricate long sentences full of unfamiliar words stand little - chance. At text size, subtle and delicate letterforms stand little chance as - well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In - the harsh light and coarse resolution of the screen such accessories are - difficult to see; what is worse, they dispel the essential illusion of speed. - so the links and jumps of hypertext replace them. All the subtexts then can be - the same size and readers are at liberty to skip from text to text like - children switching channels on tv. When reading takes this form, sentences and - letterforms retreat to blunt simplicity. Forms bred on newsprint and signage - are most likely to survive. -

-
diff --git a/components/articles/large-title-text/index.html b/components/articles/large-title-text/index.html index 89ab3c39f..a38a9f0f5 100644 --- a/components/articles/large-title-text/index.html +++ b/components/articles/large-title-text/index.html @@ -11,6 +11,14 @@ @@ -146,7 +154,7 @@

CSS

max-width: 30em; } -@media screen and (min-width: 48em) { +@media screen and (min-width: 30em) { .pa5-ns { padding: 4rem; } @@ -168,7 +176,7 @@

CSS

CSS Stats for this Component

Gzipped Size
-
268B +
265B
@@ -454,21 +462,21 @@

nav

Have a question? Need help? Feel free to open an issue on GitHub or ask a question in our slack channel. We're here to try and help make designing in the browser fun.

+
+ +
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -476,6 +484,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -541,6 +558,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -488,6 +505,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -404,6 +412,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -386,6 +394,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -459,6 +493,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -512,6 +520,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -465,6 +473,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -480,6 +488,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -462,6 +470,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -431,6 +465,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -478,6 +512,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -473,6 +507,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -483,6 +517,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ - - - -
- -
- - -
- -

- - Join our Slack Channel - - - Open an Issue - - - GitHub - -

-

- Have a question? Need help? Feel free to open an issue on GitHub or ask a - question in our slack channel. We're here to try and help make designing in - the browser fun. -

- - A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle - that always moves faster than light. - The word comes from the Greek: -

- ταχύς or tachys, meaning "swift, quick, fast, rapid" -
-
- - - - - - - diff --git a/components/headers/circle-avatar-title-subtitle/index.html b/components/headers/circle-avatar-title-subtitle/index.html index f744b21f6..730e8fd38 100644 --- a/components/headers/circle-avatar-title-subtitle/index.html +++ b/components/headers/circle-avatar-title-subtitle/index.html @@ -11,6 +11,14 @@ @@ -106,7 +114,7 @@

CSS

font-size: .875rem; } -@media screen and (min-width: 48em) { +@media screen and (min-width: 30em) { .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; @@ -421,21 +429,21 @@

nav

Have a question? Need help? Feel free to open an issue on GitHub or ask a question in our slack channel. We're here to try and help make designing in the browser fun.

+
+ +
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -443,6 +451,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -451,6 +485,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -435,6 +443,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -398,6 +406,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -448,6 +456,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -411,6 +419,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -383,6 +400,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -398,6 +415,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -393,6 +410,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -387,6 +404,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -435,6 +443,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -421,6 +429,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -592,6 +626,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -599,6 +633,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -616,6 +650,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -436,6 +444,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -527,6 +535,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -442,6 +476,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -483,6 +517,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -493,6 +527,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -469,6 +503,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ + A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. @@ -408,6 +442,7 @@

nav



ταχύς or tachys, meaning "swift, quick, fast, rapid"
+ diff --git a/src/components-build.js b/src/components-build.js index 4b68db139..822f5e71f 100644 --- a/src/components-build.js +++ b/src/components-build.js @@ -92,12 +92,14 @@ module.exports = function () { } }) - frontMatter.componentCss = postcss([ + postcss([ atImport(), cssVariables(), conditionals(), customMedia(), select(frontMatter.classes), removeComments({ removeAll: true }), mqPacker(), removeEmpty(), getModules(), perfectionist() ]).process(tachyonsCss, { from: 'src/css/tachyons.css' - }).then(function () { + }).then(function (result) { + console.log('component css selection complete for', component) + frontMatter.componentCss = result.css frontMatter.stats = cssstats(frontMatter.componentCss) // TODO: Update me once src/ uses the npm modules @@ -106,9 +108,11 @@ module.exports = function () { }) var compiledPage = _.template(template)(frontMatter) + console.log('creating new dir', newDir) mkdirp.sync(newDir) fs.writeFileSync(newFile, compiledPage) - }) + console.log('finished component build for', component) + }).catch(function (e) { console.log(e) }) }) }) }