Problem with columnGap property #1190

emilsgulbis · 2017-09-15T06:02:24Z

Hello Bulma'ers!

Just catched this WARNING message when compiling my Sass with Webpack

(Emitted value instead of an instance of Error) postcss-custom-properties: /<project-path>/node_modules/bulma/sass/grid/columns.sass:328:6: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable.is-8 { ... --columnGap: ... })

The text was updated successfully, but these errors were encountered:

jgthms · 2017-09-15T08:08:26Z

That's weird. Why does it need to be scoped to :root?

emilsgulbis · 2017-09-15T08:16:12Z

Seems like this is some https://github.com/postcss/postcss-custom-properties rule -

jgthms · 2017-09-15T08:17:57Z

It currently just aims to provide a future-proof way of using a limited subset (to :root selector)

There's your problem. It's just a warning though. You can ignore it.

natecox · 2017-10-08T01:30:17Z

So I'm seeing this now as well, and it is extremely frustrating to have dozens of warnings pop up at me every time I recompile my code base (which is every time I save any file in my project).

Is this closed as a "wont-fix" issue? It seems like the compiler is trying to warn you of a code smell, and simply ignoring it probably isn't wise.

iamdanthedev · 2017-10-08T10:53:11Z

@emilsgulbis Thanks to your hint to custom-properties I found how to stop postcss from screaming. In postcss.config.js:

module.exports = {
  plugins: {
    'postcss-cssnext': {
      browserslist: [
        "> 1%",
        "last 2 versions"
      ],
      features: {
        customProperties: false
      }
    },
  }
};

matheusdavidson · 2017-11-03T17:54:21Z

These warnings are very annoying.. is this a wont fix?

darrenmothersele · 2017-11-04T15:42:51Z

I'm seeing this too after adding Bulma to an Angular 4/5 CLI project. I can't see an easy way of customising the PostCSS config in Angular CLI.
Any chance of fixing the wanrings?

matheusdavidson · 2017-11-04T16:42:19Z

More and more people will come here to complain about this issue because angular cli updated their postcss options in 1.5 and now it shows many warnings. There is no way to change angular cli postcss options.

Its very easy to fix this, the problem is in grid/columns.sass in the last four lines. The temporary solution i used was remove the for statement and hardcode the values instead of using --columnGap variable.

matheusdavidson · 2017-11-04T16:44:02Z

One last though, its impossible to ignore these warnings, its like 60 lines of warning in your face (console)

darrenmothersele · 2017-11-04T18:25:48Z

One option is to not include the whole of Bulma in your Angular CLI generated project.

Having done ng new with --style=scss followed by yarn add bulma font-awesome. Then inside "styles.scss" I was including Bulma in my project like this:

$fa-font-path : '../node_modules/font-awesome/fonts';
@import '../node_modules/font-awesome/scss/font-awesome';

@import "~bulma";

Instead of importing the whole of Bulma, I change it to this:

$fa-font-path : '../node_modules/font-awesome/fonts';
@import '../node_modules/font-awesome/scss/font-awesome';

@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/_all";
@import "~bulma/sass/elements/_all";
@import "~bulma/sass/components/_all";
// @import "~bulma/sass/grid/_all";
@import "~bulma/sass/layout/_all";

And no warnings!

Of course you no longer have access to any of the Bulma Grid.
But it's a start!
I think we probably need a way of adding custom PostCSS config to Angular CLI generated projects, rather than fixing this in Bulma. Seeing as though it's an issue with PostCSS and not Bulma.

Knacktus · 2017-11-05T06:30:23Z

@matheusdavidson: I guess you could just comment out the whole block.

//.columns.is-variable
//  --columnGap: 0.75rem
//  margin-left: calc(-1 * var(--columnGap))
//  margin-right: calc(-1 * var(--columnGap))
//  .column
//    padding-left: var(--columnGap)
//    padding-right: var(--columnGap)
//  @for $i from 0 through 8
//    &.is-#{$i}
//      --columnGap: $i * 0.25rem

That's my current work-around as I don't use the is-variable functionality.

stewones · 2017-11-06T16:34:24Z

and for those who uses columns like me? =/

darrenmothersele · 2017-11-06T16:53:13Z

@stewwan I'm doing this...

@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/_all";
@import "~bulma/sass/elements/_all";
@import "~bulma/sass/components/_all";
@import "sass/grid/_all";
@import "~bulma/sass/layout/_all";

