"Unclosed block" error when checking nested CSS

[jrom99]

Given a file with the following contents:

div {
    input {
        color: black;
    }
}

The following problem happens

doiuse --browsers "> 1%" test.css 
Error parsing file
file:${MY_NPM_INSTALL}/npm/lib/node_modules/doiuse/bin/cli.js:151
      throw error;
      ^

CssSyntaxError: ${PROJECT_FOLDER}/styles/test.css:1:1: Unclosed block
    at Input.error (${MY_NPM_INSTALL}//npm/lib/node_modules/doiuse/node_modules/postcss/lib/input.js:93:16)
    at Parser.unclosedBlock (${MY_NPM_INSTALL}//npm/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:574:22)
    at Parser.endFile (${MY_NPM_INSTALL}//npm/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:336:35)
    at Parser.parse (${MY_NPM_INSTALL}//npm/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:475:10)
    at parse (${MY_NPM_INSTALL}//npm/lib/node_modules/doiuse/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (${MY_NPM_INSTALL}//share/npm/lib/node_modules/doiuse/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (${MY_NPM_INSTALL}/npm/lib/node_modules/doiuse/node_modules/postcss/lib/processor.js:53:14)
    at RuleUsageTransform._transform (file:${MY_NPM_INSTALL}//npm/lib/node_modules/doiuse/lib/stream/RuleUsageTransform.js:68:29)
    at Transform._write (node:internal/streams/transform:175:8)
    at writeOrBuffer (node:internal/streams/writable:556:12) {
  reason: 'Unclosed block',
  file:  '${PROJECT_FOLDER}/styles/test.css',
  line: 1,
  column: 1,
  input: {
    column: 1,
    endColumn: undefined,
    endLine: undefined,
    line: 1,
    source: 'div {\n    input {\n        color: black;\n    }',
    url: 'file: ${PROJECT_FOLDER}/styles/test.css',
    file: ' ${PROJECT_FOLDER}/styles/test.css'
  }
}

System information

doiuse v6.0.2
Node.js v20.10.0
Ubuntu 23.10

[tjx666]

same issue:

[tjx666]

for anyone wait for solution， you can check: tjx666/react-rspack-boilerplate@458999c#diff-b0ea7199fc1af4f2709c22d43f6c72f3e3160def9e08ac918ba8dff83318396f

[clshortfuse]

It's a valid issue. Nested CSS is commonly supported now:

https://caniuse.com/css-nesting

In the meantime, you flatten the css before checking it with doiuse, much like when working with scss. Perhaps postcss supports this syntax and it's just a matter of updating the dependency.