aphrodite SSR style break on style tag update

Hello the Devs of aphrodite
this is indeed a great lib to write CSS in JS and I am using it in my SSR application created in razzle.
but as I move forward I am having an issue when I a, trying to use another lib that uses aphrodite (older version). the lib function triggers an update in the style data-aphrodite tag and breaks the style (although all is still written in the same style tag).
apart from using the lib event to trigger a style tag change, when I try to edit the style tag the style breaks even then too, although no change has been made to any style from my end.

### server.js

i18n
.use(Backend)
.use(i18nextMiddleware.LanguageDetector)
.init(
{
debug: false,
preload: ['en-US', 'ar-SA'],
ns: ['translations'],
defaultNS: 'translations',
backend: {
loadPath: `${appSrc}/locales/{{lng}}/{{ns}}.json`,
addPath: `${appSrc}/locales/{{lng}}/{{ns}}.missing.json`,
},
keySeparator:"->",
fallbackLng:'en-US',
detection : detectionOption,
},
() => {
server
.disable('x-powered-by')
.use(i18nextMiddleware.handle(i18n))
.use('/locales', express.static(`${appSrc}/locales`))
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.use(require('./static.js'))
.post("/locales/add/:lng/:ns", i18nextMiddleware.missingKeyHandler(i18n))
// .get("/locales/resources.json", i18nextMiddleware.getResourcesHandler(i18n))
.get('/*', (req, res) => {
const extractor = new ChunkExtractor({
statsFile: path.resolve(__dirname + '/loadable-stats.json'),
entrypoints: ['client'],
})
const context = {};
const data = StyleSheetServer.renderStatic(
() => renderToString(









));

if (context.url) {
res.redirect(context.url);
} else {
const initialI18nStore = {};
req.i18n.languages.forEach(l => {
initialI18nStore[l] = req.i18n.services.resourceStore.data[l];
});
const initialLanguage = req.i18n.language;
res.status(200).send(
`






${assets.client.css ? `` : ''}
${extractor.getLinkTags()}
${extractor.getStyleTags()}

${extractor.getScriptTags()}




${process.env.NODE_ENV === 'production' ? `` : ``}


window.renderedClassNames = ${JSON.stringify(data.css.renderedClassNames)};


window.initialI18nStore = JSON.parse('${JSON.stringify(initialI18nStore)}');
window.initialLanguage = '${initialLanguage}';
ReactDOM.render(<App/> , document.getElementById('root'))

${data.css.content}

`
);
}
});
})

### Client.js

const BaseApp = () => {
useSSR(window.initialI18nStore, window.initialLanguage);
return (
}>






);
StyleSheet.rehydrate(window.renderedClassNames);
}
loadableReady(() => {

hydrate(
,
document.getElementById('root')
);
})

if (module.hot) {
module.hot.accept();
}

Start with the SSR entry points shown in server.js, especially StyleSheetServer.renderStatic and the data-aphrodite style tag, then compare them with StyleSheet.rehydrate in Client.js. Reproduce a server-rendered page while the Aphrodite style tag is updated and determine whether hydration or the update causes the break. Done means styles remain correct after the update and client hydration.

Written by the indexing model from the issue text.