Support for extracting CSS

[Dwlad90]

I'd like to ask are you going to add support for extracting CSS?

[layershifter]

Hey, in short: yes 😸 It's the part of the library design.

The long answer: still yes, but it's something complicated 🤔 I will provide more technical details once will have time, but it's more or less the same problem as in atlassian-labs/compiled#722.

P.S. It's relatively easy to implement CSS extraction without chunks supports, but no one will be happy to see 300kb of CSS in a single chunk 💥

[Dwlad90]

Thanks for the answer!
I’d glad when it happened. 👍🏻

[Dwlad90]

Hi @layershifter,
I guess 300Kb file isn’t possible in case with the atomic CSS, that’s why I think it’d be perfect to add optional extracting of CSS. It would give the opportunity to process styles with post processors and browse caching, so the styles loading only at first visit the page. If you have another way to work with post processors I would like to know.

[layershifter]

It's coming (#80) 🚀

It will take some time to find out issues, but I have already tested it on Fluent UI side in Storybook and it works like a charm 💎

[Dwlad90]

Thanks a lot!
I saw your pull request and I’m testing it now in my project. I’ll keep you updated.

[layershifter]

Modules are not published yet, but they are fully buildable. It's not trivial to get it, but following commands should provide some direction for you 😉

• yarn build (to get all packages build)
• cd dist/packages/__PKG__ (jump to artifacts)
• npm pack (to get an archive that can be installed, yarn link may also work instead of this)
• cp __PKG__.tgz __PROJECT_PATH__
• cd __PROJECT_PATH__ && yarn add __PKG__.tgz (install it in your project)

[Dwlad90]

Thanks a lot, I really appreciate your help.

I successfully connected the package with the feature.

Extracting CSS from components works fine, but extracting styles from the page doesn’t work.

Print out the argument sourceCode of the function shouldTransformSourceCode in the file griffelWebpackExtractionLoader.ts:74:

import { makeStyles } from '@griffel/react';

const useClassNames = makeStyles({
  page: {
    color: '#768494',
  },
});

export function ContactUsPage() {
  const classNames = useClassNames();

  return <div className={classNames.page}>ContactUsPage</div>;
}

export default ContactUsPage;

griffel/packages/webpack-extraction-plugin/src/griffelWebpackExtractionLoader.ts

Line 74 in c50ef40

if (!shouldTransformSourceCode(sourceCode)) {

Used packages:
"@nrwl/next": "13.8.6",
"next": "^12.1.0",
"react": "^17.0.2”

If you need more details I’d glad to help.

[layershifter]

@Dwlad90 this might be a problem with config (that is totally unclear without docs 🙄 ), I made a configured repo with latest Next.js: https://github.com/layershifter/griffel-extraction-test

[Dwlad90]

Thanks a lot, great job!
The bug reason was in the order of webpack loaders. I set order like in the example and now everything works perfect!

[layershifter]

Implemented for Webpack, check @griffel/webpack-extraction-plugin.