Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sass Compilation Error in 6.3.1 #12039

Closed
3 tasks
bmoellers opened this issue Mar 31, 2020 · 12 comments
Closed
3 tasks

Sass Compilation Error in 6.3.1 #12039

bmoellers opened this issue Mar 31, 2020 · 12 comments
Labels

Comments

@bmoellers
Copy link

What should happen?

I am trying to upgrade my ember project. We include foundation but the newer versions of ember upgraded jQuery and thus broke the current version of foundation. To fix that I updated the version to 6.3.1 however it no longer imports.

Basically we do copy foundation min from the node modules:
new Funnel(new UnwatchedDir('node_modules/foundation-sites/dist/js'), { files: ['foundation.min.js'] })

Then we import that in to our vendor file. This all worked with previous builds.

Our app.scss looks this this:

@import "settings";
@import "foundation";
@include foundation-everything;
@import "globals";

@import "mixins/responsive";
@import "mixins/flex-layout";
@import "mixins/cta-button";
@import "mixins/sprite-helpers";

@import "sprites";
@import "sstfonts";

@import "layout-common-component";

@import "multi-line-buttons";
@import "wizard-buttons";
@import "stacked-buttons";
@import "redeem-code";
@import "info-table";
@import "handle-korra-exception";
@import "scroll-fader";
@import "warning-text";
@import "manage-credit-card";
@import "ember-power-calendar";
@import "modal-dialog";

// This needs the scss extension because component-css generates both a .scss and .css file
@import "pod-styles.scss";

What happens instead?

Now when we import this, it fails with the following.

Sass Syntax Error (SassCompiler) in /Users/bmoellers/GitHub/personal/valkyrie-transact/node_modules/foundation-sites/scss/util/_breakpoint.scss:176:28

Error: Undefined operation: "3 lte null".
on line 176 of node_modules/foundation-sites/scss/util/_breakpoint.scss, in mixin breakpoint
from line 45 of node_modules/foundation-sites/scss/components/_reveal.scss
from line 40 of tmp/sass_compiler-input_base_path-syxudCsS.tmp/app/styles/_foundation.scss
from line 3 of tmp/sass_compiler-input_base_path-syxudCsS.tmp/app/styles/app.scss

  @if $bp != null and ($bp <= $pbp or $dir == down) {

---------------------------^

Possible Solution

...

Test Case and/or Steps to Reproduce (for bugs)

Test Case:

How to reproduce:
1.
2.
3.

Context

Just trying to update to the newest version of ember.

Your Environment

  • Foundation version(s) used:
  • Browser(s) name and version(s):
  • Device, Operating System and version:
  • Link to your project:

Checklist

  • I have read and follow the CONTRIBUTING.md document.
  • There are no other issues similar to this one.
  • The issue title and template are correctly filled.
@DanielRuf
Copy link
Contributor

Hi @bmoellers,

which sass version do you use?
Did you also copy the new scss files including the sass-lists and util files?

Maybe you are missing some files.
See https://unpkg.com/browse/foundation-sites@6.3.1/scss/foundation.scss

@DanielRuf DanielRuf added the scss label Mar 31, 2020
@bmoellers
Copy link
Author

bmoellers commented Mar 31, 2020

Not sure what version of sass that ember-cli-sass version 6.0 includes to be honest. We include the compiled min version of the foundation.js but we include files directly from the node modules in our scss file.

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Third-party libraries
//@import 'bower_components/foundation-sites/scss/vendor/normalize';

// Sass utilities
@import 'node_modules/foundation-sites/scss/util/util';

// Global variables and styles
@import 'node_modules/foundation-sites/scss/global';

// Components
@import 'node_modules/foundation-sites/scss/grid/grid';
@import 'node_modules/foundation-sites/scss/typography/typography';
@import 'node_modules/foundation-sites/scss/forms/forms';
@import 'node_modules/foundation-sites/scss/components/visibility';
@import 'node_modules/foundation-sites/scss/components/float';
@import 'node_modules/foundation-sites/scss/components/button';
@import 'node_modules/foundation-sites/scss/components/button-group';
@import 'node_modules/foundation-sites/scss/components/accordion-menu';
@import 'node_modules/foundation-sites/scss/components/accordion';
@import 'node_modules/foundation-sites/scss/components/badge';
@import 'node_modules/foundation-sites/scss/components/breadcrumbs';
@import 'node_modules/foundation-sites/scss/components/callout';
@import 'node_modules/foundation-sites/scss/components/close-button';
@import 'node_modules/foundation-sites/scss/components/drilldown';
@import 'node_modules/foundation-sites/scss/components/dropdown-menu';
@import 'node_modules/foundation-sites/scss/components/dropdown';
@import 'node_modules/foundation-sites/scss/components/flex-video';
@import 'node_modules/foundation-sites/scss/components/label';
@import 'node_modules/foundation-sites/scss/components/media-object';
@import 'node_modules/foundation-sites/scss/components/menu';
@import 'node_modules/foundation-sites/scss/components/off-canvas';
@import 'node_modules/foundation-sites/scss/components/orbit';
@import 'node_modules/foundation-sites/scss/components/pagination';
@import 'node_modules/foundation-sites/scss/components/progress-bar';
@import 'node_modules/foundation-sites/scss/components/reveal';
@import 'node_modules/foundation-sites/scss/components/slider';
@import 'node_modules/foundation-sites/scss/components/sticky';
@import 'node_modules/foundation-sites/scss/components/switch';
@import 'node_modules/foundation-sites/scss/components/table';
@import 'node_modules/foundation-sites/scss/components/tabs';
@import 'node_modules/foundation-sites/scss/components/title-bar';
@import 'node_modules/foundation-sites/scss/components/top-bar';
@import 'node_modules/foundation-sites/scss/components/thumbnail';
@import 'node_modules/foundation-sites/scss/components/tooltip';

@mixin foundation-everything {
  @include foundation-global-styles;
  // @include foundation-grid;
  @include foundation-flex-grid;
  @include foundation-typography;
  @include foundation-button;
  @include foundation-forms;
  @include foundation-visibility-classes;
  @include foundation-float-classes;
  // @include foundation-accordion;
  // @include foundation-accordion-menu;
  // @include foundation-badge;
  // @include foundation-breadcrumbs;
  // @include foundation-button-group;
  @include foundation-callout;
  // @include foundation-close-button;
  // @include foundation-drilldown-menu;
  // @include foundation-dropdown;
  // @include foundation-dropdown-menu;
  // @include foundation-flex-video;
  @include foundation-label;
  // @include foundation-media-object;
  // @include foundation-menu;
  // @include foundation-off-canvas;
  // @include foundation-orbit;
  // @include foundation-pagination;
  // @include foundation-progress-bar;
  // @include foundation-slider;
  // @include foundation-sticky;
  // @include foundation-reveal;
  @include foundation-switch;
  @include foundation-table;
  // @include foundation-tabs;
  // @include foundation-thumbnail;
  // @include foundation-title-bar;
  // @include foundation-tooltip;
  // @include foundation-top-bar;
}

@bmoellers
Copy link
Author

I upgraded to ember-cli-sass version 10 which allows you to use the sass version you want and that is 1.26.3. Still has the same problem.

@DanielRuf
Copy link
Contributor

So this can be ruled out.

The code which returns null is $pbp: index($-zf-breakpoints-keys, $print-breakpoint);.

So it seems the $print-breakpoint is not set or $-zf-breakpoints-keys does not contain it.

You can test the values with @debug $-zf-breakpoints-keys and @debug $print-breakpoint.

@DanielRuf
Copy link
Contributor

These are the default values:

/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
) !default;

