Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update CSS build process (https://github.com/woocommerce/woocommerce-blocks/pull/439) 

* Split apart editor and frontend styles

* Remove the empty JS files after each build

* Pull out editor and style CSS files into two single, separate files
Rename products-grid CSS, add a “global” front end stylesheet

* Update style registration to use these two new global CSS files

* Merge style JS files into vendors before deleting them

* Remove empty file to fix lint error

* Check for file before reading from it

When watching, not all the file stubs are created, so this errors out.
This commit is contained in:
Kelly Dwan 2019-02-19 16:09:36 -05:00 committed by GitHub
parent ecb0f7741b
commit b14a37f7b5
15 changed files with 147 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
plugins/woocommerce-blocks/assets/css/products-grid.scss → plugins/woocommerce-blocks/assets/css/editor.scss
View File

10
plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss Normal file
View File

@ -0,0 +1,10 @@
.wc-block-featured-product {
&.components-placeholder {
// Reset the background for the placeholders.
background-color: rgba( 139, 139, 150, .1 );
}
.components-resizable-box__handle {
z-index: 10;
}
}

1
plugins/woocommerce-blocks/assets/js/blocks/featured-product/index.js
View File

@ -9,6 +9,7 @@ import { registerBlockType } from '@wordpress/blocks';
* Internal dependencies
*/
import './style.scss';
import './editor.scss';
import Block from './block';
/**

9
plugins/woocommerce-blocks/assets/js/blocks/featured-product/style.scss
View File

@ -21,15 +21,6 @@
align-content: center;
}
&.components-placeholder {
// Reset the background for the placeholders.
background-color: rgba( 139, 139, 150, .1 );
}
.components-resizable-box__handle {
z-index: 10;
}
&.has-left-content {
justify-content: flex-start;

0
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/style.scss → plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/editor.scss
View File

2
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js
View File

@ -8,7 +8,7 @@ import { RawHTML } from '@wordpress/element';
/**
* Internal dependencies
*/
import './style.scss';
import './editor.scss';
import Block from './block';
import getShortcode from '../../utils/get-shortcode';
import { IconWidgets } from '../../components/icons';

0
plugins/woocommerce-blocks/assets/js/blocks/product-category/style.scss → plugins/woocommerce-blocks/assets/js/blocks/product-category/editor.scss
View File

2
plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js
View File

@ -8,7 +8,7 @@ import { RawHTML } from '@wordpress/element';
/**
* Internal dependencies
*/
import './style.scss';
import './editor.scss';
import Block from './block';
import getShortcode from '../../utils/get-shortcode';
import sharedAttributes from '../../utils/shared-attributes';

0
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/style.scss → plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/editor.scss
View File

2
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js
View File

@ -9,7 +9,7 @@ import { registerBlockType } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import './style.scss';
import './editor.scss';
import Block from './block';
import getShortcode from '../../utils/get-shortcode';

50
plugins/woocommerce-blocks/bin/merge-extract-files-webpack-plugin.js Normal file
View File

@ -0,0 +1,50 @@
/*eslint-env node*/
/**
* External dependencies
*/
const fs = require( 'fs' );
const path = require( 'path' );
const rimraf = require( 'rimraf' );
const noop = () => {};
const rootPath = path.resolve( __dirname, '../' );
// This is a simple webpack plugin to merge the JS files generated by MiniCssExtractPlugin.
// Despited basically being noop files, they are required to get the real JS files to load,
// silently failing without them.
// See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/147
function MergeExtractFilesPlugin( files = [], output = false ) {
this.files = files;
this.output = output;
}
MergeExtractFilesPlugin.prototype.apply = function( compiler ) {
if ( ! this.output ) {
return;
}
compiler.hooks.afterEmit.tap( 'afterEmit', () => {
this.files.forEach( ( f ) => {
// If we're watching, we might not have created all the file stubs.
if ( ! fs.existsSync( path.resolve( rootPath, f ) ) ) {
return;
}
const content = fs.readFileSync( path.resolve( rootPath, f ) );
try {
fs.appendFileSync(
path.resolve( rootPath, this.output ),
'\n\n' + content
);
// noop silently ignores errors with deleting the file.
rimraf( f, noop );
} catch ( error ) {
console.log( /* eslint-disable-line no-console */
` There was an error merging ${ f } into ${ this.output }`,
error
);
}
} );
} );
};
module.exports = MergeExtractFilesPlugin;

40
plugins/woocommerce-blocks/package-lock.json generated
View File

@ -1208,7 +1208,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@ -1538,6 +1538,7 @@
"@wordpress/keycodes": "2.0.5",
"@wordpress/viewport": "^2.0.7",
"classnames": "^2.2.5",
"core-js": "2.6.3",
"d3-array": "^2.0.0",
"d3-axis": "^1.0.12",
"d3-format": "^1.3.2",
@ -1659,6 +1660,11 @@
"lodash": "^4.17.10"
}
},
"core-js": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.3.tgz",
"integrity": "sha512-l00tmFFZOBHtYhN4Cz7k32VM7vTn3rE2ANjQDxdEN6zmXZ/xq1jQuutnmHvMG1ZJ7xd72+TA5YpUK8wz3rWsfQ=="
},
"react-dates": {
"version": "18.5.0",
"resolved": "https://registry.npmjs.org/react-dates/-/react-dates-18.5.0.tgz",
@ -3255,7 +3261,7 @@
},
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
"resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
"dev": true,
"requires": {
@ -3975,7 +3981,7 @@
},
"browserify-aes": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
"dev": true,
"requires": {
@ -4012,7 +4018,7 @@
},
"browserify-rsa": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true,
"requires": {
@ -4066,7 +4072,7 @@
},
"buffer": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
@ -5023,7 +5029,7 @@
"dependencies": {
"slice-ansi": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
"resolved": "http://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
"integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
"dev": true
}
@ -5360,7 +5366,7 @@
},
"create-hash": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
"dev": true,
"requires": {
@ -5373,7 +5379,7 @@
},
"create-hmac": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
"dev": true,
"requires": {
@ -6091,7 +6097,7 @@
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
"dev": true,
"requires": {
@ -8717,7 +8723,7 @@
"dependencies": {
"minimist": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
"integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
"dev": true
}
@ -12370,7 +12376,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@ -15307,7 +15313,7 @@
},
"react-autosize-textarea": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
"resolved": "http://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-3.0.3.tgz",
"integrity": "sha512-iOSZK7RUuJ+iEwkJ9rqYciqtjQgrG1CCRFL6h8Bk61kODnRyEq4tS74IgXpI1t4S6jBBZVm+6ugaU+tWTlVxXg==",
"dev": true,
"requires": {
@ -15992,12 +15998,12 @@
"dev": true
},
"rimraf": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
"integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
"dev": true,
"requires": {
"glob": "^7.0.5"
"glob": "^7.1.3"
}
},
"ripemd160": {
@ -16261,7 +16267,7 @@
},
"sha.js": {
"version": "2.4.11",
"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
"dev": true,
"requires": {

1
plugins/woocommerce-blocks/package.json
View File

@ -57,6 +57,7 @@
"node-sass": "4.11.0",
"postcss-loader": "3.0.0",
"react-test-renderer": "16.8.2",
"rimraf": "^2.6.3",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"stylelint": "9.10.1",

36
plugins/woocommerce-blocks/webpack.config.js
View File

@ -2,6 +2,7 @@
* External dependencies
*/
const path = require( 'path' );
const MergeExtractFilesPlugin = require( './bin/merge-extract-files-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
const NODE_ENV = process.env.NODE_ENV || 'development';
@ -21,6 +22,15 @@ const externals = {
lodash: 'lodash',
};
function findModuleMatch( module, match ) {
if ( module.request && match.test( module.request ) ) {
return true;
} else if ( module.issuer ) {
return findModuleMatch( module.issuer, match );
}
return false;
}
/**
* Config for compiling Gutenberg blocks JS.
*/
@ -38,7 +48,8 @@ const GutenbergBlocksConfig = {
'product-top-rated': './assets/js/blocks/product-top-rated/index.js',
'products-attribute': './assets/js/blocks/products-by-attribute/index.js',
'featured-product': './assets/js/blocks/featured-product/index.js',
'products-grid': './assets/css/products-grid.scss',
// Global styles
styles: [ './assets/css/editor.scss' ],
},
output: {
path: path.resolve( __dirname, './build/' ),
@ -54,6 +65,24 @@ const GutenbergBlocksConfig = {
name: 'vendors',
chunks: 'all',
},
editor: {
// Capture all `editor` stylesheets and the components stylesheets.
test: ( module = {} ) =>
module.constructor.name === 'CssModule' &&
( findModuleMatch( module, /editor\.scss$/ ) ||
findModuleMatch( module, /[\\/]components[\\/]/ ) ),
name: 'editor',
chunks: 'all',
enforce: true,
priority: 10,
},
style: {
test: /style\.scss$/,
name: 'style',
chunks: 'all',
enforce: true,
priority: 5,
},
},
},
},
@ -91,6 +120,11 @@ const GutenbergBlocksConfig = {
new MiniCssExtractPlugin( {
filename: '[name].css',
} ),
new MergeExtractFilesPlugin( [
'build/editor.js',
'build/style.js',
'build/styles.js',
], 'build/vendors.js' ),
],
};