Where sass/grid is a copy of the Bulma sass/grid folder but with the is-variable section commented out. As mentioned by @Knacktus you can use columns, just not the is-variable functionality.

darrenmothersele · 2017-11-06T16:54:44Z

@stewwan see https://github.com/kendraio/kendraio-example-app/blob/master/src/renderer/sass/styles.scss

stewones · 2017-11-06T16:58:20Z

hey @darrenmothersele thanks. I'll use this workaround =)

Knacktus · 2017-11-06T20:40:45Z

I've just created a complete replacement for the is-variable option:
Not smart, but diligent :-)

//.columns.is-variable
//  --columnGap: 0.75rem
//  margin-left: calc(-1 * var(--columnGap))
//  margin-right: calc(-1 * var(--columnGap))
//  .column
//    padding-left: var(--columnGap)
//    padding-right: var(--columnGap)
//  @for $i from 0 through 8
//    &.is-#{$i}
//      --columnGap: $i * 0.25rem

.columns.is-variable.is-0
  margin-left: 0.0rem
  margin-right: 0.0rem
  .column
    padding-left: 0.0rem
    padding-right: 0.0rem

.columns.is-variable.is-1
  margin-left: -0.25rem
  margin-right: -0.25rem
  .column
    padding-left: 0.25rem
    padding-right: 0.25rem

.columns.is-variable.is-2
  margin-left: -0.5rem
  margin-right: -0.5rem
  .column
    padding-left: 0.5rem
    padding-right: 0.5rem

.columns.is-variable.is-3
  margin-left: -0.75rem
  margin-right: -0.75rem
  .column
    padding-left: 0.75rem
    padding-right: 0.75rem

.columns.is-variable.is-4
  margin-left: -1.0rem
  margin-right: -1.0rem
  .column
    padding-left: 1.0rem
    padding-right: 1.0rem

.columns.is-variable.is-5
  margin-left: -1.25rem
  margin-right: -1.25rem
  .column
    padding-left: 1.25rem
    padding-right: 1.25rem

.columns.is-variable.is-6
  margin-left: -1.5rem
  margin-right: -1.5rem
  .column
    padding-left: 1.5rem
    padding-right: 1.5rem

.columns.is-variable.is-7
  margin-left: -1.75rem
  margin-right: -1.75rem
  .column
    padding-left: 1.75rem
    padding-right: 1.75rem

.columns.is-variable.is-8
  margin-left: -2.0rem
  margin-right: -2.0rem
  .column
    padding-left: 2.0rem
    padding-right: 2.0rem

darrenmothersele · 2017-11-08T12:04:15Z

@stewwan here's another workaround. I created a fork without the is-variable feature. To use it, in your package.json file in the dependencies section remove:

"bulma": "^0.6.1",

and replace with:

"bulma": "https://github.com/darrenmothersele/bulma/tarball/remove-is-variable-feature-0.6.1",

or, if you need the is-variable feature you can use this branch that has @Knacktus' alternative implementation:

"bulma": "https://github.com/darrenmothersele/bulma/tarball/alternative-is-variable-0.6.1",

re-run yarn to get the replacement package.

calebeaires · 2017-11-09T14:12:18Z

Same here when using angular-cli and bulma! @darrenmothersele is there any way to maintain using bulma core but put an fix to this warning withou calling another github account?

darrenmothersele · 2017-11-09T14:23:06Z

Bulma uses a feature that PostCSS can't transpile for older browsers. You need to add PostCSS configuration to tell it to not generate warnings about this.

Angular CLI has no mechanism for overriding/extending the PostCSS configuration.

So, you either have to:

Eject your project from the Angular CLI and add the PostCSS config yourself.

or,

Patch Bulma so it doesn't use the unsupported feature.

There are several ways to achieve (2) in this issue. You can find out how to do (1) at the linked issue in the Angular CLI repo.

stewones · 2017-11-13T14:16:24Z

for those people running in this trouble, I'm using a workaround to keep me able maintenance of bulma across multiple projects.

while it does not have a better solution on the part of angular-cli you can just

npm install --save git://github.com/stewwan/bulma.git

happy coding again

ryenski · 2017-11-22T17:10:05Z

Is this really a wontfix? These warnings are like broken windows. Is there another workaround that doesn't involve ignoring warnings is or commenting out code.

