[Styled Components & JSPrettier] import error

[mvllow]

This issue seems to be with Naomi setting a file to CSS in some way that Prettier thinks it is formatting CSS rather than JS. This issue does not happen with babel-sublime. If there is anything I can do to help let me know! Thanks!

Edit: This issue only occurs when saving while your cursor is within styled component code. If you click onto JS code (e.g. the imports) and save, it formats it as JS. Essentially, the issue is that JS is trying to be formatted by JSPrettier as CSS because of how Naomi handles the styled components. Hope this makes sense! This may even be intended behaviour - if so feel free to close this.

Reproduce (this should work with any JS code and JSPrettier installed):

import React from 'react'
import styled from 'styled-components'
import { Flex, Box } from 'rebass'
import theme from '../../theme'

Console error (minimal):

[error] stdin: SyntaxError: (postcss) CssSyntaxError Unknown word (3:10)
[error]   1 | import React from 'react'
[error]   2 | import styled from 'styled-components'
[error] > 3 | import { Flex, Box } from 'rebass'
[error]     |          ^
[error]   4 | import theme from '../../theme'

[coreyward]

Getting this behavior as well.

Overall, I'm finding that using Emotion (or other styled components) with Naomi is a rather confusing experience. Part of the time Emmet will work, part of the time it won't. Adding new CSS properties seems to invalidate the syntax of the entire document until the line is finished and valid, and when there's an invalid syntax many other plugins won't work (possible scoping issue?).

[acnebs]

This pull request for JsPrettier seems to indicate that this fix would be as simple as setting the file type to source.css.embedded.js.