Bulma: Helper class "is-size-*" causes error "invalid property value"

[mygreymatter]

This is a bug related helper class - "is-size-*".

Overview of the problem

I'm using Bulma version [^0.7.2]. I installed it using NPM.

Description

"is-size-*" in the file helper.scss has no defined unit.

Steps to Reproduce

1. Install [email protected] using NPM.
2. Set "is-size-5" to any HTML element.
3. Open web developer tools and search for the HTML element. The error is "invalid property value".
4. The file helper.scss has no unit defined.

Expected behavior

The class should work as intended.

Actual behavior

It causes an error - "invalid property value".

[jgthms]

Do you have a screenshot?

[philippeluickx]

Same here, this is the css I get generated:

.is-size-1 {
  font-size: 18 !important; }

.is-size-2 {
  font-size: 24 !important; }

.is-size-3 {
  font-size: 36 !important; }

.is-size-4 {
  font-size: 48 !important; }

I do see however that in bulma.css there is

.is-size-1 {
  font-size: 3rem !important;
}

I think what OP means is that in this part of the code, there is no "rem" or "px"

https://github.com/jgthms/bulma/blob/0.7.2/sass/base/helpers.sass#L28

=typography-size($target:'')
  @each $size in $sizes
    $i: index($sizes, $size)
    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important

[philippeluickx]

Same problem with title and is-x modifier

[ro31337]

title works for me.

Environment: Ruby on Rails 6, webpacker

[ro31337]

Modified problem rule to:

=typography-size($target:'')
  @warn "Size is:" $sizes;
  @warn "Target is:" $target;
  @each $size in $sizes
    $i: index($sizes, $size)
    @warn "Rule:" is-size-#{$i}#{if($target == '', '', '-' + $target)};
    @warn "Size:" $size; 
    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
      font-size: $size !important

Here is the output:

assets | WARNING: "Size is:" "none", 0, "xxs", 0.125, "xs", 0.25, "sm", 0.5, "md", 1, "lg", 2, "xl", 4, "xxl", 8
assets |          on line 25 of node_modules/bulma/sass/base/helpers.sass, in mixin `typography-size`
assets |          from line 52 of node_modules/bulma/sass/base/helpers.sass, in mixin `@content`
assets |          from line 129 of node_modules/bulma/sass/utilities/mixins.sass, in mixin `fullhd`
assets |          from line 51 of node_modules/bulma/sass/base/helpers.sass
assets |          from line 5 of node_modules/bulma/sass/base/_all.sass
assets |          from line 4 of node_modules/bulma/bulma.sass
assets |          from line 4 of frontend/all.scss
assets |          from line 8 of stdin
assets |
assets | WARNING: "Target is:" "fullhd"
assets |          on line 26 of node_modules/bulma/sass/base/helpers.sass, in mixin `typography-size`
assets |          from line 52 of node_modules/bulma/sass/base/helpers.sass, in mixin `@content`
assets |          from line 129 of node_modules/bulma/sass/utilities/mixins.sass, in mixin `fullhd`
assets |          from line 51 of node_modules/bulma/sass/base/helpers.sass
assets |          from line 5 of node_modules/bulma/sass/base/_all.sass
assets |          from line 4 of node_modules/bulma/bulma.sass
assets |          from line 4 of frontend/all.scss
assets |          from line 8 of stdin
assets |
assets | WARNING: "Rule:" is-size-1-fullhd
assets |          on line 29 of node_modules/bulma/sass/base/helpers.sass, in mixin `typography-size`
assets |          from line 52 of node_modules/bulma/sass/base/helpers.sass, in mixin `@content`
assets |          from line 129 of node_modules/bulma/sass/utilities/mixins.sass, in mixin `fullhd`
assets |          from line 51 of node_modules/bulma/sass/base/helpers.sass
assets |          from line 5 of node_modules/bulma/sass/base/_all.sass
assets |          from line 4 of node_modules/bulma/bulma.sass
assets |          from line 4 of frontend/all.scss
assets |          from line 8 of stdin
assets |
assets | WARNING: "Size:" "none", 0
assets |          on line 30 of node_modules/bulma/sass/base/helpers.sass, in mixin `typography-size`
assets |          from line 52 of node_modules/bulma/sass/base/helpers.sass, in mixin `@content`
assets |          from line 129 of node_modules/bulma/sass/utilities/mixins.sass, in mixin `fullhd`
assets |          from line 51 of node_modules/bulma/sass/base/helpers.sass
assets |          from line 5 of node_modules/bulma/sass/base/_all.sass
assets |          from line 4 of node_modules/bulma/bulma.sass
assets |          from line 4 of frontend/all.scss
assets |          from line 8 of stdin

Why is $size equals to "none", 0 during iteration???

[ro31337]

Confirming the same problem for title:

So seems like for fixing that you should remove bootstrap from your project :) somehow bootstrap overrides $sizes variable.

[ro31337]

Oh no, it's not bootstrap. It's thing thing: https://gist.github.com/VictorOtavio/e0576b755a49ef3682354091c6911dcb#gistcomment-2669676

Finally! Solution is to rename $sizes variable from the snippet above to something else

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.