Support import 'css?inline' into raw string

[himself65]

Describe the feature you'd like to request

import style from './style.css?inline';
console.log(style) // '.xxx { }'

Describe the solution you'd like

if CSS file ends with 'inline,' treat it as a raw data

Describe alternatives you've considered

Use raw-loader into the webpack config, but it won't work as expected

[himself65]

In vite 4.0, they support import css as string by add inline in suffix

https://vitejs.dev/blog/announcing-vite4.html#importing-css-as-a-string

[himself65]

Our team is using lit for creating some component, and it will code like this

import style from './style?inline'

@customElement('xxx)
export class XXX extends LitElement {
  static styles = css`
    ${unsafeCSS(style)}

    /* to make it at the center of the container */
    .affine-shape-block-g {
      transform: translate(${SHAPE_PADDING / 2}px, ${SHAPE_PADDING / 2}px);
    }
  `;
// ...
}

in vite, it works well. But not in next.js

[huvber]

Any news on this?

[Jokinen]

I think that I was able to use the raw-loader inline to get the raw text content:

import style from '!!raw-loader!./style';

I had to install raw-loader. In order to make TS work with the inline loader, I had to add a raw-loader.d.ts file as well:

declare module '!!raw-loader!*' {
  const contents: string;
  export = contents;
}

https://stackoverflow.com/a/49235967

May be a suitable workaround for some.

I had an issue with CSP where I had to hash some inlined styles in order to mark them as safe. Not sure if this approach is workable towards that end due to processing done by Next which may lead to changes in style tag's content which in turn change the generated hash.

[sakib412]

Thanks!

But this is not working with turbo 😞 . Works perfectly with webpack (without --turbo flag)

[childrentime]

works fine👍🏿

[mmahalwy]

Any news on this?