Using angular CLI 1.7.0 and SASS breaks the ultima NG build due to non-breaking space

[exalif]

Angular CLI 1.7.0 updated the clean-css dependency.

We need 1.7.0 for other features, so we had to update it.

Our setup of Ultima NG doesn't use bundled theme and layout css in index.html. Instead, we load the UltimaNG scss files in .angular-cli.json. Mainly because it allows us to reuse Ultima/prime mixins and variables in our own sass code.

Code: Select all

"styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/fullcalendar/dist/fullcalendar.min.css",
        "../node_modules/quill/dist/quill.snow.css",
        "assets/theme/theme-cyan.scss",
        "assets/layout/css/layout-cyan.scss",
        "styles.scss"
      ],

Doing so, we have the angular CLI to pass over the UltimaNG native sass files. And "compile" it. But it fails with latest angular CLI version. Resulting in this error:

ultima-ng-5.2.0\node_modules\clean-css\lib\reader\input-source-map-tracker.js:37
if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
^

TypeError: Cannot read property 'line' of undefined
at originalPositionFor (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\reader\input-source-map-tracker.js:37:24)
at originalMetadata (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\tokenizer\tokenize.js:486:43)
at intoTokens (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\tokenizer\tokenize.js:435:68)
at tokenize (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\tokenizer\tokenize.js:74:10)
at fromStyles (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\reader\read-sources.js:147:12)
at fromString (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\reader\read-sources.js:48:10)
at doReadSources (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\reader\read-sources.js:33:12)
at readSources (C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\reader\read-sources.js:24:10)
at C:\Users\World\Downloads\ultima-ng-5.2.0\node_modules\clean-css\lib\clean.js:99:12
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)

This error seems to occur due to invalid SASS form, as reported by this github issue: https://github.com/angular/angular-cli/issues/9313 and especially this comment https://github.com/angular/angular-cli/ ... -360216974

This is due to the fact Ultima NG sometimes writes code with line splitted properties. For example writting something like this breaks the build:

Code: Select all

 transition: 0.2s margin ease-in, 
      .4s opacity ease-in;

or with a Ultima example:

Code: Select all

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/roboto-v15-latin-300.eot"); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url("../fonts/roboto-v15-latin-300.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("../fonts/roboto-v15-latin-300.woff2") format('woff2'), /* Super Modern Browsers */
       url("../fonts/roboto-v15-latin-300.woff") format('woff'), /* Modern Browsers */
       url("../fonts/roboto-v15-latin-300.ttf") format('truetype'), /* Safari, Android, iOS */
       url("../fonts/roboto-v15-latin-300.svg#Roboto") format('svg'); /* Legacy iOS */
}

Please, have premium templates SASS syntax fixed so it becomes standard and compliant with Angular CLI newer versions.

[paulswan]

We also use Ultima theme mixins etc. in our styles.scss file but we achieved this without having to put the theme in the CLI file. What we did was break out the theme variables into a separate file (e.g theme-cyan.scss variables would be in theme-cyan-variables.scss). This allows you to do the following in your styles.scss file:

Code: Select all

@import './assets/theme/theme-cyan-variables';
@import './assets/sass/_variables';
@import './assets/sass/_mixins';

Your theme-cyan.scss file will now look like this:

Code: Select all

@import "theme-cyan-variables";
@import '../sass/theme/_theme';

[exalif]

the problem is not where do we place or import scss files. We should be able to import it in CLI or anywhere we need it with no build break using the angular CLI tool.

[exalif]

I finally managed to find where is the error in UltimaNG scss file. The problem is there is a non-breaking space at a place where it should'nt.

theme/_data.scss. At line 487:

Code: Select all

border-color: $accentColor;

The space after colon is a non-breaking space and it breaks minifiers and optimizers especially clean-css, used in Angular CLI 1.7.0. We can highlight it using VSCode "Highlight bad chars" plugin:



@authors, could you please fix that?