11const _ = require ( 'lodash' ) ;
22const atImport = require ( 'postcss-import' ) ;
33const chalk = require ( 'chalk' ) ;
4+ const co = require ( 'co' ) ;
45const conditionals = require ( 'postcss-conditionals' ) ;
56const cssstats = require ( 'cssstats' ) ;
67const cssVariables = require ( 'postcss-css-variables' ) ;
@@ -18,91 +19,96 @@ const removeComments = require('postcss-discard-comments');
1819const removeEmpty = require ( 'postcss-discard-empty' ) ;
1920const select = require ( 'postcss-select' ) ;
2021
21- const analyticsTemplatePath = 'src/templates/ga.html' ;
22- const componentTemplatePath = 'src/templates/components.html' ;
23- const footerTemplatePath = 'src/templates/footer.html' ;
24- const headTemplatePath = 'src/templates/head.html' ;
25- const highlightTemplatePath = 'src/templates/highlight.html' ;
22+ const defaults = require ( './components-build-defaults' ) ;
2623
27- const tachyonsCssPath = 'src/css/tachyons.css' ;
28-
29- module . exports = componentsForNavPath => new Promise ( ( resolve , reject ) => {
24+ module . exports = _options => new Promise ( ( resolve , reject ) => {
25+ const options = _ . assign ( { } , defaults , _options ) ;
3026 console . log ( chalk . magenta ( 'Working on components pages...' ) ) ;
31- if ( componentsForNavPath === undefined || ! fs . existsSync ( componentsForNavPath ) ) {
27+ if ( options . componentsForNavPath === undefined || ! fs . existsSync ( options . componentsForNavPath ) ) {
3228 reject ( 'Can not find components nav JSON file' ) ;
29+ return ;
30+ }
31+ if ( ! options . componentsBuildPages ) {
32+ console . log ( chalk . dim ( 'Skipped by request.' ) ) ;
33+ resolve ( ) ;
34+ return ;
3335 }
34- const componentsForNav = JSON . parse ( fs . readFileSync ( componentsForNavPath , 'utf8' ) ) ;
36+ const componentsForNav = JSON . parse ( fs . readFileSync ( options . componentsForNavPath , 'utf8' ) ) ;
37+
38+ const componentTemplate = fs . readFileSync ( options . componentsTemplatePath , 'utf8' ) ;
39+ const analytics = fs . readFileSync ( options . analyticsTemplatePath , 'utf8' ) ;
40+ const footer = fs . readFileSync ( options . footerTemplatePath , 'utf8' ) ;
41+ const head = fs . readFileSync ( options . headTemplatePath , 'utf8' ) ;
42+ const highlight = fs . readFileSync ( options . highlightTemplatePath , 'utf8' ) ;
3543
36- const componentTemplate = fs . readFileSync ( componentTemplatePath , 'utf8' ) ;
37- const analytics = fs . readFileSync ( analyticsTemplatePath , 'utf8' ) ;
38- const footer = fs . readFileSync ( footerTemplatePath , 'utf8' ) ;
39- const head = fs . readFileSync ( headTemplatePath , 'utf8' ) ;
40- const highlight = fs . readFileSync ( highlightTemplatePath , 'utf8' ) ;
44+ const tachyonsCss = fs . readFileSync ( options . tachyonsCssPath , 'utf8' ) ;
4145
42- const tachyonsCss = fs . readFileSync ( tachyonsCssPath , 'utf8' ) ;
46+ const renderPromise = co ( function * generator ( ) {
47+ // Unfortunately, can't use forEach() in generators, so let's for()...
48+ const categories = Object . keys ( componentsForNav ) ;
49+ for ( let cat_idx = 0 ; cat_idx < categories . length ; cat_idx += 1 ) {
50+ const category = categories [ cat_idx ] ;
51+ console . log ( chalk . yellow ( '- Processing category:' ) , category ) ;
4352
44- const promises = [ ] ;
45- Object . keys ( componentsForNav ) . forEach ( ( category ) => {
46- console . log ( chalk . yellow ( '- Processing category:' ) , category ) ;
47- componentsForNav [ category ] . forEach ( ( component ) => {
48- const componentHtml = fs . readFileSync ( component . src , 'utf8' ) ;
49- const fmParsed = fm . parse ( componentHtml ) ;
53+ for ( let comp_idx = 0 ; comp_idx < componentsForNav [ category ] . length ; comp_idx += 1 ) {
54+ const component = componentsForNav [ category ] [ comp_idx ] ;
55+ const componentHtml = fs . readFileSync ( component . src , 'utf8' ) ;
56+ const fmParsed = fm . parse ( componentHtml ) ;
5057
51- const frontMatter = _ . assign ( { } , component . frontMatter ) ;
52- frontMatter . title = component . title ;
53- frontMatter . name = component . name ;
54- frontMatter . bodyClass = frontMatter . bodyClass || '' ;
55- frontMatter . classes = getClasses ( fmParsed . body ) . map ( klass => `.${ klass } ) ;
56- frontMatter . componentHtml = componentHtml ;
57- frontMatter . content = fmParsed . body ;
58- frontMatter . escapedHtml = escapeHtml ( fmParsed . body ) ;
59- frontMatter . footer = footer ;
60- frontMatter . analytics = analytics ;
61- frontMatter . head = head ;
62- frontMatter . highlight = highlight ;
63- frontMatter . componentsForNav = componentsForNav ;
58+ const frontMatter = _ . assign ( { } , component . frontMatter ) ;
59+ frontMatter . title = component . title ;
60+ frontMatter . name = component . name ;
61+ frontMatter . bodyClass = frontMatter . bodyClass || '' ;
62+ frontMatter . classes = getClasses ( fmParsed . body ) . map ( klass => `.${ klass } ) ;
63+ frontMatter . componentHtml = componentHtml ;
64+ frontMatter . content = fmParsed . body ;
65+ frontMatter . escapedHtml = escapeHtml ( fmParsed . body ) ;
66+ frontMatter . footer = footer ;
67+ frontMatter . analytics = analytics ;
68+ frontMatter . head = head ;
69+ frontMatter . highlight = highlight ;
70+ frontMatter . componentsForNav = componentsForNav ;
6471
65- const moduleSrcs = { } ;
66- const getModules = postcss . plugin ( 'get-modules' , ( ) => ( css ) => {
67- css . walkRules ( ( rule ) => {
68- moduleSrcs [ rule . source . input . from ] = true ;
72+ const moduleSrcs = { } ;
73+ const getModules = postcss . plugin ( 'get-modules' , ( ) => ( css ) => {
74+ css . walkRules ( ( rule ) => {
75+ moduleSrcs [ rule . source . input . from ] = true ;
76+ } ) ;
6977 } ) ;
70- } ) ;
7178
72- const promise = postcss ( [
73- atImport ( ) ,
74- cssVariables ( ) ,
75- conditionals ( ) ,
76- customMedia ( ) ,
77- select ( frontMatter . classes ) ,
78- removeComments ( { removeAll : true } ) ,
79- mqPacker ( ) ,
80- removeEmpty ( ) ,
81- getModules ( ) ,
82- perfectionist ( ) ,
83- ] ) . process ( tachyonsCss , {
84- from : tachyonsCssPath ,
85- } ) . then ( ( result ) => {
86- frontMatter . componentCss = result . css ;
87- frontMatter . stats = cssstats ( frontMatter . componentCss ) ;
79+ yield postcss ( [
80+ atImport ( ) ,
81+ cssVariables ( ) ,
82+ conditionals ( ) ,
83+ customMedia ( ) ,
84+ select ( frontMatter . classes ) ,
85+ removeComments ( { removeAll : true } ) ,
86+ mqPacker ( ) ,
87+ removeEmpty ( ) ,
88+ getModules ( ) ,
89+ perfectionist ( ) ,
90+ ] ) . process ( tachyonsCss , {
91+ from : options . tachyonsCssPath ,
92+ } ) . then ( ( result ) => {
93+ frontMatter . componentCss = result . css ;
94+ frontMatter . stats = cssstats ( frontMatter . componentCss ) ;
8895
89- // TODO: Update me once src/ uses the npm modules
90- frontMatter . modules = Object . keys ( moduleSrcs ) . map (
91- module => `tachyons-${ module . split ( '/_' ) [ 1 ] . replace ( '.css' , '' ) }
92- ) ;
96+ // TODO: Update me once src/ uses the npm modules
97+ frontMatter . modules = Object . keys ( moduleSrcs ) . map (
98+ module => `tachyons-${ module . split ( '/_' ) [ 1 ] . replace ( '.css' , '' ) }
99+ ) ;
93100
94- const compiledComponent = _ . template ( componentTemplate ) ( frontMatter ) ;
95- mkdirp . sync ( path . dirname ( component . path ) ) ;
96- fs . writeFileSync ( component . path , compiledComponent ) ;
97- console . log ( ' * Created component:' , component . href ) ;
98- } ) . catch ( ( e ) => {
99- console . log ( e ) ;
100- } ) ;
101- promises . push ( promise ) ;
102- } ) ;
103- } ) ;
104- resolve ( Promise . all ( promises ) . then ( ( ) => {
101+ const compiledComponent = _ . template ( componentTemplate ) ( frontMatter ) ;
102+ mkdirp . sync ( path . dirname ( component . path ) ) ;
103+ fs . writeFileSync ( component . path , compiledComponent ) ;
104+ console . log ( ' * Created page for:' , component . src ) ;
105+ } ) . catch ( ( e ) => {
106+ console . log ( e ) ;
107+ } ) ;
108+ }
109+ }
110+ } ) . then ( ( ) => {
105111 console . log ( chalk . magenta ( 'Done with components pages!' ) ) ;
106- return componentsForNavPath ;
107- } ) ) ;
112+ } ) ;
113+ resolve ( renderPromise ) ;
108114} ) ; // return promise
0 commit comments