I get undefined [undefined] - how I can debug it

[kbytin]

Hi, thanx for the awesome too 👍 l.

I'm receiving this error, but everything is compiling

app/_styles/styles.sss
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]

I'm using it on another project, and have no problems.

Here is my config, I've switched plugin one by one and on Rucksack error appears again:

postcss: function (webpack) {
    return [
      postCssImport({addDependencyTo: webpack}),
      postCssMixins({
        mixins: styleMixins,
      }),
      postCssNext({
        features: {
          customProperties: {
            variables: styleVars,
          },
          customMedia: {
            extensions: styleMediaQueries,
          },
          customSelectors: {
            extensions: styleSelectors,
          },
          rem: false,
          calc: {
            preserve: true,
          },
        },
      }),
      postCssAssets({
        basePath: 'src/',
        loadPaths: ['assets/'],
        cachebuster: true,
      }),
      rucksack({
        responsiveType: false,
        shorthandPosition: true,
        quantityQueries: false,
        alias: false,
        inputPseudo: true,
        clearFix: false,
        fontPath: false,
        hexRGBA: true,
        easings: true,
        autoprefixer: false,
        fallbacks: false,
      }),
      lostGrid(),
      // postCssLH(),
      // postCssZindex(),
      // postCssFlexbugsFixes(),
      // postCssInitial(),
      // postCssReporter(),
      //production


      // cssnano(),
    ];

style.sss

@import "parts/_font.sss"
@import "parts/_typography.sss"
@import "parts/_links.sss"
@import "parts/_images.sss"
@import "parts/_grid.sss"
@import "parts/_grid--old.sss"
@import "parts/_layout.sss"
@import "parts/_feature.sss"
@import "parts/_buttons.sss"
@import "parts/_select.sss"
@import "parts/_animations.sss"
@import "parts/_placeHolder.sss"

@import "parts/_react-transitions.sss"


@import "npm-modules/_react-redux-modal.sss"
@import "npm-modules/_react-date-time.sss"
@import "npm-modules/_plyr.sss"


@import "views/blog.sss"
@import "views/brandProfile.sss"
@import "views/infoPages.sss"


@import "inuit/_visibility.sss"



//.layout__header,
//.layout__body,
//.layout__footer
//  @mixin vr-rhythm

[madeleineostoja]

Hmm no idea what's going on here, I'm not a webpack user and they look like errors from webpack. Could you try using the plugins individually, or even just disabling all rucksack features to try and narrow down the cause of the problem?

[kbytin]

Yes, I've tried that, the same. But all the plugins is yours, so maybe some function you are using causing this problem. This happens only on file with @imports

[madeleineostoja]

that would suggest an issue with postcss-import. Could you try using that plugin separately, just to see if it's causing the issue?

[kbytin]

postcss-import is working fine, I'm starting to receive these output only if the rucksack in the chain of plugins. I can make screen recording if it helps.

[madeleineostoja]

hmm okay. Will try and look into it soon.

Is the error just noise, or is it actually breaking your build/rucksack? Just to get an idea of the priority for this one.

[laozhu]

Hi, I got the same problem with you @kbytin
I use rucksack-css with postcss-import together, below is my gulp.babel.js configs for css workflow.

'use strict';

import gulp from 'gulp';
import lost from 'lost';
import atImport from 'postcss-import';
import simpleVars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import mixins from 'postcss-mixins';
import propertyLookup from 'postcss-property-lookup';
import rucksack from 'rucksack-css';
import cssnext from 'postcss-cssnext';
import gulpLoadedPlugins from 'gulp-load-plugins';
const $ = gulpLoadedPlugins();

// Styles workflow
gulp.task('styles', ['css:lint'], () => {

  const processors = [
    lost, atImport, mixins, simpleVars, nested, propertyLookup,
    rucksack({ autoprefixer: false, fallbacks: true }),
    cssnext({ warnForDuplicates: false, browsers: ['last 2 versions', '> 1%', 'ie >= 9'] }),
    mqpacker, csswring({ removeAllComments: true })
  ];

  return gulp.src('./src/styles/main.css')
    .pipe($.sourcemaps.init())
    .pipe($.postcss(processors))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/css'));

});

Output of my workflow

wsk (master*) » ./node_modules/.bin/gulp styles
[19:11:11] Requiring external module babel-register
[19:11:13] Using gulpfile ~/Sites/wsk/gulpfile.babel.js
[19:11:13] Starting 'styles'...

src/styles/main.css
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]

src/styles/main.css
undefined [undefined]
undefined [undefined]
undefined [undefined]
undefined [undefined]

[19:11:14] Finished 'styles' after 601 ms

I got 4 lines undefined warnings, but when I set rucksack({ autoprefixer: false }), I got only 4 lines warnings. When I comments rucksack, no warning again.

[jescalan]

So this comes from their recent addition of postcss-reporter, which cannot be disabled, seen here:

https://github.com/simplaio/rucksack/blob/master/index.js#L25

About to submit a PR to disable this by default and enable it with an option, because it's super annoying.