{"record":{"id":"56d792d6a2c102db","repo":"dianping/cat","slug":"import-not-allowed-here","errorCode":null,"errorMessage":"@import not allowed here.","messagePattern":"@import not allowed here\\.","errorType":"exception","errorClass":"SyntaxError","httpStatus":null,"severity":"error","filePath":"cat-home/src/main/webapp/assets/js/editor/worker-css.js","lineNumber":2065,"sourceCode":"\n                                } else {\n                                    throw new SyntaxError(\"Unknown @ rule.\", tokenStream.LT(0).startLine, tokenStream.LT(0).startCol);\n                                }\n                                break;\n                            case Tokens.S:\n                                this._readWhitespace();\n                                break;\n                            default:\n                                if(!this._ruleset()){\n                                    switch(tt){\n                                        case Tokens.CHARSET_SYM:\n                                            token = tokenStream.LT(1);\n                                            this._charset(false);\n                                            throw new SyntaxError(\"@charset not allowed here.\", token.startLine, token.startCol);\n                                        case Tokens.IMPORT_SYM:\n                                            token = tokenStream.LT(1);\n                                            this._import(false);\n                                            throw new SyntaxError(\"@import not allowed here.\", token.startLine, token.startCol);\n                                        case Tokens.NAMESPACE_SYM:\n                                            token = tokenStream.LT(1);\n                                            this._namespace(false);\n                                            throw new SyntaxError(\"@namespace not allowed here.\", token.startLine, token.startCol);\n                                        default:\n                                            tokenStream.get();  //get the last token\n                                            this._unexpectedToken(tokenStream.token());\n                                    }\n\n                                }\n                        }\n                    } catch(ex) {\n                        if (ex instanceof SyntaxError && !this.options.strict){\n                            this.fire({\n                                type:       \"error\",\n                                error:      ex,\n                                message:    ex.message,\n                                line:       ex.line,","sourceCodeStart":2047,"sourceCodeEnd":2083,"githubUrl":"https://github.com/dianping/cat/blob/e815e74d4c2dd74edac831241f1253fcc7d25381/cat-home/src/main/webapp/assets/js/editor/worker-css.js#L2047-L2083","documentation":"Thrown when `@import` appears after rules that must follow it: per CSS grammar, `@import` may only occur before any style rules (and after `@charset`). The parser's default branch attempts `_ruleset()`; failing that, if the token is `IMPORT_SYM` it consumes the `@import` (to skip past it) and throws `SyntaxError('@import not allowed here.')` anchored at the `@import` token. Non-strict mode converts the throw into an 'error' event and parsing continues.","triggerScenarios":"`@import url(\"theme.css\");` written after a selector rule, a `@media` block, or another `@import` that follows a ruleset; bundlers that append imported files to the bottom of the output; scaffolded CSS where imports were added below existing styles.","commonSituations":"Developers adding an import at the bottom 'to override styles'; concatenating third-party CSS above project CSS so imports land mid-file; CMS themes injecting content above user CSS that itself starts with `@import`.","solutions":["Move all `@import` statements to the top of the stylesheet, immediately after `@charset` and before the first rule.","Better: replace runtime `@import` with build-time inlining (postcss-import, sass `@use`, bundler CSS pipeline) so ordering constraints vanish.","If imports must cascade late, give them higher specificity (`#id`, layered selectors) instead of a later position.","Validate concatenated output with a linter that flags misplaced `@import` before shipping."],"exampleFix":"/* before */\nbody { margin: 0; }\n@import url(\"reset.css\"); /* @import not allowed here. */\n\n/* after */\n@import url(\"reset.css\");\nbody { margin: 0; }","handlingStrategy":"validation","validationCode":"function importsFirst(css) {\n  var firstRule = css.search(/[^@\\s/][^{]*\\{/); // first char that starts a real rule\n  var lateImport = /@import/.test(css.slice(firstRule));\n  return !lateImport;\n}","typeGuard":null,"tryCatchPattern":"try {\n  parser.parse(css);\n} catch (ex) {\n  if (/@import not allowed/.test(ex.message)) { hoistImports(css).then(parser.parse.bind(parser)); return; }\n  throw ex;\n}","preventionTips":["Replace runtime @import with build-time inlining (postcss-import, bundler).","When imports must come later logically, use specificity/layering, not position.","In concat builds, reorder imports above all rulesets before emitting."],"tags":["css","parser","at-rule","import","syntax-error"],"backgroundTag":null,"analyzedSha":"e815e74d4c2dd74edac831241f1253fcc7d25381","analyzedAt":"2026-08-14T14:22:34.512Z","schemaVersion":2},"datasetVersion":"2026-08-15T17:31:12.345Z"}