jgthms#1190 (Emitted value instead of an instance of Error) postcss-custom-properties: /<project-path>/node_modules/bulma/sass/grid/columns.sass:328:6: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable.is-8 { ... --columnGap: ... })

ADTC · 2017-11-27T02:22:32Z

Wow, that bad huh?

I'm a Sass noob but I took this as a challenge to learn Sass and came up with this (after a lot of trial and error). It basically does exactly the same thing, but instead of using CSS variables, it uses Sass variables (so the compiled CSS is very basic, doesn't use any variable magic).

@crispinheneise here is the workaround. It fully retains the is-variable class functionality. (Note that the old code is commented out for reference only. It is to be replaced with the new code below.)

//.columns.is-variable
//  --columnGap: 0.75rem
//  margin-left: calc(-1 * var(--columnGap))
//  margin-right: calc(-1 * var(--columnGap))
//  .column
//    padding-left: var(--columnGap)
//    padding-right: var(--columnGap)
//  @for $i from 0 through 8
//    &.is-#{$i}
//      --columnGap: #{$i * 0.25rem}

@mixin columns-is-variable($columnGap: 0.75rem)
  margin-left: #{-1 * $columnGap}
  margin-right: #{-1 * $columnGap}
  .column
    padding-left: $columnGap
    padding-right: $columnGap

.columns.is-variable
  @include columns-is-variable
  @for $i from 0 through 8
    &.is-#{$i}
      @include columns-is-variable($i * 0.25rem)