96
plugins/woocommerce-blocks/woocommerce-gutenberg-products-block.php
View File

@ -92,49 +92,56 @@ function wgpb_register_blocks() {
'woocommerce/handpicked-products',
array(
'editor_script' => 'wc-handpicked-products',
'editor_style' => 'wc-handpicked-products-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
'woocommerce/product-best-sellers',
array(
'editor_script' => 'wc-product-best-sellers',
'editor_style' => 'wc-product-best-sellers-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
'woocommerce/product-category',
array(
'editor_script' => 'wc-product-category',
'editor_style' => 'wc-product-category-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
'woocommerce/product-new',
array(
'editor_script' => 'wc-product-new',
'editor_style' => 'wc-product-new-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
'woocommerce/product-on-sale',
array(
'editor_script' => 'wc-product-on-sale',
'editor_style' => 'wc-product-on-sale-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
'woocommerce/product-top-rated',
array(
'editor_script' => 'wc-product-top-rated',
'editor_style' => 'wc-product-top-rated-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
'woocommerce/products-by-attribute',
array(
'editor_script' => 'wc-products-attribute',
'editor_style' => 'wc-products-attribute-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
register_block_type(
@ -142,7 +149,8 @@ function wgpb_register_blocks() {
array(
'render_callback' => array( 'WC_Block_Featured_Product', 'render' ),
'editor_script' => 'wc-featured-product',
'style' => 'wc-featured-product-editor',
'editor_style' => 'wc-block-editor',
'style' => 'wc-block-style',
)
);
}
@ -187,17 +195,17 @@ function wgpb_register_scripts() {
);
wp_register_style(
'wc-vendors',
plugins_url( 'build/vendors.css', __FILE__ ),
array(),
wgpb_get_file_version( '/build/vendors.css' )
'wc-block-editor',
plugins_url( 'build/editor.css', __FILE__ ),
array( 'wp-edit-blocks' ),
wgpb_get_file_version( '/build/editor.css' )
);
wp_register_style(
'wc-products-grid',
plugins_url( 'build/products-grid.css', __FILE__ ),
array(),
wgpb_get_file_version( '/build/products-grid.css' )
'wc-block-style',
plugins_url( 'build/style.css', __FILE__ ),
array( 'wp-edit-blocks' ),
wgpb_get_file_version( '/build/style.css' )
);
wp_register_script(
@ -208,13 +216,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-handpicked-products-editor',
plugins_url( 'build/handpicked-products.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/handpicked-products.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-handpicked-products', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -227,13 +228,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-product-best-sellers-editor',
plugins_url( 'build/product-best-sellers.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-best-sellers.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-product-best-sellers', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -246,13 +240,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-product-category-editor',
plugins_url( 'build/product-category.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-category.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-product-category', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -265,13 +252,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-product-new-editor',
plugins_url( 'build/product-new.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-new.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-product-new', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -284,13 +264,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-product-on-sale-editor',
plugins_url( 'build/product-on-sale.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-on-sale.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-product-on-sale', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -303,13 +276,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-product-top-rated-editor',
plugins_url( 'build/product-top-rated.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-top-rated.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-product-top-rated', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -322,13 +288,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-featured-product-editor',
plugins_url( 'build/featured-product.css', __FILE__ ),
array( 'wc-vendors' ),
wgpb_get_file_version( '/build/featured-product.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-featured-product', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}
@ -341,13 +300,6 @@ function wgpb_register_scripts() {
true
);
wp_register_style(
'wc-products-attribute-editor',
plugins_url( 'build/products-attribute.css', __FILE__ ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/products-attribute.css' )
);
if ( function_exists( 'wp_set_script_translations' ) ) {
wp_set_script_translations( 'wc-products-attribute', 'woo-gutenberg-products-block', plugin_dir_path( __FILE__ ) . 'languages' );
}