-
Notifications
You must be signed in to change notification settings - Fork 261
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[wip] Transpile external css #100
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
const foo = 'red' | ||
|
||
export default ( | ||
<style jsx>{` | ||
p { color: ${foo} } | ||
`}</style> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this syntax mean we can't import others from imported styles ? 🤔 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why don't we simply for a template string like: const foo = 'red'
export default `
p { color: ${foo} }
` There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This would be the best api however is not that easy to achieve this because in the consumer file (the one that imports this) we need to hash |
||
) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
const foo = 'red'; | ||
|
||
export default { | ||
'css': `p[data-jsx="3533501187"] {color: ${foo} }`, | ||
'id': '458985232' | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export default () => ( | ||
<div> | ||
<p>test</p> | ||
<style jsx>{`p {color: red }`}</style> | ||
<style jsx src="./external-styles.js" /> | ||
</div> | ||
) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { css as _1290483527_css, id as _1290483527_id } from "./external-styles.js"; | ||
import _JSXStyle from "styled-jsx/style"; | ||
export default (() => <div data-jsx={2454282849}> | ||
<p data-jsx={2454282849}>test</p> | ||
<_JSXStyle styleId={1046845255} css={"p[data-jsx=\"2454282849\"] {color: red }"} /> | ||
<_JSXStyle styleId={_1290483527_id} css={_1290483527_css} /> | ||
</div>); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
need to fix this (and maybe call it
makeImportExternal
) because transpiled (external) stylesheets are exporting a single object (default)