Jest snapshots @import CSS failing

I am unable to use @import with my current jest setup

npm run test

> test5@0.0.1 test /var/www/test5
> jest

 FAIL  src/components/Menu/index.spec.js
  ● Test suite failed to run

    /var/www/test5/src/components/Menu/style.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "../shared/vars.css";
                                                                                             ^

    SyntaxError: Invalid or unexpected token

       7 | 
       8 | //Styles
    >  9 | import style from './style.css';
      10 | 
      11 | class Menu extends React.Component {
      12 |  constructor (props){

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (src/components/Menu/index.js:9:14)
      at Object.<anonymous> (src/components/Menu/index.spec.js:3:14)

style.css

@import "../shared/vars.css";

.menu {
  background: #322e31;
  color: $wtext;
  width: 80vw;
  max-width: 400px;
  position: fixed;
  right: -80vw;
  top: 0;
  height: 100vh;
  z-index: 3;

  h2,h3 {
    font-size: 16px;
    display: inline-block;
  }
}

package.json

  "jest": {
    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
    "moduleFileExtensions": [
      "js"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/app/"
    ],
    "moduleNameMapper": {
      "moduleNameMapper": {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css)$": "identity-obj-proxy"
      }
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  }