Skip to content

Instantly share code, notes, and snippets.

@ybiquitous
Created March 15, 2022 00:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ybiquitous/eabe11abd1ecb1feae79614ed12502bb to your computer and use it in GitHub Desktop.
Save ybiquitous/eabe11abd1ecb1feae79614ed12502bb to your computer and use it in GitHub Desktop.
PostCSS DeclarationRaws bug reproduction
const postcss = require("postcss");
const src = "a { background: linear-gradient(to right, #fff, #ddd) }";
postcss.parse(src).walkDecls((decl) => {
console.log(decl.raws.value.raw);
});
{
"dependencies": {
"postcss": "8.4.8",
"typescript": "4.6.2"
},
"scripts": {
"tsc": "tsc --noEmit --checkJs --strict --target es2020 --module commonjs *.js",
"test": "npm run tsc && node *.js"
}
}
@ybiquitous
Copy link
Author

ybiquitous commented Mar 15, 2022

Reproduction steps

  1. Run npm i
  2. Run npm t
Output
/tmp/postcss-repro/node_modules/postcss/lib/container.js:57
        throw child.addToError(e)
        ^

TypeError: Cannot read properties of undefined (reading 'raw')
    at <input css aHvZxO>:1:5
    at /tmp/postcss-repro/index.js:5:31
    at /tmp/postcss-repro/node_modules/postcss/lib/container.js:72:18
    at /tmp/postcss-repro/node_modules/postcss/lib/container.js:55:18
    at Rule.each (/tmp/postcss-repro/node_modules/postcss/lib/container.js:41:16)
    at Rule.walk (/tmp/postcss-repro/node_modules/postcss/lib/container.js:52:17)
    at /tmp/postcss-repro/node_modules/postcss/lib/container.js:60:24
    at Root.each (/tmp/postcss-repro/node_modules/postcss/lib/container.js:41:16)
    at Root.walk (/tmp/postcss-repro/node_modules/postcss/lib/container.js:52:17)
    at Root.walkDecls (/tmp/postcss-repro/node_modules/postcss/lib/container.js:70:19)
    at Object.<anonymous> (/tmp/postcss-repro/index.js:4:20) {
  postcssNode: <ref *1> Declaration {
    raws: { before: ' ', between: ': ' },
    type: 'decl',
    parent: <ref *2> Rule {
      raws: { before: '', between: ' ', semicolon: false, after: ' ' },
      type: 'rule',
      nodes: [ [Circular *1] ],
      parent: Root {
        raws: { semicolon: false, after: '' },
        type: 'root',
        nodes: [ [Circular *2] ],
        source: {
          input: Input {
            css: 'a { background: linear-gradient(to right, #fff, #ddd) }',
            hasBOM: false,
            id: '<input css aHvZxO>',
            [Symbol(fromOffsetCache)]: [Array]
          },
          start: { offset: 0, line: 1, column: 1 }
        },
        lastEach: 1,
        indexes: { '1': 0 },
        [Symbol(isClean)]: false,
        [Symbol(my)]: true
      },
      source: {
        start: { offset: 0, line: 1, column: 1 },
        input: Input {
          css: 'a { background: linear-gradient(to right, #fff, #ddd) }',
          hasBOM: false,
          id: '<input css aHvZxO>',
          [Symbol(fromOffsetCache)]: [ 0 ]
        },
        end: { offset: 54, line: 1, column: 55 }
      },
      selector: 'a',
      lastEach: 1,
      indexes: { '1': 0 },
      [Symbol(isClean)]: false,
      [Symbol(my)]: true
    },
    source: {
      start: { offset: 4, line: 1, column: 5 },
      input: Input {
        css: 'a { background: linear-gradient(to right, #fff, #ddd) }',
        hasBOM: false,
        id: '<input css aHvZxO>',
        [Symbol(fromOffsetCache)]: [ 0 ]
      },
      end: { offset: 52, line: 1, column: 53 }
    },
    prop: 'background',
    value: 'linear-gradient(to right, #fff, #ddd)',
    [Symbol(isClean)]: false,
    [Symbol(my)]: true
  }
}

Node.js v17.6.0

Environment

$ npm version
{
  npm: '8.5.3',
  node: '17.6.0',
  v8: '9.6.180.15-node.13',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '102',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '3.0.1+quic',
  cldr: '40.0',
  icu: '70.1',
  tz: '2021a3',
  unicode: '14.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment