sass system with webpack. kills src.json

package.json

@@ -42,12 +42,10 @@
     "gulp-eslint": "^4.0.0",
     "gulp-file": "^0.3.0",
     "gulp-filter": "^4.0.0",
+    "gulp-ignore": "^2.0.2",
     "gulp-modify": "^0.1.1",
-    "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-template": "^4.0.0",
     "gulp-tslint": "^8.1.2",
     "gulp-uglify": "^2.0.0",
     "gulp-util": "^3.0.7",
@@ -60,10 +58,11 @@
     "karma": "^0.13.22",
     "karma-jasmine": "^1.0.2",
     "karma-phantomjs-launcher": "^1.0.0",
-    "lodash": "^4.14.1",
     "moment-timezone": "^0.5.5",
     "native-promise-only": "^0.8.1",
+    "node-sass": "^4.7.2",
     "phantomjs-prebuilt": "^2.1.7",
+    "sass-loader": "^6.0.6",
     "socket.io": "1.4.5",
     "string-replace-webpack-plugin": "^0.1.3",
     "tslib": "^1.8.0",

src.json

@@ -1,5 +0,0 @@
-{
-  "fullcalendar.print.css": [
-    "common/print.css"
-  ]
-}

src/main.scss

@@ -0,0 +1,10 @@
+
+@import './common/common.scss';
+@import './common/common.standard.scss';
+@import './common/common.jquery-ui.scss';
+@import './common/common.bootstrap3.scss';
+@import './toolbar.scss';
+@import './view.scss';
+@import './basic/basic.scss';
+@import './agenda/agenda.scss';
+@import './list/list.scss';

src/main.ts

@@ -12,16 +12,6 @@ import './basic/config'
 import './agenda/config'
 import './list/config'
 
