many invalid css warnings from mochitest

[tromey]

When I run the debugger mochitests I see many warnings of the form:

46 INFO Console message: [JavaScript Warning: "Expected end of value but found ‘!’.  Error in parsing value for ‘width’.  Declaration dropped." {file: "chrome://devtools/content/debugger/new/index.html" line: 0 column: 2 source: "0 !important"}]

@jasonLaster thought this was like a webpack issue in devtools-core, so filing here.

[jasonLaster]

We can remove a lot of warnings by only shipping rules for Firefox with autoprefixer:

https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/webpack.config.js#L123-L126

https://github.com/postcss/autoprefixer#options https://github.com/ai/browserslist#queries

I think something like this would work.

const autoprefixer  = require("autoprefixer")
 webpackConfig.postcss = () => [
    require("postcss-bidirection"),
    isFirefoxPanel() ?  autoprefixer({browser: ["ff >= 54"]}) : autoprefixer
  ];

[jasonLaster]

hmm, this worked... but i still got these errors:

274 INFO Console message: [JavaScript Warning: "Unknown property ‘appearance’.  Declaration dropped." {file: "resource://devtools/client/debugger/new/debugger.css" line: 2935 column: 12 source: "  appearance: none;"}]
275 INFO Console message: [JavaScript Warning: "Unknown property ‘user-select’.  Declaration dropped." {file: "resource://devtools/client/debugger/new/debugger.css" line: 3061 column: 13 source: "  user-select: none;"}]

and some runtime react errors

277 INFO Console message: [JavaScript Warning: "Expected end of value but found ‘!’.  Error in parsing value for ‘width’.  Declaration dropped." {file: "chrome://devtools/content/debugger/new/index.html" line: 0 column: 2 source: "0 !important"}]
278 INFO Console message: [JavaScript Warning: "Expected end of value but found ‘!’.  Error in parsing value for ‘height’.  Declaration dropped." {file: "chrome://devtools/content/debugger/new/index.html" line: 0 column: 2 source: "0 !important"}]
279 INFO Console message: [JavaScript Warning: "Expected end of value but found ‘!’.  Error in parsing value for ‘padding’.  Declaration dropped." {file: "chrome://devtools/content/debugger/new/index.html" line: 0 column: 2 source: "0 !important"}]