/// The largest named breakpoint in which to include print as a media type
/// @type Keyword
$print-breakpoint: large !default;

$-zf-zero-breakpoint: small !default;

$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');

@DanielRuf
Copy link
Contributor

@bmoellers
Copy link
Author

I found our settings file. It did not have a full list of the breakpoints so that was the problem. Of course then I get another breakage because:

Sass Syntax Error (SassCompiler) in /Users/bmoellers/GitHub/personal/valkyrie-transact/node_modules/foundation-sites/scss/util/_color.scss:21:10

Error: $color: foreground(#5887F5) is not a color.

21 │ $rgba: red($color), green($color), blue($color);

So I am not sure where they got the foreground from but I assume it is not defined somewhere.

@DanielRuf
Copy link
Contributor

So I am not sure where they got the foreground from but I assume it is not defined somewhere.

Do you use an old version of the settings file? Also see foundation/foundation-rails#214

You can see it in https://unpkg.com/browse/foundation-sites@6.2.4/scss/settings/_settings.scss but not in https://unpkg.com/browse/foundation-sites@6.3.0/scss/settings/_settings.scss

When you upgrade Foundation Sites you also have to migrate the settings.

@bmoellers
Copy link
Author

I am sure the settings file is old. I checked the history and they reverted changes in it several times after the last foundation update. That was before I was even ever aware of the project. I guess that is the problem with working for a larger company with very strict brand and UX considerations... I can update it and then see what happens or I can try and cherry pick changes. Either way is going to be a lot of work. I do know that if I remove the foreground function it will then compile so that is the last hurdle. I will probably just do a best guess and then work backwards to see what changes are needed. At least I learned to trouble shoot SASS and foundation much better for any future issues.

@DanielRuf
Copy link
Contributor

If you miss anything you can get it from https://unpkg.com/browse/foundation-sites@6.2.4/scss/util/_color.scss and the other files, like the foreground function.

@bmoellers
Copy link
Author

I copied over the settings files and it fixes all the compilation issues. But the main problem is that everything became super small.

image

I noticed the breakpoint sizes changed so I tried setting them back to what was there before but it remains super small. Do you know what possibly changed to control this size change? And what I can do to get it back to the larger size?

@DanielRuf
Copy link
Contributor

Do you mean the global font size? This can be set in the settings too.

You may want to check if the browser window is zoomed or from where the smaller values come from.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants