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.

[Dwlad90]

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

Thanks a lot for a package, its a great job!

I was trying to use this package with nextJS using the mini-css-extract-plugin built-in but in its construction I get the following error:

Global CSS cannot be imported from files other than your Custom <App>. Due to the Global natureof stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).

Sandbox: https://codesandbox.io/s/withered-firefly-2ff6m8

I have to add the plugin with certain parameters to the pipeline so it’ll work properly:

new MiniCssExtractPlugin({ // without these Next.js will look for the generated stylesheets from the wrong place filename: "static/chunks/[chunkhash].css", chunkFilename: "static/chunks/[chunkhash].css", ignoreOrder: true, })

Sandbox: https://codesandbox.io/s/hardcore-mendel-9xywyx

Maybe you have an idea how can I use a built-in plugin?

[layershifter]

@Dwlad90 TBH I haven't tested it with Next.js, but I think that we can handle it. Would you mind to create a separate issue for this problem?

P.S. Can you please create sandboxes without Nx? (with raw Next.js to make them simpler)

[pksorensen]

@layershifter - i am experimenting with css extraction. First attempt shows that it works for makeStyles, but the makeStaticStyles seems to not be extracted, atleast javascript have to run before those styles are applied. Trying to figure out why

[layershifter]

@pksorensen indeed, makeStaticStyles() is not supported for AOT/CSS extraction. We don't use it in products, so it was a lot priority for us. Can you please an issue?