Trouble with gulp-sourcemaps

[gmhenderson]

Hello. I'm experiencing an issue when trying to generate sourcemaps using gulp. The correct file sources are not present in the generated sourcemap.

Working Example (with postcss-easy-import)

src/main.css:

@import 'button.css';

src/button.css:

.button {
    background: blue;
    /* ... */
}

gulpfile.js:

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps')
const postcss = require('gulp-postcss')

gulp.task('postcss', function () {
  return gulp.src('src/main.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
        require('postcss-easy-import')
    ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/'))
})

With output as expected:

build/main.css.map:

{"version":3,"sources":["button.css"],"names":[],"mappings": ... }

Broken Example (with Tailwind)

src/main.css:

@tailwind preflight;
@tailwind components;

.Button {
    @apply .bg-blue .text-white .inline-block .py-2 .px-3 .border-0 .cursor-pointer;
}

@tailwind utilities;

gulpfile.js:

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps')
const postcss = require('gulp-postcss')

gulp.task('postcss', function () {
  var tailwindcss = require('tailwindcss')

  return gulp.src('src/tailwind.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([
      tailwindcss(),
    ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/'))
})

build/main.css.map:

{"version":3,"sources":[<input css 1>","main.css","<no source>"],"names":[],"mappings": ... }

Notice the <input css 1> and <no source>. I expect instead to see Tailwind's preflight.css, components.css, and utilities.css sources listed.

---

Is this an issue with tailwind or does the problem lie elsewhere? I've tried using sourcemaps.init({ loadMaps: true }) but it doesn't seem to make a difference.

Here's a repo that demonstrates the problem:

https://github.com/gmhenderson/tailwindcss-sourcemaps-issue-demo

[adamwathan]

There are no preflight.css, components.css, or utilities.css being used in your case, since you are using the @tailwind directive directly. Those statements are just replaced by generated CSS.

Unfortunately I really don't know enough about sourcemaps to know what actually should happen here or how to solve any problems you're seeing. I feel like there should only be one source here which is main.css since there are no other source files involved at all, but I'm not sure where <input css 1> and <no source> are coming from or what they even mean.

What's the actual problem you experience as a result of this? That might help me better understand what I need to look at and try and improve.

[adamwathan]

I've merged a PR that makes sure to add proper sourcemap information for preflight styles since that was in fact missing, but the sourcemap information for components and utilities was already in place and correct as far as I can tell.

[gmhenderson]

Adam, thanks for the response. The main "problem" is just that the sources aren't labeled correctly when inspecting styles, and I wasn't sure if this was because I had something set up incorrectly, or if there was an issue inside Tailwind.

If I actually click the <input css 1>:103, it still takes me to the correct line in main.css. So I guess it's more of a labeling issue. I also do not know much about sourcemaps. All I can really tell is that the <input css1> and <no source> sources come from Tailwind somewhere :). Not a high-priority problem. Thanks again for checking it out.