diff --git a/build/assets.jsx b/build/assets.jsx index 26665c5..64a0e2e 100644 --- a/build/assets.jsx +++ b/build/assets.jsx @@ -7,10 +7,3 @@ import '@src/styles'; import '@src/scripts'; - -// Icon bundling -const requireAll = (r) => r.keys().map(r); -requireAll(require.context('@atoms/Icon/assets', false, /\.(svg)$/)); - -// Image bundling -requireAll(require.context('@atoms/Image/assets', false, /\.(svg|jpg|png|gif)$/)); diff --git a/build/configs/build.config.js b/build/configs/build.config.js index b35c3a1..4f26c69 100644 --- a/build/configs/build.config.js +++ b/build/configs/build.config.js @@ -8,12 +8,13 @@ const fs = require('fs'); const path = require('path'); const Package = require('../../package.json'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // build configuration files const js = require('./js/js.config.js'); // all js file related build configurations const css = require('./css/css.config.js'); // all css file related build configurations const img = require('./img/img.config.js'); // all img/svg related build configurations +const html = require('./html/html.config.js'); // all html related build configurations const font = require('./font/font.config.js'); // all font related build configurations const alias = require('./webpack/alias.config.js'); // all file path alias helper configurations const stats = require('./webpack/stats.config.js'); // all terminal stats configurations @@ -34,6 +35,7 @@ const config = { ...css.config, // see build/config/css/css.config.js ...js.config, // see build/config/js/js.config.js ...img.config, // see build/config/img/img.config.js + ...html.config, // see build/config/html/html.config.js ...font.config // see build/config/font/font.config.js ] }, @@ -41,8 +43,18 @@ const config = { ...css.plugins, // see build/config/css/css.config.js ...js.plugins, // see build/config/js/js.config.js ...img.plugins, // see build/config/img/img.config.js + ...html.plugins, // see build/config/html/html.config.js ...font.plugins, // see build/config/font/font.config.js - ...alias.plugins // see build/config/alias.config.js + ...alias.plugins, // see build/config/alias.config.js + new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server. + { + from: path.resolve( + __dirname, + `../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}` + ), // for IIS servers + to: path.resolve(__dirname, `../../${Package.directories.dest}`) + } + ]) ], ...stats.config, // see build/configs/webpack/stats.config.js resolve: { @@ -66,12 +78,7 @@ const config = { module.exports = (env, argv) => { if (fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) { config.plugins.push( - new CleanWebpackPlugin( - [`${config.output.path}`], // reuse config output path from above - { - 'root': path.resolve(config.output.path, '../') // focus plugins root out of build/config/ - } - ) + new CleanWebpackPlugin() ); } diff --git a/build/configs/css/css.postcss.plugins.js b/build/configs/css/css.postcss.plugins.js index e7e3e59..c9a31e6 100644 --- a/build/configs/css/css.postcss.plugins.js +++ b/build/configs/css/css.postcss.plugins.js @@ -154,7 +154,16 @@ const extend = postcss.plugin('postcss-extend', (options) => { while (i--) { let j = toSelectors.length; while (j--) { - newSelector += `${fromSelectors[i].replace(new RegExp(`${atRule.params.trim()}(.*?)`, 'g'), ` ${toSelectors[j]}$1`)},`; + newSelector += `${fromSelectors[i] + .replace( + new RegExp(`${ + atRule.params + .replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&').trim() + }(.*?)`, + 'g' + ), + ` ${toSelectors[j]}$1`) + },`; } } diff --git a/build/configs/dev.config.js b/build/configs/dev.config.js index 6071958..5f3336b 100644 --- a/build/configs/dev.config.js +++ b/build/configs/dev.config.js @@ -8,11 +8,11 @@ const path = require('path'); const Package = require('../../package.json'); // build configuration files -const js = require('./js/js.config.js'); // all js file related build configurations -const css = require('./css/css.config.js'); // all css file related build configurations -const img = require('./img/img.config.js'); // all img/svg related build configurations -const html = require('./html/html.config.js'); // all html related build configurations -const font = require('./font/font.config.js'); // all font related build configurations +const js = require('./js/js.config.js'); // all js file related build configurations +const css = require('./css/css.config.js'); // all css file related build configurations +const img = require('./img/img.config.js'); // all img/svg related build configurations +const html = require('./html/html.config.js'); // all html related build configurations +const font = require('./font/font.config.js'); // all font related build configurations const alias = require('./webpack/alias.config.js'); // all file path alias helper configurations const stats = require('./webpack/stats.config.js'); // all terminal stats configurations const server = require('./webpack/server.config.js'); // all webpack-dev-server configurations diff --git a/build/configs/guide.config.js b/build/configs/guide.config.js index fe468cf..9ccfcd8 100644 --- a/build/configs/guide.config.js +++ b/build/configs/guide.config.js @@ -6,9 +6,10 @@ // devDependencies const fs = require('fs'); const path = require('path'); +const exec = require('child_process').exec; const Package = require('../../package.json'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // build configuration files const js = require('./js/js.config.js'); // all js file related build configurations @@ -50,11 +51,15 @@ const config = { ...stats.plugins, // see build/configs/stats.config.js new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server. { - from: path.resolve( + from: path.resolve(__dirname, `../../${Package.directories.dest}`), + to: path.resolve(__dirname, `../../dist`) + }, + { + 'from': path.resolve( __dirname, `../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}` - ), // for IIS servers - to: path.resolve(__dirname, `../../${Package.directories.dest}`) + ), + 'to': path.resolve(__dirname, `../../${Package.directories.dest}`) } ]) ], @@ -75,13 +80,12 @@ const config = { module.exports = (env, argv) => { if (fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) { config.plugins.push( - new CleanWebpackPlugin( - [`${config.output.path}`], // reuse config output path from above - { - 'root': path.resolve(config.output.path, '../') // focus plugins root out of build/config/ - } - ) + new CleanWebpackPlugin({ + cleanStaleWebpackAssets: false // resolve conflict with `CopyWebpackPlugin` + }) ); + } else { + exec('npm run build'); // when missing a required "first time build" } return config; diff --git a/build/configs/img/img.config.js b/build/configs/img/img.config.js index b1fe210..d9c00cc 100644 --- a/build/configs/img/img.config.js +++ b/build/configs/img/img.config.js @@ -9,7 +9,7 @@ const WebpackSvgSpritely = require('webpack-svg-spritely'); // all image types get ran through these process module.exports = { config: [{ - 'test': /\.(jpe?g|png|gif|svg)$/i, + 'test': /\.(jpe?g|png|gif|svg|ico)$/i, 'exclude': /node_modules/, 'include': [ path.resolve(__dirname, '../../../src'), diff --git a/build/configs/webpack/alias.config.js b/build/configs/webpack/alias.config.js index 2a6bdc3..2fe6d28 100644 --- a/build/configs/webpack/alias.config.js +++ b/build/configs/webpack/alias.config.js @@ -16,12 +16,17 @@ module.exports = { '@guide': path.resolve(__dirname, '../../../build/guide/'), '@atoms': path.resolve(__dirname, '../../../src/elements/atoms/'), '@pages': path.resolve(__dirname, '../../../src/pages/'), - '@tools': path.resolve(__dirname, '../../../build/guide/tools/'), '@elements': path.resolve(__dirname, '../../../src/elements/'), '@molecules': path.resolve(__dirname, '../../../src/elements/molecules/'), '@organisms': path.resolve(__dirname, '../../../src/elements/organisms/'), '@modifiers': path.resolve(__dirname, '../../../src/elements/modifiers/'), '@templates': path.resolve(__dirname, '../../../src/elements/templates/'), + '@tools': path.resolve(__dirname, '../../guide/src/tools/'), + '@guideAtoms': path.resolve(__dirname, '../../guide/src/elements/atoms/'), + '@guideAssets': path.resolve(__dirname, '../../guide/assets/'), + '@guideMolecules': path.resolve(__dirname, '../../guide/src/elements/molecules/'), + '@guideModifiers': path.resolve(__dirname, '../../guide/src/elements/modifiers/'), + '@guideOrganisms': path.resolve(__dirname, '../../guide/src/elements/organisms/'), '@sly': path.resolve(__dirname, '../../../src/elements/modifiers/Sly/Sly'), Utils: path.resolve(__dirname, '../../../src/utilities.jsx'), GuideUtils: path.resolve(__dirname, '../../guide/guide.utilities.jsx') diff --git a/build/guide/plugins/webpack.jsdocgen.loader.js b/build/configs/webpack/webpack.jsdocgen.loader.js similarity index 100% rename from build/guide/plugins/webpack.jsdocgen.loader.js rename to build/configs/webpack/webpack.jsdocgen.loader.js diff --git a/build/guide/plugins/webpack.jsxdocgen.loader.js b/build/configs/webpack/webpack.jsxdocgen.loader.js similarity index 100% rename from build/guide/plugins/webpack.jsxdocgen.loader.js rename to build/configs/webpack/webpack.jsxdocgen.loader.js diff --git a/build/guide.jsx b/build/guide.jsx index 4345be2..6782121 100644 --- a/build/guide.jsx +++ b/build/guide.jsx @@ -8,4 +8,14 @@ import '@guide/guide.parts'; import '@guide/styles'; // see ./build/guide/styles.css import '@guide/scripts'; // see ./guide/guide/scripts.jsx +const requireAll = (context) => context.keys().map(context); + +requireAll( + require.context( + '@guide/src/elements/', + true, + /^(?!.*Root).*\/(?!.*RichText).*\/(?!.*font-face).*\.css$/ + ) +); + require('es6-object-assign').polyfill(); diff --git a/build/guide/guide.parts.jsx b/build/guide/guide.parts.jsx index 34645ea..4fe5a61 100644 --- a/build/guide/guide.parts.jsx +++ b/build/guide/guide.parts.jsx @@ -15,7 +15,7 @@ const readDirectory = (context) => { const getJSXDocs = (name) => { const allJSXDocs = require.context( - '!!./plugins/webpack.jsxdocgen.loader!../../src/elements/', + '!!../configs/webpack/webpack.jsxdocgen.loader!../../src/elements/', true, /^((?!test|example).)*jsx$/ ); @@ -32,7 +32,7 @@ const getJSXDocs = (name) => { const getJSDocs = (name) => { const allJSDocs = require.context( - '!!./plugins/webpack.jsdocgen.loader?htmlDescription!../../src/elements/', + '!!../configs/webpack/webpack.jsdocgen.loader?htmlDescription!../../src/elements/', true, /^.*\.(js)$/ ); diff --git a/build/guide/guide.router.jsx b/build/guide/guide.router.jsx index 760a145..c70d827 100644 --- a/build/guide/guide.router.jsx +++ b/build/guide/guide.router.jsx @@ -1,7 +1,8 @@ -import Nav from '@guide/partials/nav/guide__nav'; -import Welcome from '@guide/partials/welcome/guide__welcome'; -import Examples from '@guide/partials/examples/guide__examples'; -import { Guide__pages, BadAddress } from '@guide/partials/pages/guide__pages'; +import Nav from '@guideMolecules/Nav/Nav'; +import Examples from '@guideMolecules/Examples/Examples'; + +import Dashboard from '@guideOrganisms/Dashboard/Dashboard'; +import { Pages, BadAddress } from '@guideOrganisms/Pages/Pages'; export const Guide = (props) => { const { @@ -21,11 +22,11 @@ export const Guide = (props) => {
- - + + - - + +