-// css
-import "./common/common.css"
-import "./common/common.standard.css"
-import "./common/common.jquery-ui.css"
-import "./common/common.bootstrap3.css"
-import "./main.css"
-import "./basic/basic.css"
-import "./agenda/agenda.css"
-import "./list/list.css"
-
 declare global {
 	interface JQueryStatic {
 		fullCalendar: object

src/main.css → src/toolbar.scss

@@ -66,23 +66,3 @@
 .fc-toolbar button:focus {
 	z-index: 5;
 }
-
-
-/* View Structure
---------------------------------------------------------------------------------------------------*/
-
-/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
-/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
-.fc-view-container *,
-.fc-view-container *:before,
-.fc-view-container *:after {
-	-webkit-box-sizing: content-box;
-	   -moz-box-sizing: content-box;
-	        box-sizing: content-box;
-}
-
-.fc-view, /* scope positioning and z-index's for everything within the view */
-.fc-view > table { /* so dragged elements can be above the view's main element */
-	position: relative;
-	z-index: 1;
-}

src/view.scss

@@ -0,0 +1,19 @@
+
+/* View Structure
+--------------------------------------------------------------------------------------------------*/
+
+/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
+/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
+.fc-view-container *,
+.fc-view-container *:before,
+.fc-view-container *:after {
+	-webkit-box-sizing: content-box;
+	   -moz-box-sizing: content-box;
+	        box-sizing: content-box;
+}
+
+.fc-view, /* scope positioning and z-index's for everything within the view */
+.fc-view > table { /* so dragged elements can be above the view's main element */
+	position: relative;
+	z-index: 1;
+}

tasks/modules.js

@@ -1,51 +1,50 @@
 const del = require('del');
-const _ = require('lodash'); // TODO: kill
 const gulp = require('gulp');
-const plumber = require('gulp-plumber'); // TODO: kill
-const concat = require('gulp-concat'); // TODO: kill
-const template = require('gulp-template'); // TODO: kill
-const sourcemaps = require('gulp-sourcemaps'); // TODO: kill
 const webpack = require('webpack-stream');
+const gulpIgnore = require('gulp-ignore');
 
 // configs
-const packageConf = require('../package.json'); // TODO: kill
-const srcConf = require('../src.json'); // TODO: kill
 const createCoreConfig = require('./webpack/createCoreConfig');
 const createPluginsConfig = require('./webpack/createPluginsConfig');
 
 
-gulp.task('modules', [ 'core', 'plugins', 'css' ]);
-gulp.task('modules:dev', [ 'core:dev', 'plugins:dev', 'css:dev' ]);
-gulp.task('modules:watch', [ 'core:watch', 'plugins:watch', 'css:watch' ]);
+gulp.task('modules', [ 'core', 'plugins' ]);
+gulp.task('modules:dev', [ 'core:dev', 'plugins:dev' ]);
+gulp.task('modules:watch', [ 'core:watch', 'plugins:watch' ]);
 
 // deletes all generated js/css files in the dist directory
 gulp.task('modules:clean', function() {
 	return del('dist/*.{js,ts,css,map}');
 });
 
+
 // core
 
-gulp.task('core', function() {
+gulp.task('core', [ 'ts-types' ], function() {
 	const config = createCoreConfig();
 	return gulp.src([])
 		.pipe(webpack(config))
+		.pipe(gulpIgnore.exclude('*.css.js*'))
 		.pipe(gulp.dest(config.output.path));
 });
 
-gulp.task('core:dev', function() {
+gulp.task('core:dev', [ 'ts-types' ], function() {
 	const config = createCoreConfig({ debug: true });
 	return gulp.src([])
 		.pipe(webpack(config))
+		.pipe(gulpIgnore.exclude('*.css.js*'))
 		.pipe(gulp.dest(config.output.path));
 });
 
-gulp.task('core:watch', function() {
+gulp.task('core:watch', [ 'ts-types' ], function() {
 	const config = createCoreConfig({ debug: true, watch: true });
 	return gulp.src([])
 		.pipe(webpack(config))
+		.pipe(gulpIgnore.exclude('*.css.js*'))
 		.pipe(gulp.dest(config.output.path));
 });
 
+
 // plugins
 
 gulp.task('plugins', [ 'ts-types' ], function() {
@@ -68,50 +67,3 @@ gulp.task('plugins:watch', [ 'ts-types' ], function() {
 		.pipe(webpack(config))
 		.pipe(gulp.dest(config.output.path));
 });
-
-// css (TODO: kill)
-
-// generates js/css/sourcemap files in dist directory
-gulp.task('css', _.map(srcConf, function(srcFiles, distFile) {
-	return 'css:' + distFile; // generates an array of task names
-}));
-
-// generates js/css/sourcemap files in dist directory
-gulp.task('css:dev', _.map(srcConf, function(srcFiles, distFile) {
-	return 'css:dev:' + distFile; // generates an array of task names
-}));
-
-// watches source files and generates js/css/sourcemaps
-gulp.task('css:watch', _.map(srcConf, function(srcFiles, distFile) {
-	return 'css:watch:' + distFile; // generates an array of task names
-}));
-
-// loop the distFile:srcFiles map
-_.forEach(srcConf, function(srcFiles, distFile) {
-
-	gulp.task('css:' + distFile, function() {
-		return gulp.src(srcFiles, { cwd: 'src/', base: 'src/' })
-			.pipe(plumber()) // affects future streams
-			.pipe(concat(distFile, { newLine: '\n\n' }))
-			.pipe(template(packageConf)) // replaces <%= %> variables
-			.pipe(gulp.dest('dist/'));
-	});
-
-	gulp.task('css:dev:' + distFile, function() {
-		return gulp.src(srcFiles, { cwd: 'src/', base: 'src/' })
-			.pipe(plumber()) // affects future streams
-			.pipe(sourcemaps.init())
-			.pipe(concat(distFile, { newLine: '\n\n' }))
-			.pipe(template(packageConf)) // replaces <%= %> variables
-			.pipe(sourcemaps.write('.', {
-				includeContent: false, // because we'll reference the src files
-				sourceRoot: '../src/' // relative to outputted file in dist
-			}))
-			.pipe(gulp.dest('dist/'));
-	});
-
-	// generates dev files first, then watches
-	gulp.task('css:watch:' + distFile, [ 'css:dev:' + distFile ], function() {
-		return gulp.watch(srcFiles, { cwd: 'src/' }, [ 'css:dev:' + distFile ]);
-	});
-});

tasks/webpack/createConfig.js

@@ -7,13 +7,13 @@ const ExtractTextPlugin = require("extract-text-webpack-plugin")
 // after https://github.com/webpack/webpack/issues/3460 will be resolved.
 const { CheckerPlugin } = require('awesome-typescript-loader')
 
-// external configs
-const packageConf = require('../../package.json')
-
 /*
 settings:
+	packageConf: object (loaded from package.json)
+	context: string
+	outputDir: string
 	entry: { modulename: path }
-	tsconfig: string
+	tsconfig: string (can be full path)
 	useExternalCore: true / false (default)
 	debug: true / false (default)
 */
@@ -31,8 +31,8 @@ module.exports = function(/* settings, settings, settings */) {
 	const output = {
 		libraryTarget: 'umd',
 		filename: '[name].js',
-		path: path.resolve(__dirname, '../../dist/'),
-		devtoolModuleFilenameTemplate: 'webpack:///' + packageConf.name + '/[resource-path]'
+		path: settings.outputDir,
+		devtoolModuleFilenameTemplate: 'webpack:///' + settings.packageConf.name + '/[resource-path]'
 	}
 
 	if (!settings.useExternalCore) {
@@ -47,6 +47,7 @@ module.exports = function(/* settings, settings, settings */) {
 	}
 
 	return {
+		context: settings.context,
 		entry: settings.entry || {},
 
 		resolve: {
@@ -59,7 +60,7 @@ module.exports = function(/* settings, settings, settings */) {
 		},
 
 		module: {
-			loaders: [
+			rules: [
 				{
 					test: /\.ts$/,
 					loader: 'awesome-typescript-loader',
@@ -74,7 +75,7 @@ module.exports = function(/* settings, settings, settings */) {
 							{
 								pattern: /<%=\s*(\w+)\s*%>/g,
 								replacement: function(match, p1) {
-									return packageConf[p1];
+									return settings.packageConf[p1];
 								}
 							}
 						]
@@ -82,9 +83,11 @@ module.exports = function(/* settings, settings, settings */) {
 				},
 				{
 					test: /\.css$/,
-					loader: ExtractTextPlugin.extract({
-						use: 'css-loader'
-					})
+					loader: ExtractTextPlugin.extract([ 'css-loader' ])
+				},
+				{
+					test: /\.(sass|scss)$/,
+					loader: ExtractTextPlugin.extract([ 'css-loader', 'sass-loader' ])
 				}
 			]
 		},
@@ -92,7 +95,10 @@ module.exports = function(/* settings, settings, settings */) {
 		plugins: [
 			new CheckerPlugin(),
 			new StringReplacePlugin(),
-			new ExtractTextPlugin('[name].css')
+			new ExtractTextPlugin({
+				filename: '[name]', // the module name should already have .css in it!
+				allChunks: true
+			})
 		],
 
 		externals: externals,

tasks/webpack/createCoreConfig.js

@@ -3,8 +3,13 @@ const createConfig = require('./createConfig')
 
 module.exports = function(settings) {
 	return createConfig(settings, {
+		packageConf: require('../../package.json'),
+		outputDir: path.resolve(__dirname, '../../dist'),
+		context: path.resolve(__dirname, '../../src'),
 		entry: {
-			fullcalendar: path.resolve(__dirname, '../../src/main.ts')
+			'fullcalendar': './main.ts',
+			'fullcalendar.css': './main.scss',
+			'fullcalendar.print.css': './common/print.scss'
 		}
 	})
 }

tasks/webpack/createPluginsConfig.js

@@ -3,10 +3,13 @@ const createConfig = require('./createConfig')
 
 module.exports = function(settings) {
 	return createConfig(settings, {
+		packageConf: require('../../package.json'),
+		outputDir: path.resolve(__dirname, '../../dist'),
 		tsconfig: path.resolve(__dirname, '../../plugins/tsconfig.json'),
+		context: path.resolve(__dirname, '../../plugins'),
+		useExternalCore: true,
 		entry: {
-			gcal: path.resolve(__dirname, '../../plugins/gcal/main.ts')
-		},
-		useExternalCore: true
+			gcal: './gcal/main.ts'
+		}
 	});
 }