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

Problem with columnGap property #1190

Closed
emilsgulbis opened this issue Sep 15, 2017 · 39 comments

Comments

@emilsgulbis
Copy link

commented Sep 15, 2017

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

This comment has been minimized.

Copy link
Owner

commented Sep 15, 2017

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

@emilsgulbis

This comment has been minimized.

Copy link
Author

commented Sep 15, 2017

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

@jgthms

This comment has been minimized.

Copy link
Owner

commented Sep 15, 2017

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.

@jgthms jgthms closed this Sep 15, 2017
@natecox

This comment has been minimized.

Copy link

commented Oct 8, 2017

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

This comment has been minimized.

Copy link

commented Oct 8, 2017

@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

This comment has been minimized.

Copy link

commented Nov 3, 2017

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

@darrenmothersele

This comment has been minimized.

Copy link

commented Nov 4, 2017

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

This comment has been minimized.

Copy link

commented Nov 4, 2017

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

This comment has been minimized.

Copy link

commented Nov 4, 2017

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

@darrenmothersele

This comment has been minimized.

Copy link

commented Nov 4, 2017

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

This comment has been minimized.

Copy link

commented Nov 5, 2017

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

@stewwan

This comment has been minimized.

Copy link

commented Nov 6, 2017

and for those who uses columns like me? =/

@darrenmothersele

This comment has been minimized.

Copy link

commented Nov 6, 2017

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

@stewwan

This comment has been minimized.

Copy link

commented Nov 6, 2017

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

@Knacktus

This comment has been minimized.

Copy link

commented Nov 6, 2017

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

This comment has been minimized.

Copy link

commented Nov 8, 2017

@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

This comment has been minimized.

Copy link

commented Nov 9, 2017

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

This comment has been minimized.

Copy link

commented Nov 9, 2017

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,

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

@stewwan

This comment has been minimized.

Copy link

commented Nov 13, 2017

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

This comment has been minimized.

Copy link

commented Nov 22, 2017

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.

crispinheneise pushed a commit to BoosterStage/bulma that referenced this issue Nov 22, 2017
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

This comment has been minimized.

Copy link

commented Nov 27, 2017

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

This comment has been minimized.

Copy link

commented Nov 27, 2017

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.

bulma-is-variable-removed
bulma-is-variable-new-css

ADTC added a commit to ADTC/bulma that referenced this issue Nov 27, 2017
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

This comment has been minimized.

Copy link

commented Nov 27, 2017

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

This comment has been minimized.

Copy link

commented Nov 27, 2017

@ADTC Not happy with this too..

@jgthms

This comment has been minimized.

Copy link
Owner

commented Nov 27, 2017

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

@jgthms jgthms self-assigned this Nov 27, 2017
@jgthms jgthms reopened this Nov 27, 2017
Repository owner locked and limited conversation to collaborators Nov 27, 2017
@jgthms jgthms closed this in 6176c2c Dec 4, 2017
Repository owner unlocked this conversation Dec 4, 2017
@jgthms

This comment has been minimized.

Copy link
Owner

commented Dec 4, 2017

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

@dmastag

This comment has been minimized.

Copy link

commented Dec 8, 2017

@jgthms where do I put this?

@Smiley01987

This comment has been minimized.

Copy link

commented Dec 17, 2017

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

@emilsgulbis

This comment has been minimized.

Copy link
Author

commented Dec 18, 2017

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

@stewwan

This comment has been minimized.

Copy link

commented Dec 29, 2017

@jgthms could you push version 0.6.3 to github?

@jgthms

This comment has been minimized.

Copy link
Owner

commented Jan 10, 2018

@Smiley01987 This only affects variable columns.

@jgthms

This comment has been minimized.

Copy link
Owner

commented Jan 10, 2018

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:

screen shot 2018-01-10 at 17 11 32

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:

screen shot 2018-01-10 at 17 18 41

After:
screen shot 2018-01-10 at 17 18 00

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!

@stewwan

This comment has been minimized.

Copy link

commented Jan 10, 2018

@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

This comment has been minimized.

Copy link

commented Jan 12, 2018

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

@stewwan

This comment has been minimized.

Copy link

commented Jan 12, 2018

Cool I’ll try

@tillsanders

This comment has been minimized.

Copy link

commented Jan 18, 2018

@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

This comment has been minimized.

Copy link

commented Apr 3, 2018

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

This comment has been minimized.

Copy link

commented May 11, 2018

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.

akicho8 added a commit to akicho8/shogi_web that referenced this issue May 20, 2018
▼columnGapプロパティの問題・Issue#1190・jgthms / bulma
jgthms/bulma#1190 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.