I think this rewrite is so elegant I want to PR it. But, should I? (EDIT: Done! #1480)

(Fun fact: First ever use of @mixin in Bulma sass. It's awesome; why don't you use it yet?)

@Knacktus the above Sass basically generates what you manually created:

/* Generated CSS (truncated for brevity): */
.columns.is-variable {
  margin-left: -0.75rem;
  margin-right: -0.75rem; }
  .columns.is-variable .column {
    padding-left: 0.75rem;
    padding-right: 0.75rem; }
  .columns.is-variable.is-0 {
    margin-left: 0rem;
    margin-right: 0rem; }
    .columns.is-variable.is-0 .column {
      padding-left: 0rem;
      padding-right: 0rem; }
  .columns.is-variable.is-1 {
    margin-left: -0.25rem;
    margin-right: -0.25rem; }
    .columns.is-variable.is-1 .column {
      padding-left: 0.25rem;
      padding-right: 0.25rem; }
...
  .columns.is-variable.is-7 {
    margin-left: -1.75rem;
    margin-right: -1.75rem; }
    .columns.is-variable.is-7 .column {
      padding-left: 1.75rem;
      padding-right: 1.75rem; }
  .columns.is-variable.is-8 {
    margin-left: -2rem;
    margin-right: -2rem; }
    .columns.is-variable.is-8 .column {
      padding-left: 2rem;
      padding-right: 2rem; }

ADTC · 2017-11-27T04:03:22Z

FWIW, I tried this out in Bulma docs, and sure enough it works perfectly. And it does not depend on browser support of CSS variables.

Instead of depending on CSS variable browser support, use a Sass variable and a Sass mixin to generate regular CSS for the is-variable class. This should increase browser compatibility as well as fix jgthms#1190 where warnings are emitted when using a CSS variable.

ADTC · 2017-11-27T09:46:05Z

I regret to inform that my PR #1480 was rejected as Bulma project maintainer strongly believes in making use of client-side CSS variables over compile-side Sass variables.

In any case, if you want to adopt the Sass-based variation, it's available in my comment above as well as in my fork: https://github.com/ADTC/bulma/tree/issue-1190

calebeaires · 2017-11-27T10:18:46Z

@ADTC Not happy with this too..

jgthms · 2017-11-27T10:25:34Z

Looking into it. I’ll add a flag to enable CSS variables.

jgthms · 2017-12-04T21:05:56Z

You can now disable this feature by setting $variable-columns: false before importing Bulma.

dmastag · 2017-12-08T12:09:12Z

@jgthms where do I put this?

SmailHammour · 2017-12-17T09:13:08Z

@jgthms But what about us who use columns? This doesn't fix anything imho...

emilsgulbis · 2017-12-18T13:06:31Z

Seems like this isn't implemented yet.
It's feature for 0.6.3 but only 0.6.1 is released.

stewones · 2017-12-29T22:23:18Z

@jgthms could you push version 0.6.3 to github?

jgthms · 2018-01-10T17:01:12Z

@Smiley01987 This only affects variable columns.

jgthms · 2018-01-10T17:20:24Z

Ok since some users are still confused, let me explain.

Bulma has a feature called variable gap columns. Here's the source code:

@if $variable-columns
  .columns.is-variable
    --columnGap: 0.75rem
    margin-left: calc(-1 * var(--columnGap))
    margin-right: calc(-1 * var(--columnGap))
    .column
      padding-left: var(--columnGap)
      padding-right: var(--columnGap)
    @for $i from 0 through 8
      &.is-#{$i}
        --columnGap: #{$i * 0.25rem}

This is not the basic Bulma columns, but an experimental feature. It uses CSS Variables. It lives behind the $variable-columns flag, which is a Sass variable.

The problem that @emilsgulbis has encountered is with his Webpack setup. Somewhere in his config, he's using the postcss-custom-properties plugin. What this plugin does is try to replace instances of CSS variables (like var(--color)) with its actual value (like red). I'm saying "try" because it only works with CSS variables scoped to :root. And that's the problem: as you can see in the source code just above, the --columnGap CSS variable lives in the .columns.is-variable scope, not the :root one. It's necessary, otherwise you'd change the gap of all variable gap columns.

Anyway, the problem here comes from the postcss-custom-properties plugin, not Bulma, because scoping to a selector is perfectly valid. This limitation from the plugin is known:

The $variable-columns flag I introduced allows you to disable Bulma's variable gap columns. In your webpack.config.js somewhere you probably have something like this:

plugins: [
  // Specify the resulting CSS filename
  new ExtractTextPlugin('css/app.css'),
  // Stylelint plugin
  new styleLintPlugin({
    configFile: '.stylelintrc',
    context: '',
    files: '**/*.scss',
    syntax: 'scss',
    failOnError: false,
    quiet: false
  })
],

This transforms all .scss files to a single css/app.css file.

Now, in one of those files, you're importing Bulma. To disable the variable columns, just set $variable-columns to false:

$variable-columns: false;

@import "~bulma/bulma";

Before:

After:

To summarize, here are your options:

Disable postcss-custom-properties: I recommended this because CSS variables are well supported by most browsers nowadays, and I don't see why you'd need to make such a replacement. I understand if you need to support older browsers.
Disable Bulma's variable gap columns
Keep both features but live with the warnings

Hope this helps!

stewones · 2018-01-10T17:28:51Z

@jgthms thanks for the clarification. the problem now is that version 0.6.3 is not released in github.

I remember you said that $variable-columns: false; feature would be released in 0.6.3

or it was merged in 0.6.1?

lucax88x · 2018-01-12T17:10:29Z

it's published on 0.6.1, just removed my warnings by setting this variable to false!

stewones · 2018-01-12T17:26:55Z

Cool I’ll try

tillsanders · 2018-01-18T10:59:20Z

@jgthms

Disable Bulma's variable gap columns

I tried that exactly as you described, but it works neither with v0.6.1 nor with v0.6.2.

vlad-bezden · 2018-04-03T12:02:48Z

Here is how I resolved this issue. In my postcss.config.js file I added following code:

const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')

module.exports = {
    plugins: [
        postcssCssNext({
            features: {
                customProperties: {
                    warnings: false
                }
            }
        }),
        postcssImport
    ]
}

TakahiRoyte · 2018-05-11T00:39:08Z

variable solution worked. thanks for the help.

$variable-columns: false;
@import '../node_modules/bulma/bulma';

it would be nice if this issue is mentioned within document. It took several time to figure out.

▼columnGapプロパティの問題・Issue＃1190・jgthms / bulma jgthms/bulma#1190 (comment)

- Check this for more info jgthms/bulma#1190 (comment)

jgthms closed this as completed Sep 15, 2017

natecox mentioned this issue Oct 8, 2017

Getting sass error when including bulme. Using adonuxt. nuxt/nuxt#1670

Closed

darrenmothersele mentioned this issue Nov 4, 2017

postcss-custom-properties warnings when overriding css variables angular/angular-cli#7991

Closed

ADTC mentioned this issue Nov 27, 2017

Fixes #1190 - Use Sass variable and Sass mixin to generate is-variable rules #1480

Closed

jgthms self-assigned this Nov 27, 2017

jgthms reopened this Nov 27, 2017

Repository owner locked and limited conversation to collaborators Nov 27, 2017

jgthms closed this as completed in 6176c2c Dec 4, 2017

Repository owner unlocked this conversation Dec 4, 2017

mbfisher mentioned this issue Jan 12, 2018

Importing bulma css causes postcss-custom-properties error gatsbyjs/gatsby#2354

Closed

gauravtiwari mentioned this issue Jan 21, 2018

Module build failed: Error: Failed to find '~bulma' rails/webpacker#1176

Closed

skalinets mentioned this issue Feb 5, 2018

css warning "variable '--some-var' is undefined" angular/angular-cli#8289

Closed

akicho8 added a commit to akicho8/shogi-extend that referenced this issue May 20, 2018

[chore] bulma.css で postcss の警告がでまくる件を対処

b2363cf

▼columnGapプロパティの問題・Issue＃1190・jgthms / bulma jgthms/bulma#1190 (comment)

anantoghosh mentioned this issue Aug 19, 2018

How can I use Bulma with Gatsby gatsbyjs/gatsby#7438

Closed

gauravmc added a commit to gauravmc/agorium that referenced this issue Mar 13, 2019

Silence Bulma post-css warnings

ebabee5

- Check this for more info jgthms/bulma#1190 (comment)

snyk-bot mentioned this issue Aug 13, 2019

[Snyk] Upgrade bulma from 0.6.2 to 0.7.5 devopsred/gaia#6

Open

snyk-bot mentioned this issue Apr 5, 2020

[Snyk] Upgrade bulma from 0.5.1 to 0.8.0 anikets43/angular-ngrx-socket-frontend#4

Open

snyk-bot mentioned this issue Apr 22, 2020

[Snyk] Upgrade bulma from 0.6.1 to 0.8.1 jwlh/WDI_GROUP_PROJECT#2

Open

Problem with columnGap property #1190

Problem with columnGap property #1190

Comments

emilsgulbis commented Sep 15, 2017 • edited Loading

jgthms commented Sep 15, 2017

emilsgulbis commented Sep 15, 2017

jgthms commented Sep 15, 2017

natecox commented Oct 8, 2017

iamdanthedev commented Oct 8, 2017

matheusdavidson commented Nov 3, 2017

darrenmothersele commented Nov 4, 2017

matheusdavidson commented Nov 4, 2017

matheusdavidson commented Nov 4, 2017

darrenmothersele commented Nov 4, 2017

Knacktus commented Nov 5, 2017 • edited Loading

stewones commented Nov 6, 2017

darrenmothersele commented Nov 6, 2017

darrenmothersele commented Nov 6, 2017

stewones commented Nov 6, 2017

Knacktus commented Nov 6, 2017

darrenmothersele commented Nov 8, 2017 • edited Loading

calebeaires commented Nov 9, 2017

darrenmothersele commented Nov 9, 2017

stewones commented Nov 13, 2017

ryenski commented Nov 22, 2017 • edited Loading

ADTC commented Nov 27, 2017 • edited Loading

ADTC commented Nov 27, 2017

ADTC commented Nov 27, 2017

calebeaires commented Nov 27, 2017

jgthms commented Nov 27, 2017

jgthms commented Dec 4, 2017

dmastag commented Dec 8, 2017

SmailHammour commented Dec 17, 2017 • edited Loading

emilsgulbis commented Dec 18, 2017

stewones commented Dec 29, 2017

jgthms commented Jan 10, 2018

jgthms commented Jan 10, 2018

stewones commented Jan 10, 2018 • edited Loading

lucax88x commented Jan 12, 2018

stewones commented Jan 12, 2018

tillsanders commented Jan 18, 2018

vlad-bezden commented Apr 3, 2018

TakahiRoyte commented May 11, 2018

emilsgulbis commented Sep 15, 2017 •

edited

Loading

Knacktus commented Nov 5, 2017 •

edited

Loading

darrenmothersele commented Nov 8, 2017 •

edited

Loading

ryenski commented Nov 22, 2017 •

edited

Loading

ADTC commented Nov 27, 2017 •

edited

Loading

SmailHammour commented Dec 17, 2017 •

edited

Loading

stewones commented Jan 10, 2018 •

edited

Loading