In a{k: v !important;}, the declaration is parsed as:

Declaration {
  prop: 'k',
  important: true,
  value: 'v'
}

But in a{k: v !IMPORTANT;}, the declaration is parsed as:

Declaration {
  prop: 'k',
  value: 'v !IMPORTANT' }
}

Note how in the second case !IMPORTANT is part of value and how the important flag is not set.

CSS is actually mostly case insensitive. Here is the spec mentioning how !important should be parsed case insensitively: https://www.w3.org/TR/css-syntax-3/#consume-a-declaration

If the last two non-<whitespace-token>s in the declaration’s value are a <delim-token> with the value "!" followed by an <ident-token> with a value that is an ASCII case-insensitive match for "important", remove them from the declaration’s value and set the declaration’s important flag to true.

(How did I even find this? I’m working on normalizing lowercase vs uppercase in Prettier, and I noticed that !IMPORTANT wasn’t being normalized to !important because it wasn’t parsed as the important flag in the first place :) )