Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Address or document 404 on stylesheet during development #1989

Open
retlehs opened this issue Nov 5, 2017 · 4 comments

Comments

Projects
None yet
4 participants
@retlehs
Copy link
Member

commented Nov 5, 2017

i believe that the only place we've talked about how it's currently expected that there is a 404 on main.css during local dev is on roots discourse. it's not on the docs or the readme

related discourse threads:

https://discourse.roots.io/t/consequences-of-absent-main-css-with-yarn-start-sage-9/10755
https://discourse.roots.io/t/sage-9-main-css-404-on-devurl/9799

@retlehs

This comment has been minimized.

Copy link
Member Author

commented Nov 22, 2017

forgot @QWp6t already reported this here: roots/docs#52

leaving open here as well to mention in README

@MWDelaney

This comment has been minimized.

Copy link
Member

commented Sep 1, 2018

I can update the README for the short term but should we investigate writing out to a file?

@a-barbieri

This comment has been minimized.

Copy link

commented Dec 18, 2018

I understood why CSS is not persisted on file system and it's ok, but one downside is that CSS might be loaded after jQuery(document).ready().

I came out with a workaround which works on local development and doesn't affect production. More details here.

Mine is clearly a patch, but I wonder a similar fix should be added by default to avoid frustration with the current webpack/browsersync config.

@sandrowuermli

This comment has been minimized.

Copy link

commented Dec 27, 2018

I thought i'll copy & paste my 'dirty' workaround:

setup.php

/**
 * Theme assets
 */
add_action( 'wp_enqueue_scripts', function() {
    if ( asset_exist( 'styles/main.css' ) ) {
        wp_register_style( 'sage/main.css', asset_path( 'styles/main.css' ), false, asset_version( 'styles/main.css' ) );
        wp_enqueue_style( 'sage/main.css' );
    }

    if ( asset_exist( 'scripts/main.js' ) ) {
        wp_register_script( 'sage/main.js', asset_path( 'scripts/main.js' ), [ 'jquery' ], asset_version( 'scripts/main.js' ), true );
        wp_enqueue_script( 'sage/main.js' );
    }
}, 100 ); // Theme assets

helpers.php


/**
 * Checks if asset exist.
 *
 * @param string $asset Full file path of the asset.
 *
 * @return bool
 */
function asset_exist( $asset ) {
    if ( file_exists( asset_file( $asset ) ) )
        return true;

    return false;
}

/**
 * Retrieve full path to asset file
 *
 * @example /Users/username/Sites/test.ch/web/app/themes/themefolder/dist/styles/main.css
 *
 * @param string $asset Filename including subfolder after 'dist/' like 'styles/main.css'
 *
 * @return string
 */
function asset_file( $asset ) {
    $asset_file     = sage( 'assets' )->get( $asset );
    $asset_filepath = str_replace( 'resources', '', get_stylesheet_directory() ) . "dist/{$asset_file}";

    return $asset_filepath;
}

/**
 * Returns dynamic version, based on file modified date.
 *
 * @param string $asset Filename including subfolder like 'styles/main.css'
 *
 * @return bool|int Modified date as UNIX Timestamp. False if file not exist.
 */
function asset_version( $asset ) {
    $asset_file     = sage( 'assets' )->get( $asset );
    $asset_filepath = get_stylesheet_directory() . "/../dist/{$asset_file}";

    if ( file_exists( $asset_filepath ) )
        return filemtime( $asset_filepath );

    return false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.