How can I combine multiple CSS files into one when using wp-scripts?

  • Resolved hannnes

    (@hannnes)


    4 months, 3 weeks ago

    Hi,
    We are developing a block theme with the use of wp-scripts together with Tailwind.
    I’m still trying to figure out how to set everything up correctly, and need some assistance regarding the generated css files.

    Since most blocks (and the theme as a whole) share a lot of tailwind classes, I would like all css to end up in one css file in the build folder.

    Our src folder currently has the flowing structure:

    src/
    ├─ blocks/
    │  ├─ [block name]/
    │  │  ├─ edit.js
    │  │  ├─ index.js
    ├─ css/
    │  ├─ style.css
    │  ├─ edit.css

    edit.js and index.js imports edit.css and style.css respectively.
    I would like for the generated css to be in two css files like this as well, but when I run wp-scripts build I end up with several css files in each blocks folder.

    I think this might be an issue that I can solve by changing the webpack config (I’m using the default right now), but I don’t have enough experience with webpack to know what to change. So any help is appreciated!

    • This topic was modified 4 months, 3 weeks ago by hannnes.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @hannnes,

    You can convert your css file into scss and then import your style (for the frontend) inside the edit file (for the backend) :

    // edit.scss
    @import './style.scss';

    Like that, you have the frontend style in the editor and you can add additional rules for the backend

    Is that you want to do ?

    Thread Starter hannnes

    (@hannnes)

    Sorry, I think I need to explain myself a bit better.

    Let’s say I have two blocks, block1 and block2. If i run wp-scripts build with the file structure above i get the following (I have omitted some files for brevity):

    build/
    ├─ blocks/
    │  ├─ block1/
    │  │  ├─ block.json
    │  │  ├─ index.css
    │  │  ├─ style-index.css
    │  ├─ block2/
    │  │  ├─ block.json
    │  │  ├─ index.css
    │  │  ├─ style-index.css

    What I would like is this:

    build/
    ├─ blocks/
    │  ├─ block1/
    │  │  ├─ block.json
    │  ├─ block2/
    │  │  ├─ block.json
    ├─ css/
    │  ├─ style.css
    │  ├─ edit.css

    Is that possible?

    Hum, Gutenberg doesn’t work this way so each block should be able to load its own css when needen. It’s how the create-block stack is build so I don’t think there is a way to do what you want.

    If you have shared style between block maybe you can create separate css file but you will have to enqueue it manually both in frontend and in editor.

    build/
    ├─ blocks/
    │  ├─ block1/
    │  │  ├─ block.json
    │  │  ├─ index.css
    │  │  ├─ style-index.css
    │  ├─ block2/
    │  │  ├─ block.json
    │  │  ├─ index.css
    │  │  ├─ style-index.css
    src/
    ├─...
    common/
    ├─ style.css
    ├─ editor.css
    my-block-plugin.php

    In the php file, something like that :

    if ( is_admin() ) {
      add_action( 'init', function() {
          add_editor_style( $editor_css_path );
      } )
    }

    if ( ! is_admin() ) {
      add_action( 'wp_print_styles', function() {
        wp_enqueue_style( 'my-block-plugin', $style_css_src, ... )  
      } )
    }

    But this way, you lose the ability of Gutenberg to load style on frontend only when your blocks are present in the page.

    Sorry I don’t see any other possibilities… Hope this help

    Thread Starter hannnes

    (@hannnes)

    I see, thanks.
    I will do some more experimentation and see if I can come up with something

    I have tested something witch seems to work, but you will not be able to compile scss, you will have to use plain css or create your own stack :

    build/
    ├─ block1/
    │  ├─ block.json
    │  ├─ index.js
    ├─ block2/
    │  ├─ block.json
    │  ├─ index.js
    common
    ├─ stlye.css
    src/
    ├─ ...

    In block.json file :

    {
      "$schema": "https://schemas.wp.org/trunk/block.json",
      "apiVersion": 2,
      "name": "block/name",
      "version": "1.0.0",
      ...
      "style": "file:../../common/style.css"
    }
    Thread Starter hannnes

    (@hannnes)

    Finally got something to work. This webpack config compiles the tailwind css to a single style.css in build.

    const defaultConfig = require('@wordpress/scripts/config/webpack.config');

    const cleanedDefaultPlugins = defaultConfig.plugins.filter(
        (plugin) => {
            if (['RtlCssPlugin'].includes(plugin.constructor.name)) {
                return false;
            }
            return true;
        }
    );

    module.exports = {
        ...defaultConfig,
        plugins: [
            ...cleanedDefaultPlugins,
        ],
        optimization: {
            ...defaultConfig.optimization,
            splitChunks: {
                cacheGroups: {
                    styles: {
                        name: "style",
                        type: "css/mini-extract",
                        chunks: "all",
                        enforce: true,
                    },
                },
            },
        },
    };

    Good to know, thank you for the feed back !

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.

Tags