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

Can't use inherit value anymore since 0.8.0 #2741

Comments

@marcbelletre
Copy link

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.8.0]

This is a Sass issue: I'm using version [0.8.0]

Description

Before version 0.8.0, we were able to use inherit values for colors. I used to override $text-strong variable so it takes an inherited color instead of a hardcoded one.

$text-strong: inherit

Since 0.8.0, using inherit value for this particular variable throws the following error when compiling with Sass:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

$input-placeholder-color: rgba($input-color, 0.3) !default
                         ^
      $color: inherit is not a color.
  ╷
6 │ $input-placeholder-color: rgba($input-color, 0.3) !default
  │                           ^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/bulma/sass/form/shared.sass 6:27  @import
  node_modules/bulma/sass/form/_all.sass 3:9     @import
  node_modules/bulma/bulma.sass 6:9              @import
  stdin 9:9                                      root stylesheet

I rolled back to Bulma 0.7.5 and Sass compiles without throwing any error.

An issue has been posted about this more than two years ago. @wrabit suggested to use inherit as a workaround but this is not working anymore. #821 (comment)

Steps to Reproduce

  1. Override $text-strong variable with the value inherit
  2. Compile with Sass

Expected behavior

We should be able to use inherit values without Sass throwing an error.

Actual behavior

Sass throws an error when compiling.

@ibdf
Copy link

ibdf commented Dec 16, 2019

I can confirm I have the same issue... same version, same error.

The $input-color inherits from the $text-strong variable and then its value is used in the rgba function that can't accept a non-color value;

$input-placeholder-color: rgba($input-color, 0.3) !default

@marcbelletre
Copy link
Author

Why would $input-color inherit from $text-strong? As per the documentation, $input-color should inherit from $grey-darker so there is also a documentation issue here.

I'm working an a PR to fix this. Thank you @ibdf for your help!

marcbelletre added a commit to marcbelletre/bulma that referenced this issue Dec 17, 2019
Use `$grey-darker` and `$grey` as default instead of `$text-strong` and `$text-light` which may contain the "inherit" value (jgthms#2741)
@jgthms jgthms closed this as completed in 5ba407b Jan 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment