Skip to content

In CSS with source map, input.origin().column and error.column have wrong values #2035

Open
@mizdra

Description

@mizdra

from: #2034 (comment)

The column should be greater than or equal to 1, but it seems to be 0.

Reproduction

https://stackblitz.com/edit/stackblitz-starters-uatmcsu6?file=index.ts&view=editor

import { CssSyntaxError, parse, ProcessOptions } from 'postcss';
import Concat from 'concat-with-sourcemaps';
import { join } from 'node:path';
import { pathToFileURL } from 'node:url';

const validText = 'a { color: black }';
const invalidText = 'a { color: black ';

const from = join(__dirname, 'build', 'all.css');
const validConcat = new Concat(true, from);
validConcat.add(urlOf('a.css'), validText);

const invalidConcat = new Concat(true, from);
invalidConcat.add(urlOf('a.css'), invalidText);

function urlOf(file: string): string {
  return pathToFileURL(join(__dirname, file)).toString();
}

function parseError(
  css: string,
  opts?: Pick<ProcessOptions, 'from' | 'map'>
): CssSyntaxError {
  try {
    parse(css, opts);
  } catch (e) {
    if (e instanceof CssSyntaxError) {
      return e;
    } else {
      throw e;
    }
  }
  throw new Error('Error was not thrown');
}

console.log('[with sourcemap]');
{
  const css = parse(validConcat.content.toString(), {
    from,
    map: { prev: validConcat.sourceMap },
  });
  console.log('css.source.start.column:', css.source?.start?.column);
  console.log(
    'css.source.input.origin(1, 1).column:',
    // @ts-expect-error
    css.source?.input.origin(1, 1).column
  );

  const error = parseError(invalidConcat.content.toString(), {
    from,
    map: { prev: validConcat.sourceMap },
  });
  console.log('error.column:', error.column);
}

console.log('\n[without sourcemap]');
{
  const css = parse(validText);
  console.log('css.source.start.column:', css.source?.start?.column);
  // `css.source?.input.origin(1, 1)` returns false, so skip logging it
  // console.log('css.source.input.origin(1, 1).column:', css.source?.input.origin(1, 1).column);

  const error = parseError(invalidText);
  console.log('error.column:', error.column);
}
$ ts-node index.ts

[with sourcemap]
css.source.start.column: 1
css.source.input.origin(1, 1).column: 0
error.column: 0

[without sourcemap]
css.source.start.column: 1
error.column: 1

Expected behavior

The following will be output:

[with sourcemap]
css.source.start.column: 1
css.source.input.origin(1, 1).column: 1
error.column: 1

[without sourcemap]
css.source.start.column: 1
error.column: 1

Additional Information

  • I can send the Pull Request to fix this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions