Bulma: Problem with columnGap property

[emilsgulbis]

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: ... })

[jgthms]

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

[emilsgulbis]

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

[jgthms]

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]

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]

@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]

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

[darrenmothersele]

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]

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]

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

[darrenmothersele]

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]

@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]

and for those who uses columns like me? =/

[darrenmothersele]

@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]

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

[stewones]

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

[Knacktus]

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]

@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]

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]

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:

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

or,

2) 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]

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

[crispinheneise]

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.

[ADTC]

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]

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.

[ADTC]

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]

@ADTC Not happy with this too..

[jgthms]

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

[jgthms]

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

[dmastag]

@jgthms where do I put this?

[SmailHammour]

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

[emilsgulbis]

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

[stewones]

@jgthms could you push version 0.6.3 to github?

[jgthms]

@Smiley01987 This only affects variable columns.

[jgthms]

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:

1. 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.
2. Disable Bulma's variable gap columns
3. Keep both features but live with the warnings

Hope this helps!

[stewones]

@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]

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

[stewones]

Cool I’ll try

[tillsanders]

@jgthms

1. 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]

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]

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.