Clarity: Importing clarity sass variables breaks build

[rjmccluskey]

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Per issue #1956 , clarity's sass variables should be able to be imported and used by importing the following files:

// clr-variables.scss

@import "~@clr/ui/src/color/utils/colors.clarity";
@import "~@clr/ui/src/color/variables.color";
@import "~@clr/ui/src/utils/variables.global";
@import "~@clr/ui/src/typography/variables.typography";

// example.scss

@import "clr-variables.scss";

p {
  color: $clr-red
}

Actual behavior

The Angular project fails to build with the following error message:

ERROR in ./src/app/app.component.scss
Module build failed:
$clr-popover-box-shadow-color: rgba(clr-getColor(dark), 0.25);
                              ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in @clr/ui/src/utils/_variables.global.scss (line 83, column 32)

Reproduction of behavior

https://github.com/rjmccluskey/clarity-sass-import-two

Environment details

• Angular version: 6.0.3

• Clarity version: 0.12.2

• OS and version: macOS 10.13.5

• Browser: all

Other

@hippee-lee I'm tagging you here since you were the one responding on the last related issue.

[gnomeontherun]

There is a configuration change required in angular.json, see themes docs https://vmware.github.io/clarity/documentation/v0.12/themes and the bugfix section of https://vmware.github.io/clarity/news/0.12.0 to see what changed. That should fix it.

[rjmccluskey]

@gnomeontherun Unfortunately that did not fix the problem, please see issue #1956 for more information. I updated the linked repo on this issue with your suggested fix if you want to try it out.

[gnomeontherun]

Dug into this further, and you just aren't including all of the files needed. This can get a little hairy, so really you just need to have your clr-variables.scss file contain the following to get all the variables setup.

@import "~@clr/ui/src/utils/dependencies.clarity";

[rjmccluskey]

Thanks for looking into this further. As mentioned in issue #1956, importing dependencies.clarity unfortunately causes other problems. @hippee-lee was working with me on the last issue and might be able to weigh in on this. My simple example repo is fixed by your solution but a larger project I am working on gets different errors.

I understand that it gets complicated to import all the necessary files. The best solution might be to separate out the sass variables so they are independent but I know that this is not easy to do as mentioned by @hippee-lee before.

[gnomeontherun]

We aren't in a position to reorganize at the moment, so you'll need to look at the order of files inside of the dependencies.clarity.scss file and try to eliminate ones that you don't need from your build.

[rjmccluskey]

Ok thanks I'll give it a try. I'm busy with other work at the moment but when I get back to this I'll update the issue if I'm able to get it working

[gnomeontherun]

Look specifically at the files around the colors section if thats all you need, perhaps you'll need the mixins as well.

[Rush]

I am suffering from the same problem the issue is that doing @import "@clr/ui/src/utils/dependencies.clarity.scss"; does not only pull variables but also styles themselves. If you compile styles in multiple contexts (main css and angular components) this creates a problem of conflicting styles.

[Rush]

One thing which is breaking is this bit from normalize.css:

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; }

It is overriding my header's flex with block

[Rush]

So at least for me the fix was to import the contents of _dependencies except for @import 'bootstrap/scss/normalize';

[rjmccluskey]

@gnomeontherun My team decided to no longer use the clarity sass variables in our code since doing this is not fully supported by clarity. We are instead using a global file with our own variables that have hard coded values aligned with clarity's color/layout styles. Luckily we had already created this global file with our own prefixed variables, but before they pointed to clarity variables, so the refactor was easy enough.

If there are any major style changes in the clarity library we will just update this file instead.

Since the demand to directly reference clarity sass variables seems low, I'd understand if you wanted to close this issue.

[gnomeontherun]

Thanks for the update, and we do hope to resolve this in the future when we refactor our SCSS. Unfortunately that is not a short term priority so this is a good solution and I will close it for now.

[Rush]

Thanks for the update, and we do hope to resolve this in the future when we refactor our SCSS. Unfortunately that is not a short term priority so this is a good solution and I will close it for now.

It's a problem I suffer from and even though this issue won't be solved any time soon, it should be kept open in my opinion. I was able to find it only because it was open.

[gnomeontherun]

I always suggest looking at open and closed issues, because solutions can be found there. GitHub doesn't always make it clear to view the closed issues in my opinion. Keeping issues open is harder for us to maintain when this is not really indicative of what we plan to do (rebuilding the sass, perhaps with CSS variables instead).

The issue here is not importing the right files in the right order, which can be a pain if you need just one variable but the file depends on 5 others. This isn't a supported case for the time being, and the solution is to either review our current sass imports to see what you need to have, or create a separate variables file for your specific items. Follow our theme instructions on our documentation for the way to do custom themes, which we do support.

[Rush]

Any solution to this for 2.0.0?

[mathisscott]

In 2.0, there is no longer a clrGetColor() function. So this specific issue should not be a problem. Overall, many of the dependencies have been cleaned up. Best advice is to give it a shot and open a github issue if you feel like you hit a snag.

[Rush]

@mathisscott I gave it a second shot at upgrading to 2.0.0 ... unfortunately things that were possible with 1.x styles are no longer possible in 2.0.0. See #3444

I really appreciate you working on improving the SCSS but at least from my point of view the refactor has greatly regressed flexibility. I think using the maps was a powerful tool letting Clarity users define custom stuff on top of the framework.

[mathisscott]

Thanks for your feedback, @Rush. I've commented on the issue you opened (#3444) to avoid necro'ing this one.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.