feat(core): add static scss mixin (#940)

Fixes #783

Author: CaerusKaru

package.json

@@ -101,7 +101,6 @@
     "karma-jasmine": "^1.1.2",
     "karma-sauce-launcher": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "madge": "^3.3.0",
     "magic-string": "^0.22.5",
     "merge2": "^1.2.3",
     "minimatch": "^3.0.4",

src/lib/core/sass/_layout-bp.scss

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+
+// Non-overlapping Material Design breakpoints
+// @type map
+$breakpoints: (
+  xs: (
+    begin: 0,
+    end: 599px
+  ),
+  sm: (
+    begin: 600px,
+    end: 959px
+  ),
+  md: (
+    begin: 960px,
+    end: 1279px
+  ),
+  lg: (
+    begin: 1280px,
+    end: 1919px
+  ),
+  xl: (
+    begin: 1920px,
+    end: 5000px
+  ),
+) !default;
+
+// Overlapping breakpoints that are greater than defined
+// Material Design breakpoints
+// @type map
+$overlapping-gt: (
+  xs: 600px,
+  sm: 960px,
+  md: 1280px,
+  lg: 1920px,
+) !default;
+
+// Overlapping breakpoints that are less than defined
+// Material Design breakpoints
+// @type map
+$overlapping-lt: (
+  sm: 599px,
+  md: 959px,
+  lg: 1279px,
+  xl: 1919px,
+) !default;
+
+
+// Media Query Mixin, takes a breakpoint and returns a wrapping
+// media query statement
+// e.g.
+//
+// @include layout-bp(xs) {
+//   background-color: red;
+// }
+//
+// becomes
+//
+// @media (min-width: 0px) and (max-width: 599px) {
+//   background-color: red;
+// }
+@mixin layout-bp($bp) {
+  @if map-has-key($breakpoints, $bp) {
+    $min: map-get(map-get($breakpoints, $bp), begin);
+    $max: map-get(map-get($breakpoints, $bp), end);
+    @media (min-width: $min) and (max-width: $max) { @content; }
+  }
+  @else if map-has-key($overlapping-gt, $bp) {
+    $min: map-get($breakpoints, $bp);
+    @media (min-width: $min) { @content; }
+  }
+  @else if map-has-key($overlapping-lt, $bp) {
+    $max: map-get($breakpoints, $bp);
+    @media (max-width: $max) { @content; }
+  }
+}

stylelint-config.json

@@ -28,8 +28,9 @@
     "shorthand-property-no-redundant-values": true,
 
     "property-case": "lower",
+    "no-duplicate-at-import-rules": true,
 
-    "declaration-block-no-duplicate-properties": [ true, {
+    "declaration-block-no-duplicate-properties": [true, {
       "ignore": ["consecutive-duplicates-with-different-values"]
     }],
     "declaration-block-trailing-semicolon": "always",
@@ -39,8 +40,8 @@
     "declaration-block-semicolon-newline-before": "never-multi-line",
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-property-value-blacklist": [
-      { "/.*/": ["initial"] },
-      { "message": "The `initial` value is not supported in IE."}
+      {"/.*/": ["initial"]},
+      {"message": "The `initial` value is not supported in IE."}
     ],
 
     "block-closing-brace-newline-after": "always",
@@ -61,6 +62,8 @@
     "selector-type-case": "lower",
     "selector-max-id": 0,
     "no-missing-end-of-source-newline": true,
-    "max-line-length": 100
+    "no-eol-whitespace": true,
+    "max-line-length": 100,
+    "linebreaks": "unix"
   }
 }

tools/gulp/tasks/aot.ts

@@ -2,7 +2,7 @@ import {task} from 'gulp';
 import {existsSync} from 'fs';
 import {join} from 'path';
 import {buildConfig, sequenceTask} from 'lib-build-tools';
-import {execTask} from '../util/task_helpers';
+import {execTask} from '../util/task-helpers';
 
 const {outputDir, packagesDir, projectVersion} = buildConfig;
 

tools/gulp/tasks/build-release.ts

@@ -1,6 +1,29 @@
 import {task} from 'gulp';
-import {composeRelease, sequenceTask} from 'lib-build-tools';
+import {mkdirpSync, writeFileSync} from 'fs-extra';
+import {buildConfig, composeRelease, sequenceTask} from 'lib-build-tools';
+import {join} from 'path';
+import {Bundler} from 'scss-bundle';
 import {flexLayoutPackage} from '../packages';
+
+const distDir = buildConfig.outputDir;
+const {sourceDir} = flexLayoutPackage;
+
+/** Path to the directory where all releases are created. */
+const releasesDir = join(distDir, 'releases');
+
+// Path to the release output of material.
+const releasePath = join(releasesDir, 'flex-layout');
+
+// Matches all SCSS files in the different packages. Note that this glob is not used to build
+// the bundle. It's used to identify Sass files that shouldn't be included multiple times.
+const allScssDedupeGlob = join(buildConfig.packagesDir, '**/*.scss');
+
+// The entry-point for the scss theming bundle.
+const themingEntryPointPath = join(sourceDir, 'core', 'sass', '_layout-bp.scss');
+
+// Output path for the scss theming bundle.
+const themingBundlePath = join(releasePath, '_mq.scss');
+
 /**
  * Overwrite the release task for the Flex-Layout package. The Flex-Layout release
  * will include special files, like a bundled theming SCSS file or all prebuilt themes.
@@ -14,6 +37,19 @@ task('flex-layout:build-release', ['flex-layout:prepare-release'], () => {
  * a bundled SCSS file for theming
  */
 task('flex-layout:prepare-release', sequenceTask(
-  'flex-layout:build'
+  ['flex-layout:build'],
+  ['flex-layout:bundle-theming-scss'],
 ));
 
