Incorporate styled-jsx #420
Conversation
1 similar comment
|
Done |
|
I think we want to fix vercel/styled-jsx#22 before releasing the feature. |
1 similar comment
1 similar comment
1 similar comment
|
Shame I was not aware of this PR. Would have proposed https://github.com/gajus/babel-plugin-react-css-modules. It incorporates CSS modules and it could be used to inline the styles (gajus/babel-plugin-react-css-modules#2). Would there be any interest for a PR? |
|
@gajus how do you keep track of detaching styles in a situation like this: import React from 'react';
import styles from './table.css';
export default class Table extends React.Component {
render () {
return <div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>A0</div>
<div className={styles.cell}>B0</div>
</div>
</div>;
}
}? |
Please provide more details. Not sure of the implications of the above code example to https://github.com/gajus/babel-plugin-react-css-modules. The above example would be written as the following using import React from 'react';
import './table.css';
export default () => {
return <div styleName='table'>
<div styleName='row'>
<div styleName='cell'>A0</div>
<div styleName='cell'>B0</div>
<div styleName='cell'>C0</div>
</div>
</div>;
};or as: import React from 'react';
import table from './table.css';
export default () => {
return <div styleName='table.table'>
<div styleName='table.row'>
<div styleName='table.cell'>A1</div>
<div styleName='table.cell'>B1</div>
<div styleName='table.cell'>C1</div>
</div>
</div>;
};Depending on user preference. |
|
If the component is not included in the page, doesn't the CSS live on, attached to the Since Next is designed around lazy-loading any number of pages throughout a user's session, We use a technique similar to reference counting to ensure there's at most one style present per component, and that it disappears if the component ceases to exist. |
|
Oh, I see what you are referring to. There is no such attempt being made at the moment. It isn't even possible. Style names can be generated dynamically, e.g. Is that a big problem though? |
This adds support for resolving sub-modules into different but similarly-named modules. Before, `import "foo/bar";` would always try to resolve "./bar" in the first "foo" package we could find, be it in `node_modules` or TS's `compilerOptions.baseUrl`. Now, we'll try to resolve it in all "foo" packages we can find. Fixes #420
This PR adds
styled-jsxsupport.It's almost ready but need to wait the fix of vercel/styled-jsx#41