NextJS values from config are not working. #76

dawidseipold · 2022-10-08T11:32:45Z

dawidseipold
Oct 8, 2022

Hi, so I just discovered Master CSS and I really like it. However, I just can't seem to make it work with NextJS properly. It works out of the box, but when I try to initialize the custom config, it just ignores it. Here's my code:

src/pages/_document.ts

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { render } from '@master/css/render';
import { StyleSheet } from '@master/css';

export const MyDocument = () => {
  return (
    <Html>
      <Head>
        <script dangerouslySetInnerHTML={{ __html: 'window.MasterCSSManual=true' }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const { css } = render((await ctx.renderPage()).html, { StyleSheet });
  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: (
      <>
        <style id="master-css">{css}</style>
        {initialProps.styles}
      </>
    ),
  };
};

export default MyDocument;

src/styles/master.css.ts

import { init, Style } from '@master/css';

Style.colorSchemes.push('hc');
Style.extend('classes', {
  btn: 'font:14 h:40 h:32.sm text:center bg:red:hover',
  card: 'p:20 b:1|solid|gray-80 bg:white',
});

init();

src/pages/index.ts

import type { NextPageWithLayout } from './_app';

const Home: NextPageWithLayout = () => {
  return (
    <div className="color:yellow-70@test color:red-60@hc color:beryl-60@light color:blue-60@dark btn">
      Hello World!
    </div>
  );
};

export default Home;

For example, in the index file, it just ignores the hc color scheme and default for the first defined one (test in this case). Likewise, it completely ignores the btn class.