+/** Bundles all scss requires for theming into a single scss file in the root of the package. */
+task('flex-layout:bundle-theming-scss', () => {
+  // Instantiates the SCSS bundler and bundles all imports of the specified entry point SCSS file.
+  // A glob of all SCSS files in the library will be passed to the bundler. The bundler takes an
+  // array of globs, which will match SCSS files that will be only included once in the bundle.
+  return new Bundler().Bundle(themingEntryPointPath, [allScssDedupeGlob]).then(result => {
+    // The release directory is not created yet because the composing of the release happens when
+    // this task finishes.
+    mkdirpSync(releasePath);
+    writeFileSync(themingBundlePath, result.bundledContent);
+  });
+});

tools/gulp/tasks/clean.ts

@@ -1,5 +1,5 @@
 import {task} from 'gulp';
-import {cleanTask} from '../util/task_helpers';
+import {cleanTask} from '../util/task-helpers';
 import {buildConfig} from 'lib-build-tools';
 
 

tools/gulp/tasks/development.ts

@@ -1,5 +1,5 @@
 import {task} from 'gulp';
-import {execTask} from '../util/task_helpers';
+import {execTask} from '../util/task-helpers';
 import {join} from 'path';
 import {
   buildConfig, copyFiles, sequenceTask,  watchFiles

tools/gulp/tasks/hello-world.ts

@@ -2,7 +2,7 @@ import {task} from 'gulp';
 import {existsSync} from 'fs';
 import {join} from 'path';
 import {buildConfig, sequenceTask} from 'lib-build-tools';
-import {execTask} from '../util/task_helpers';
+import {execTask} from '../util/task-helpers';
 
 const {outputDir, packagesDir, projectVersion} = buildConfig;
 

tools/gulp/tasks/lint.ts

@@ -1,51 +1,21 @@
 import {task} from 'gulp';
-import {execNodeTask} from '../util/task_helpers';
-import {join} from 'path';
-import {buildConfig} from 'lib-build-tools';
-import {red} from 'chalk';
-
-// These types lack of type definitions
-const madge = require('madge');
+import {execNodeTask} from '../util/task-helpers';
 
 /** Glob that matches all SCSS or CSS files that should be linted. */
-const stylesGlob = '+(tools|src)/**/!(*.bundle).+(css|scss)';
+const styleGlob = 'src/lib/**/*.+(css|scss)';
 
 /** List of flags that will passed to the different TSLint tasks. */
 const tsLintBaseFlags = ['-c', 'tslint.json', '--project', './tsconfig.json'];
 
-/** Path to the output of the Flex-Layout package. */
-const libOutPath = join(buildConfig.outputDir, 'packages', 'flex-layout');
-
-task('lint', ['tslint', 'stylelint', 'madge']);
-
-
+task('lint', ['tslint', 'stylelint']);
 
-/** Task to lint Angular Flex-Layout's scss stylesheets. */
+/** Task to lint Angular Layout's scss stylesheets. */
 task('stylelint', execNodeTask(
-  'stylelint', [stylesGlob, '--config', 'stylelint-config.json', '--syntax', 'scss']
+  'stylelint', [styleGlob, '--config', 'stylelint-config.json', '--syntax', 'scss']
 ));
 
 /** Task to run TSLint against the e2e/ and src/ directories. */
 task('tslint', execNodeTask('tslint', tsLintBaseFlags));
 
 /** Task that automatically fixes TSLint warnings. */
 task('tslint:fix', execNodeTask('tslint', [...tsLintBaseFlags, '--fix']));
-
-/** Task that runs madge to detect circular dependencies. */
-task('madge', ['flex-layout:clean-build'], () => {
-  madge([libOutPath]).then((res: any) => {
-    const circularModules = res.circular();
-
-    if (circularModules.length) {
-      console.error();
-      console.error(red(`Madge found modules with circular dependencies.`));
-      console.error(formatMadgeCircularModules(circularModules));
-      console.error();
-    }
-  });
-});
-
-/** Returns a string that formats the graph of circular modules. */
-function formatMadgeCircularModules(circularModules: string[][]): string {
-  return circularModules.map((modulePaths: string[]) => `\n - ${modulePaths.join(' > ')}`).join('');
-}

tools/gulp/tasks/publish.ts

@@ -2,7 +2,7 @@ import {spawn} from 'child_process';
 import {existsSync, statSync} from 'fs-extra';
 import {join} from 'path';
 import {task} from 'gulp';
-import {execTask} from '../util/task_helpers';
+import {execTask} from '../util/task-helpers';
 import {buildConfig, sequenceTask} from 'lib-build-tools';
 import {yellow, green, red, grey} from 'chalk';
 import * as minimist from 'minimist';