From 9d2bc89c3bc04d71bbb83a6b02482ce5b70e4dc1 Mon Sep 17 00:00:00 2001 From: Dennis Snell Date: Tue, 7 Aug 2018 23:18:53 +0200 Subject: [PATCH 01/15] SDK: Explore importing Calypso UI into a Gutenberg extension In this patch I'm doing two things at once to reach the goal of using Calypso UI components: pulling in the UI code and pulling in the styles. As you may note I'm bringing in the entirety of the Calypso styles since the framework styles are monolithic. This has the immediate drawback that the stylesheet is over a megabyte in size, but the immediate advantage that we can import Calypso UI and not have to write it all ourselves. If this turns out to be a good path then we will obviously have to optimize the CSS, which is already in the plans. As the SDK and Calypso framework improves we should see that bundled CSS drop down to very small sizes. Currently the framework isn't ready to split apart the CSS though I'm afraid. --- assets/stylesheets/_components.scss | 2 +- assets/stylesheets/_vendor.scss | 2 +- .../extensions/editor-notes/index.js | 17 ++++++----------- .../extensions/editor-notes/style.scss | 19 ++++--------------- 4 files changed, 12 insertions(+), 28 deletions(-) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 7d57d048a46e70..c6b8743a7dd196 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -7,7 +7,7 @@ // stylesheet order does not matter. // ========================================================================== -@import 'layout/style'; +@import '../../client/layout/style.scss'; @import 'account-recovery/components/account-recovery-error-message/style'; @import 'account-recovery/forgot-username-form/style'; diff --git a/assets/stylesheets/_vendor.scss b/assets/stylesheets/_vendor.scss index e22416be99d032..09a33084dde886 100644 --- a/assets/stylesheets/_vendor.scss +++ b/assets/stylesheets/_vendor.scss @@ -1,7 +1,7 @@ // External Dependencies @import '../../node_modules/react-virtualized/styles'; @import '../../node_modules/draft-js/dist/Draft'; -@import '../../node_modules/notifications-panel/src/boot/stylesheets/style'; +@import '../../node_modules/notifications-panel/src/boot/stylesheets/style.scss'; .gridicon { fill: currentColor; diff --git a/client/gutenberg/extensions/editor-notes/index.js b/client/gutenberg/extensions/editor-notes/index.js index c6d63cce2bc622..65c673a31f6ae8 100644 --- a/client/gutenberg/extensions/editor-notes/index.js +++ b/client/gutenberg/extensions/editor-notes/index.js @@ -5,6 +5,8 @@ */ import { registerBlockType } from '@wordpress/blocks'; import { RichText } from '@wordpress/editor'; +import Card from 'components/card'; +import Ribbon from 'components/ribbon'; import './style.scss'; @@ -14,23 +16,16 @@ const attributes = { }, }; -const edit = ( { attributes: { notes }, className, isSelected, setAttributes } ) => ( -
- { ! isSelected && ( - - - 📔 - - Editor's Notes: hidden from rendered page - - ) } +const edit = ( { attributes: { notes }, className, setAttributes } ) => ( + + Hidden setAttributes( { notes: newNotes } ) } /> -
+ ); const save = () => null; diff --git a/client/gutenberg/extensions/editor-notes/style.scss b/client/gutenberg/extensions/editor-notes/style.scss index ad592dc0fc8548..91c9ef244eee57 100644 --- a/client/gutenberg/extensions/editor-notes/style.scss +++ b/client/gutenberg/extensions/editor-notes/style.scss @@ -1,17 +1,6 @@ -.wp-block-a8c-editor-notes { - border: 2px solid gray; - position: relative; - padding: 32px 6px 6px; - background-color: #c0e7ff; +@import 'assets/stylesheets/style.scss'; - .is-selected { - padding-top: 6px; - } -} - -.editor-notes__editor-indicator { - position: absolute; - top: 0; - left: 8px; - font-style: italic; +.wp-block-a8c-editor-notes__box { + background-color: lighten( $alert-red, 40% ); + border-color: $alert-red; } From 5287c1c39c7f9e04b8119e4e54f110102699428c Mon Sep 17 00:00:00 2001 From: Dennis Snell Date: Sun, 12 Aug 2018 16:08:03 +0200 Subject: [PATCH 02/15] Break apart styles and import granularly Previously we were pulling in the top-level stylesheet from Calypso and we were doing so from the top of the extension code. This pulled in over a megabyte of CSS and required us to be aware of Calypso's styling and style paths. In this change I have updated the `Card` and `Ribbon` components so that they explicitly import their SASS dependencies. This allows us to pull in _only_ the required style when building the extension. The output dropped from a megabyte to three kilobytes. --- client/components/card/index.jsx | 2 ++ client/components/card/style.scss | 4 ++++ client/components/ribbon/index.jsx | 2 ++ client/components/ribbon/style.scss | 10 +++++++--- .../gutenberg/extensions/editor-notes/style.scss | 2 +- webpack.config.node.js | 16 ++++++++++++++++ 6 files changed, 32 insertions(+), 4 deletions(-) diff --git a/client/components/card/index.jsx b/client/components/card/index.jsx index 143931d4d52fda..d7cbb196fdf2ee 100644 --- a/client/components/card/index.jsx +++ b/client/components/card/index.jsx @@ -8,6 +8,8 @@ import classNames from 'classnames'; import Gridicon from 'gridicons'; import PropTypes from 'prop-types'; +import './style.scss'; + const getClassName = ( { className, compact, displayAsLink, highlight, href, onClick } ) => classNames( 'card', diff --git a/client/components/card/style.scss b/client/components/card/style.scss index 1270df1ec87414..80f4806f182067 100644 --- a/client/components/card/style.scss +++ b/client/components/card/style.scss @@ -1,3 +1,7 @@ +@import '../../../assets/stylesheets/shared/_colors.scss'; +@import '../../../assets/stylesheets/shared/mixins/_breakpoints.scss'; +@import '../../../assets/stylesheets/shared/mixins/_clear-fix.scss'; + .card { display: block; position: relative; diff --git a/client/components/ribbon/index.jsx b/client/components/ribbon/index.jsx index f98f8406905222..8ca286cb0f6dbf 100644 --- a/client/components/ribbon/index.jsx +++ b/client/components/ribbon/index.jsx @@ -7,6 +7,8 @@ import React from 'react'; import classNames from 'classnames'; +import './style.scss'; + export default props => (
Date: Tue, 14 Aug 2018 14:44:16 +0300 Subject: [PATCH 03/15] Include sass utilities globally and namespace only imported Calypso components --- bin/sdk/gutenberg.js | 5 ++- client/components/card/style.scss | 4 -- client/components/ribbon/style.scss | 10 ++--- .../extensions/editor-notes/index.js | 2 +- .../extensions/editor-notes/style.scss | 2 - webpack.config.js | 38 ++++++++++++------- 6 files changed, 32 insertions(+), 29 deletions(-) diff --git a/bin/sdk/gutenberg.js b/bin/sdk/gutenberg.js index b1779ecd35cfc5..b02e7962d8b615 100644 --- a/bin/sdk/gutenberg.js +++ b/bin/sdk/gutenberg.js @@ -8,7 +8,10 @@ exports.config = ( { argv: { editorScript, viewScript, outputDir, outputEditorFile, outputViewFile }, getBaseConfig, } ) => { - const baseConfig = getBaseConfig( { externalizeWordPressPackages: true } ); + const baseConfig = getBaseConfig( { + externalizeWordPressPackages: true, + namespaceSDK: 'calypso', + } ); const name = path.basename( path.dirname( editorScript ).replace( /\/$/, '' ) ); return { diff --git a/client/components/card/style.scss b/client/components/card/style.scss index 80f4806f182067..1270df1ec87414 100644 --- a/client/components/card/style.scss +++ b/client/components/card/style.scss @@ -1,7 +1,3 @@ -@import '../../../assets/stylesheets/shared/_colors.scss'; -@import '../../../assets/stylesheets/shared/mixins/_breakpoints.scss'; -@import '../../../assets/stylesheets/shared/mixins/_clear-fix.scss'; - .card { display: block; position: relative; diff --git a/client/components/ribbon/style.scss b/client/components/ribbon/style.scss index 968bc8a658cac3..8e4acfe1ff89b7 100644 --- a/client/components/ribbon/style.scss +++ b/client/components/ribbon/style.scss @@ -1,7 +1,3 @@ -/** @format */ - -@import '../../../assets/stylesheets/shared/_colors.scss'; - .ribbon { position: absolute; right: -5px; @@ -29,7 +25,7 @@ text-transform: uppercase; } .ribbon .ribbon__title::before { - content: ''; + content: ""; position: absolute; left: 0px; top: 100%; @@ -40,7 +36,7 @@ border-top: 3px solid $blue-dark; } .ribbon .ribbon__title::after { - content: ''; + content: ""; position: absolute; right: 0; top: 100%; @@ -53,7 +49,7 @@ .ribbon.is-green { .ribbon__title { - background-color: $alert-green; + background-color: $alert-green } .ribbon__title::before { border-left-color: darken( $alert-green, 20% ); diff --git a/client/gutenberg/extensions/editor-notes/index.js b/client/gutenberg/extensions/editor-notes/index.js index 65c673a31f6ae8..a12503170df2e8 100644 --- a/client/gutenberg/extensions/editor-notes/index.js +++ b/client/gutenberg/extensions/editor-notes/index.js @@ -17,7 +17,7 @@ const attributes = { }; const edit = ( { attributes: { notes }, className, setAttributes } ) => ( - + Hidden * * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function} * - * @param {object} env additional config options - * @param {boolean} env.externalizeWordPressPackages whether to bundle or extern the `@wordpress/` packages - * @param {object} argv given by webpack? - * - * @return {object} webpack config + * @param {object} env environment options + * @param {string} env.namespaceSDK set by bin/sdk/gutenberg.js when building Gutenberg extensions + * @return {object} webpack config */ -// eslint-disable-next-line no-unused-vars -function getWebpackConfig( { externalizeWordPressPackages = false } = {}, argv ) { +function getWebpackConfig( { namespaceSDK = '' } = {} ) { const webpackConfig = { bail: ! isDevelopment, context: __dirname, @@ -178,7 +183,13 @@ function getWebpackConfig( { externalizeWordPressPackages = false } = {}, argv ) }, { test: /\.(sc|sa|c)ss$/, - use: [ + include: path.join( __dirname, 'client/gutenberg' ), + use: _.compact( [ MiniCssExtractPlugin.loader, 'css-loader', sassLoader ] ), + }, + { + test: /\.(sc|sa|c)ss$/, + exclude: path.join( __dirname, 'client/gutenberg' ), + use: _.compact( [ MiniCssExtractPlugin.loader, 'css-loader', { @@ -190,13 +201,12 @@ function getWebpackConfig( { externalizeWordPressPackages = false } = {}, argv ) ] ), }, }, - { - loader: 'sass-loader', - options: { - includePaths: [ path.join( __dirname, 'client' ) ], - }, + namespaceSDK && { + loader: 'namespace-css-loader', + options: `.${ namespaceSDK }`, }, - ], + sassLoader, + ] ), }, { test: /extensions[\/\\]index/, From bbaed3539fbe05e64a0953a46f891c08f14fe653 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 14 Aug 2018 15:06:52 +0300 Subject: [PATCH 04/15] Load shared/utils also in webpack.config.node.js --- webpack.config.node.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/webpack.config.node.js b/webpack.config.node.js index 8046644ebd303e..a57b3868dea8c5 100644 --- a/webpack.config.node.js +++ b/webpack.config.node.js @@ -137,14 +137,11 @@ const webpackConfig = { test: /\.(sc|sa|c)ss$/, use: _.compact( [ 'css-loader', - // extensionName && { - // loader: 'namespace-css-loader', - // options: `.${ extensionName }`, // Just the namespace class - // }, { loader: 'sass-loader', options: { includePaths: [ path.join( __dirname, 'client' ) ], + data: `@import '${ path.join( __dirname, 'assets/stylesheets/shared/utils' ) }';`, }, }, ] ), From 99df4ea10ff9f9fa555b11555ad223f9752c4ab9 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 10:23:59 +0300 Subject: [PATCH 05/15] Remove globals and keep namespacing --- bin/sdk-cli.js | 2 +- bin/sdk/gutenberg.js | 4 +- client/components/card/style.scss | 2 + client/components/ribbon/style.scss | 2 + .../extensions/editor-notes/style.scss | 2 + npm-shrinkwrap.json | 418 +++++++++++++----- package.json | 1 + webpack.config.js | 64 +-- 8 files changed, 350 insertions(+), 145 deletions(-) diff --git a/bin/sdk-cli.js b/bin/sdk-cli.js index b1f26bd904d0aa..6b0f954d2c1a3b 100755 --- a/bin/sdk-cli.js +++ b/bin/sdk-cli.js @@ -42,7 +42,7 @@ const getBaseConfig = ( options = {} ) => { }; const build = ( target, argv ) => { - const config = target.config( { argv, getBaseConfig } ); + const config = target.config( { argv, getBaseConfig, __rootDir } ); const compiler = webpack( config ); // watch takes an additional argument, adjust accordingly diff --git a/bin/sdk/gutenberg.js b/bin/sdk/gutenberg.js index b02e7962d8b615..7390d57d0d8ccc 100644 --- a/bin/sdk/gutenberg.js +++ b/bin/sdk/gutenberg.js @@ -7,10 +7,12 @@ const path = require( 'path' ); exports.config = ( { argv: { editorScript, viewScript, outputDir, outputEditorFile, outputViewFile }, getBaseConfig, + __rootDir } ) => { const baseConfig = getBaseConfig( { externalizeWordPressPackages: true, - namespaceSDK: 'calypso', + stylesNamespacing: 'calypso', + stylesNamespacingExclude: path.join( __rootDir, 'client', 'gutenberg' ), } ); const name = path.basename( path.dirname( editorScript ).replace( /\/$/, '' ) ); diff --git a/client/components/card/style.scss b/client/components/card/style.scss index 1270df1ec87414..fb49748ce9252f 100644 --- a/client/components/card/style.scss +++ b/client/components/card/style.scss @@ -1,3 +1,5 @@ +@import '../../../assets/stylesheets/shared/_utils.scss'; + .card { display: block; position: relative; diff --git a/client/components/ribbon/style.scss b/client/components/ribbon/style.scss index 8e4acfe1ff89b7..5d639787f13dac 100644 --- a/client/components/ribbon/style.scss +++ b/client/components/ribbon/style.scss @@ -1,3 +1,5 @@ +@import '../../../assets/stylesheets/shared/_utils.scss'; + .ribbon { position: absolute; right: -5px; diff --git a/client/gutenberg/extensions/editor-notes/style.scss b/client/gutenberg/extensions/editor-notes/style.scss index 499801ba280cc5..18bf9b91ed5b59 100644 --- a/client/gutenberg/extensions/editor-notes/style.scss +++ b/client/gutenberg/extensions/editor-notes/style.scss @@ -1,3 +1,5 @@ +@import '../../../../assets/stylesheets/shared/_colors.scss'; + .wp-block-a8c-editor-notes__box { background-color: lighten( $alert-red, 40% ); border-color: $alert-red; diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 043e3eb059310c..3c6fbbd4fb4fe2 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -3806,6 +3806,27 @@ "randomfill": "^1.0.3" } }, + "css": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.3.tgz", + "integrity": "sha512-0W171WccAjQGGTKLhw4m2nnl0zPHUlTO/I8td4XzJgIB8Hg3ZZx71qT4G4eX8OVsSiaAKiUMy73E3nsbPlg2DQ==", + "requires": { + "inherits": "^2.0.1", + "source-map": "^0.1.38", + "source-map-resolve": "^0.5.1", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.1.43", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", + "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=", + "requires": { + "amdefine": ">=0.0.4" + } + } + } + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3873,6 +3894,14 @@ } } }, + "css-parse": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", + "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", + "requires": { + "css": "^2.0.0" + } + }, "css-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", @@ -3942,6 +3971,14 @@ } } }, + "css-stringify": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/css-stringify/-/css-stringify-2.0.0.tgz", + "integrity": "sha1-LvM9z0mMPT7oK9c9CgGsKGKM0Po=", + "requires": { + "css": "^2.0.0" + } + }, "css-tree": { "version": "1.0.0-alpha25", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz", @@ -6334,21 +6371,25 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "optional": true }, "are-we-there-yet": { "version": "1.1.4", - "bundled": true, + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", + "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", "optional": true, "requires": { "delegates": "^1.0.0", @@ -6357,11 +6398,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", - "bundled": true, + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6369,29 +6412,35 @@ }, "chownr": { "version": "1.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz", + "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "optional": true }, "code-point-at": { "version": "1.1.0", - "bundled": true + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", - "bundled": true + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "optional": true }, "debug": { "version": "2.6.9", - "bundled": true, + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "optional": true, "requires": { "ms": "2.0.0" @@ -6399,22 +6448,26 @@ }, "deep-extend": { "version": "0.5.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz", + "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "optional": true }, "delegates": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "optional": true }, "detect-libc": { "version": "1.0.3", - "bundled": true, + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, "fs-minipass": { "version": "1.2.5", - "bundled": true, + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", + "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "optional": true, "requires": { "minipass": "^2.2.1" @@ -6422,12 +6475,14 @@ }, "fs.realpath": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "optional": true }, "gauge": { "version": "2.7.4", - "bundled": true, + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { "aproba": "^1.0.3", @@ -6442,7 +6497,8 @@ }, "glob": { "version": "7.1.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "optional": true, "requires": { "fs.realpath": "^1.0.0", @@ -6455,12 +6511,14 @@ }, "has-unicode": { "version": "2.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "optional": true }, "iconv-lite": { "version": "0.4.21", - "bundled": true, + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz", + "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", "optional": true, "requires": { "safer-buffer": "^2.1.0" @@ -6468,7 +6526,8 @@ }, "ignore-walk": { "version": "3.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", + "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "optional": true, "requires": { "minimatch": "^3.0.4" @@ -6476,7 +6535,8 @@ }, "inflight": { "version": "1.0.6", - "bundled": true, + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { "once": "^1.3.0", @@ -6485,39 +6545,46 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", - "bundled": true, + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "requires": { "number-is-nan": "^1.0.0" } }, "isarray": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "optional": true }, "minimatch": { "version": "3.0.4", - "bundled": true, + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.2.4", - "bundled": true, + "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", + "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6525,7 +6592,8 @@ }, "minizlib": { "version": "1.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz", + "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==", "optional": true, "requires": { "minipass": "^2.2.1" @@ -6533,19 +6601,22 @@ }, "mkdirp": { "version": "0.5.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "requires": { "minimist": "0.0.8" } }, "ms": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "optional": true }, "needle": { "version": "2.2.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz", + "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==", "optional": true, "requires": { "debug": "^2.1.2", @@ -6555,7 +6626,8 @@ }, "node-pre-gyp": { "version": "0.10.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz", + "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==", "optional": true, "requires": { "detect-libc": "^1.0.2", @@ -6572,7 +6644,8 @@ }, "nopt": { "version": "4.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "optional": true, "requires": { "abbrev": "1", @@ -6581,12 +6654,14 @@ }, "npm-bundled": { "version": "1.0.3", - "bundled": true, + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz", + "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==", "optional": true }, "npm-packlist": { "version": "1.1.10", - "bundled": true, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz", + "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==", "optional": true, "requires": { "ignore-walk": "^3.0.1", @@ -6595,7 +6670,8 @@ }, "npmlog": { "version": "4.1.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { "are-we-there-yet": "~1.1.2", @@ -6606,33 +6682,39 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "optional": true }, "once": { "version": "1.4.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "requires": { "wrappy": "1" } }, "os-homedir": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "optional": true }, "os-tmpdir": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "optional": true }, "osenv": { "version": "0.1.5", - "bundled": true, + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "optional": true, "requires": { "os-homedir": "^1.0.0", @@ -6641,17 +6723,20 @@ }, "path-is-absolute": { "version": "1.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "optional": true }, "process-nextick-args": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "optional": true }, "rc": { "version": "1.2.7", - "bundled": true, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz", + "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", "optional": true, "requires": { "deep-extend": "^0.5.1", @@ -6662,14 +6747,16 @@ "dependencies": { "minimist": { "version": "1.2.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "optional": true } } }, "readable-stream": { "version": "2.3.6", - "bundled": true, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "optional": true, "requires": { "core-util-is": "~1.0.0", @@ -6683,7 +6770,8 @@ }, "rimraf": { "version": "2.6.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz", + "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "optional": true, "requires": { "glob": "^7.0.5" @@ -6691,36 +6779,43 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" }, "safer-buffer": { "version": "2.1.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "optional": true }, "sax": { "version": "1.2.4", - "bundled": true, + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "optional": true }, "semver": { "version": "5.5.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", + "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", "optional": true }, "set-blocking": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "optional": true }, "signal-exit": { "version": "3.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "optional": true }, "string-width": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6729,7 +6824,8 @@ }, "string_decoder": { "version": "1.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "optional": true, "requires": { "safe-buffer": "~5.1.0" @@ -6737,19 +6833,22 @@ }, "strip-ansi": { "version": "3.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "^2.0.0" } }, "strip-json-comments": { "version": "2.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "optional": true }, "tar": { "version": "4.4.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz", + "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==", "optional": true, "requires": { "chownr": "^1.0.1", @@ -6763,12 +6862,14 @@ }, "util-deprecate": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "optional": true }, "wide-align": { "version": "1.1.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", + "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", "optional": true, "requires": { "string-width": "^1.0.2" @@ -6776,11 +6877,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.2", - "bundled": true + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", + "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=" } } }, @@ -10502,6 +10605,31 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=" }, + "namespace-css": { + "version": "git+https://github.com/jeffling/namespace-css.git#10b40d25a09e04c24a424b906613afb93f080d8e", + "from": "git+https://github.com/jeffling/namespace-css.git", + "requires": { + "css-parse": "~2.0.0", + "css-stringify": "~2.0.0", + "minimist": "1.1.0", + "traverse": "~0.6.6" + }, + "dependencies": { + "minimist": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.0.tgz", + "integrity": "sha1-zfIl6ImPhAolje1E/JF3Z3Cv3JM=" + } + } + }, + "namespace-css-loader": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/namespace-css-loader/-/namespace-css-loader-0.0.3.tgz", + "integrity": "sha1-Pgqsuc4tIIw65t+qYKgriL4nDlE=", + "requires": { + "namespace-css": "git+https://github.com/jeffling/namespace-css.git#10b40d25a09e04c24a424b906613afb93f080d8e" + } + }, "nan": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz", @@ -10912,17 +11040,20 @@ "dependencies": { "ansi-regex": { "version": "2.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true }, "code-point-at": { "version": "1.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, "cross-spawn": { "version": "5.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", + "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { "lru-cache": "^4.0.1", @@ -10932,12 +11063,14 @@ }, "decamelize": { "version": "1.2.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", "dev": true }, "execa": { "version": "0.7.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", + "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", "dev": true, "requires": { "cross-spawn": "^5.0.1", @@ -10951,7 +11084,8 @@ }, "find-up": { "version": "2.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", + "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", "dev": true, "requires": { "locate-path": "^2.0.0" @@ -10959,22 +11093,26 @@ }, "get-caller-file": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz", + "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=", "dev": true }, "get-stream": { "version": "3.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", "dev": true }, "invert-kv": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", + "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", "dev": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "requires": { "number-is-nan": "^1.0.0" @@ -10982,17 +11120,20 @@ }, "is-stream": { "version": "1.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "dev": true }, "isexe": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, "lcid": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", + "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", "dev": true, "requires": { "invert-kv": "^1.0.0" @@ -11000,7 +11141,8 @@ }, "locate-path": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", + "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", "dev": true, "requires": { "p-locate": "^2.0.0", @@ -11009,7 +11151,8 @@ }, "lru-cache": { "version": "4.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", + "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==", "dev": true, "requires": { "pseudomap": "^1.0.2", @@ -11018,7 +11161,8 @@ }, "mem": { "version": "1.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz", + "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=", "dev": true, "requires": { "mimic-fn": "^1.0.0" @@ -11026,17 +11170,20 @@ }, "mimic-fn": { "version": "1.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz", + "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg=", "dev": true }, "minimist": { "version": "0.0.8", - "bundled": true, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true }, "mkdirp": { "version": "0.5.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { "minimist": "0.0.8" @@ -11044,7 +11191,8 @@ }, "npm-run-path": { "version": "2.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", + "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", "dev": true, "requires": { "path-key": "^2.0.0" @@ -11052,12 +11200,14 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, "os-locale": { "version": "2.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz", + "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==", "dev": true, "requires": { "execa": "^0.7.0", @@ -11067,17 +11217,20 @@ }, "p-finally": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", + "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", "dev": true }, "p-limit": { "version": "1.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.1.0.tgz", + "integrity": "sha1-sH/y2aXYi+yAYDWJWiurZqJ5iLw=", "dev": true }, "p-locate": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", + "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", "dev": true, "requires": { "p-limit": "^1.1.0" @@ -11085,37 +11238,44 @@ }, "path-exists": { "version": "3.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", "dev": true }, "path-key": { "version": "2.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", + "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=", "dev": true }, "pseudomap": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", "dev": true }, "require-directory": { "version": "2.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", "dev": true }, "require-main-filename": { "version": "1.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", + "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", "dev": true }, "set-blocking": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true }, "shebang-command": { "version": "1.2.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", + "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", "dev": true, "requires": { "shebang-regex": "^1.0.0" @@ -11123,17 +11283,20 @@ }, "shebang-regex": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", + "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=", "dev": true }, "signal-exit": { "version": "3.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, "string-width": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { "code-point-at": "^1.0.0", @@ -11143,7 +11306,8 @@ }, "strip-ansi": { "version": "3.0.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "requires": { "ansi-regex": "^2.0.0" @@ -11151,12 +11315,14 @@ }, "strip-eof": { "version": "1.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, "which": { "version": "1.3.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz", + "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==", "dev": true, "requires": { "isexe": "^2.0.0" @@ -11164,12 +11330,14 @@ }, "which-module": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", + "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", "dev": true }, "wrap-ansi": { "version": "2.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { "string-width": "^1.0.1", @@ -11178,17 +11346,20 @@ }, "y18n": { "version": "3.2.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", "dev": true }, "yallist": { "version": "2.1.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", "dev": true }, "yargs": { "version": "10.0.3", - "bundled": true, + "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.0.3.tgz", + "integrity": "sha512-DqBpQ8NAUX4GyPP/ijDGHsJya4tYqLQrjPr95HNsr1YwL3+daCfvBwg7+gIC6IdJhR2kATh3hb61vjzMWEtjdw==", "dev": true, "requires": { "cliui": "^3.2.0", @@ -11207,12 +11378,14 @@ "dependencies": { "ansi-regex": { "version": "3.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, "cliui": { "version": "3.2.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", + "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "dev": true, "requires": { "string-width": "^1.0.1", @@ -11222,7 +11395,8 @@ "dependencies": { "string-width": { "version": "1.0.2", - "bundled": true, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "requires": { "code-point-at": "^1.0.0", @@ -11234,7 +11408,8 @@ }, "string-width": { "version": "2.1.1", - "bundled": true, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { "is-fullwidth-code-point": "^2.0.0", @@ -11243,12 +11418,14 @@ "dependencies": { "is-fullwidth-code-point": { "version": "2.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", "dev": true }, "strip-ansi": { "version": "4.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { "ansi-regex": "^3.0.0" @@ -11260,7 +11437,8 @@ }, "yargs-parser": { "version": "8.0.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.0.0.tgz", + "integrity": "sha1-IdR2Mw5agieaS4gTRb8GYQLiGcY=", "dev": true, "requires": { "camelcase": "^4.1.0" @@ -11268,7 +11446,8 @@ "dependencies": { "camelcase": { "version": "4.1.0", - "bundled": true, + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", + "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", "dev": true } } @@ -16794,6 +16973,11 @@ "resolved": "https://registry.npmjs.org/tracekit/-/tracekit-0.4.5.tgz", "integrity": "sha512-LAb1udnpvhpgcx6/gmv7s6RO5lBwQGgAT/1VW0egSNSMvH/3xU3xKLoJ3pc+nkJ5AMv9qgTBnCkrUzbrHmCLpg==" }, + "traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "tree-kit": { "version": "0.5.27", "resolved": "https://registry.npmjs.org/tree-kit/-/tree-kit-0.5.27.tgz", diff --git a/package.json b/package.json index a28c99c75b407e..d22d76bf0cc2f7 100644 --- a/package.json +++ b/package.json @@ -134,6 +134,7 @@ "mkdirp": "0.5.1", "moment": "2.22.2", "morgan": "1.9.0", + "namespace-css-loader": "0.0.3", "node-sass": "4.9.3", "notifications-panel": "2.2.3", "npm-run-all": "4.1.3", diff --git a/webpack.config.js b/webpack.config.js index 1e25690e70e1c7..baf6b05eeb41a2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -74,11 +74,24 @@ const babelLoader = { }, }; +const preSassLoaders = [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'postcss-loader', + options: { + plugins: _.compact( [ + require( 'autoprefixer' ), + ! isDevelopment && require( 'cssnano' ), + ] ), + }, + }, +]; + const sassLoader = { loader: 'sass-loader', options: { includePaths: [ path.join( __dirname, 'client' ) ], - data: `@import '${ path.join( __dirname, 'assets/stylesheets/shared/utils' ) }';`, }, }; @@ -113,11 +126,20 @@ const wordpressExternals = ( context, request, callback ) => * * @see {@link https://webpack.js.org/configuration/configuration-types/#exporting-a-function} * - * @param {object} env environment options - * @param {string} env.namespaceSDK set by bin/sdk/gutenberg.js when building Gutenberg extensions - * @return {object} webpack config + * `env` params are typically set by files in `bin/sdk/*` + * + * @param {object} env environment options + * @param {boolean} env.externalizeWordPressPackages whether to bundle or extern the `@wordpress/` packages + * @param {string} env.stylesNamespacing prefix styles with CSS class or ID + * @param {string} env.stylesNamespacingExclude paths to exlude from namespacing when `stylesNamespacing` is defined + * + * @return {object} webpack config */ -function getWebpackConfig( { namespaceSDK = '' } = {} ) { +function getWebpackConfig( { + stylesNamespacingExclude = '', + externalizeWordPressPackages = false, + stylesNamespacing = '', +} = {} ) { const webpackConfig = { bail: ! isDevelopment, context: __dirname, @@ -159,7 +181,7 @@ function getWebpackConfig( { namespaceSDK = '' } = {} ) { // avoids this warning: // https://github.com/localForage/localForage/issues/577 noParse: /[\/\\]node_modules[\/\\]localforage[\/\\]dist[\/\\]localforage\.js$/, - rules: [ + rules: _.compact( [ { test: /\.jsx?$/, exclude: /node_modules[\/\\](?!notifications-panel)/, @@ -183,31 +205,21 @@ function getWebpackConfig( { namespaceSDK = '' } = {} ) { }, { test: /\.(sc|sa|c)ss$/, - include: path.join( __dirname, 'client/gutenberg' ), - use: _.compact( [ MiniCssExtractPlugin.loader, 'css-loader', sassLoader ] ), - }, - { - test: /\.(sc|sa|c)ss$/, - exclude: path.join( __dirname, 'client/gutenberg' ), + exclude: stylesNamespacingExclude, use: _.compact( [ - MiniCssExtractPlugin.loader, - 'css-loader', - { - loader: 'postcss-loader', - options: { - plugins: _.compact( [ - require( 'autoprefixer' ), - ! isDevelopment && require( 'cssnano' ), - ] ), - }, - }, - namespaceSDK && { + ...preSassLoaders, + stylesNamespacing && { loader: 'namespace-css-loader', - options: `.${ namespaceSDK }`, + options: `.${ stylesNamespacing }`, }, sassLoader, ] ), }, + stylesNamespacingExclude && { + test: /\.(sc|sa|c)ss$/, + include: stylesNamespacingExclude, + use: [ ...preSassLoaders, sassLoader ], + }, { test: /extensions[\/\\]index/, exclude: path.join( __dirname, 'node_modules' ), @@ -254,7 +266,7 @@ function getWebpackConfig( { namespaceSDK = '' } = {} ) { }, ], }, - ], + ] ), }, resolve: { extensions: [ '.json', '.js', '.jsx' ], From 7be68db9ee0d09505d02067c3c361505b34c76f9 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 10:58:59 +0300 Subject: [PATCH 06/15] Fix build when not excluding styles > - configuration.module.rules[2].exclude should be one of these: > RegExp | non-empty string | function | [RegExp | non-empty string | function | (recursive) | object { and?, exclude?, include?, not?, or?, test? }] | object { and?, exclude?, include?, not?, or?, test? } Setting it to `undefined` would work as well. --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index baf6b05eeb41a2..03be3fb51c74fe 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -205,7 +205,6 @@ function getWebpackConfig( { }, { test: /\.(sc|sa|c)ss$/, - exclude: stylesNamespacingExclude, use: _.compact( [ ...preSassLoaders, stylesNamespacing && { @@ -214,6 +213,7 @@ function getWebpackConfig( { }, sassLoader, ] ), + ...( stylesNamespacingExclude ? { exclude: stylesNamespacingExclude } : {} ), }, stylesNamespacingExclude && { test: /\.(sc|sa|c)ss$/, From 5e863bc2ca204a62169f71ec3fe96bc4628a9b79 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 11:39:48 +0300 Subject: [PATCH 07/15] Remove unrelated scss changes --- assets/stylesheets/_components.scss | 2 +- assets/stylesheets/_vendor.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index c6b8743a7dd196..7d57d048a46e70 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -7,7 +7,7 @@ // stylesheet order does not matter. // ========================================================================== -@import '../../client/layout/style.scss'; +@import 'layout/style'; @import 'account-recovery/components/account-recovery-error-message/style'; @import 'account-recovery/forgot-username-form/style'; diff --git a/assets/stylesheets/_vendor.scss b/assets/stylesheets/_vendor.scss index 09a33084dde886..e22416be99d032 100644 --- a/assets/stylesheets/_vendor.scss +++ b/assets/stylesheets/_vendor.scss @@ -1,7 +1,7 @@ // External Dependencies @import '../../node_modules/react-virtualized/styles'; @import '../../node_modules/draft-js/dist/Draft'; -@import '../../node_modules/notifications-panel/src/boot/stylesheets/style.scss'; +@import '../../node_modules/notifications-panel/src/boot/stylesheets/style'; .gridicon { fill: currentColor; From f5853f00728141083fbb4e1a9eb84fe1f4165a0c Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 11:46:50 +0300 Subject: [PATCH 08/15] , --- bin/sdk/gutenberg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bin/sdk/gutenberg.js b/bin/sdk/gutenberg.js index 7390d57d0d8ccc..f9995bd3806afb 100644 --- a/bin/sdk/gutenberg.js +++ b/bin/sdk/gutenberg.js @@ -7,7 +7,7 @@ const path = require( 'path' ); exports.config = ( { argv: { editorScript, viewScript, outputDir, outputEditorFile, outputViewFile }, getBaseConfig, - __rootDir + __rootDir, } ) => { const baseConfig = getBaseConfig( { externalizeWordPressPackages: true, From 35541b861038d356d5bdf706203b0a254679eb07 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 13:36:04 +0300 Subject: [PATCH 09/15] =?UTF-8?q?Fix=20failing=20tests=20=E2=80=94=20don't?= =?UTF-8?q?=20import=20scss=20files=20in=20Jest?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/client/jest.config.json | 3 ++- test/test/helpers/styles/README.md | 18 ++++++++++++++++++ test/test/helpers/styles/index.js | 3 +++ 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 test/test/helpers/styles/README.md create mode 100644 test/test/helpers/styles/index.js diff --git a/test/client/jest.config.json b/test/client/jest.config.json index 2eac0dcbfa6a02..22f93f643ba9ed 100644 --- a/test/client/jest.config.json +++ b/test/client/jest.config.json @@ -1,6 +1,7 @@ { "moduleNameMapper": { - "^config$": "/server/config/index.js" + "^config$": "/server/config/index.js", + "\\.(sc|sa|c)ss$": "/test/test/helpers/styles/index.js" }, "transform": { "^.+\\.jsx?$": "babel-jest", diff --git a/test/test/helpers/styles/README.md b/test/test/helpers/styles/README.md new file mode 100644 index 00000000000000..5681292a3e87e5 --- /dev/null +++ b/test/test/helpers/styles/README.md @@ -0,0 +1,18 @@ +# Mocks stylesheet imports in JS + +Jest would fail when trying to import css/scss/sass files that it cannot parse, +i.e. they're not plain JavaScript: + +```js +import './style.scss' +``` + +This helper can be used to transform all those imports to an empty module: + +```json +{ + "moduleNameMapper":{ + "\\.(sc|sa|c)ss$": "/test/test/helpers/styles/index.js" + } +} +``` diff --git a/test/test/helpers/styles/index.js b/test/test/helpers/styles/index.js new file mode 100644 index 00000000000000..df87e369dca8ad --- /dev/null +++ b/test/test/helpers/styles/index.js @@ -0,0 +1,3 @@ +/** @format */ + +module.exports = {}; From a9fc7ebb6ed866bc3b2151b869c282b43ac3db30 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 13:46:43 +0300 Subject: [PATCH 10/15] Clean out global import from webpack.config.node.js --- webpack.config.node.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webpack.config.node.js b/webpack.config.node.js index a57b3868dea8c5..f7c46b401d56f4 100644 --- a/webpack.config.node.js +++ b/webpack.config.node.js @@ -141,7 +141,6 @@ const webpackConfig = { loader: 'sass-loader', options: { includePaths: [ path.join( __dirname, 'client' ) ], - data: `@import '${ path.join( __dirname, 'assets/stylesheets/shared/utils' ) }';`, }, }, ] ), From d2ab07ee0faef7d71e812ad79ffcca676cd8a9ce Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 14:03:34 +0300 Subject: [PATCH 11/15] =?UTF-8?q?=E2=9C=82=20Remove=20unnessesary=20`=5F.c?= =?UTF-8?q?ompact`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webpack.config.node.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.config.node.js b/webpack.config.node.js index f7c46b401d56f4..2bb96e902da393 100644 --- a/webpack.config.node.js +++ b/webpack.config.node.js @@ -135,7 +135,7 @@ const webpackConfig = { }, { test: /\.(sc|sa|c)ss$/, - use: _.compact( [ + use: [ 'css-loader', { loader: 'sass-loader', @@ -143,7 +143,7 @@ const webpackConfig = { includePaths: [ path.join( __dirname, 'client' ) ], }, }, - ] ), + ], }, ], }, From 88ae7e4818449cf0c55b0476ef0dfe09063c319c Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 15:44:53 +0300 Subject: [PATCH 12/15] Add `moduleNameMapper` also to integration tests --- test/integration/jest.config.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/integration/jest.config.json b/test/integration/jest.config.json index 10bc2503bc882c..e5b81671c7fa08 100644 --- a/test/integration/jest.config.json +++ b/test/integration/jest.config.json @@ -1,4 +1,7 @@ { + "moduleNameMapper":{ + "\\.(sc|sa|c)ss$": "/test/test/helpers/styles/index.js" + }, "modulePaths": [ "/test/", "/server/", From 261fc7d1ff7b23a7fb5e048fc7b02108f5c8f4e4 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Aug 2018 17:21:06 +0300 Subject: [PATCH 13/15] Simplify namespacing inclusion/exclusion --- bin/sdk/gutenberg.js | 1 - webpack.config.js | 31 +++++++++++++++---------------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/bin/sdk/gutenberg.js b/bin/sdk/gutenberg.js index f9995bd3806afb..13f2f05212ed0d 100644 --- a/bin/sdk/gutenberg.js +++ b/bin/sdk/gutenberg.js @@ -12,7 +12,6 @@ exports.config = ( { const baseConfig = getBaseConfig( { externalizeWordPressPackages: true, stylesNamespacing: 'calypso', - stylesNamespacingExclude: path.join( __rootDir, 'client', 'gutenberg' ), } ); const name = path.basename( path.dirname( editorScript ).replace( /\/$/, '' ) ); diff --git a/webpack.config.js b/webpack.config.js index 03be3fb51c74fe..0a16e098c54eab 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -95,6 +95,9 @@ const sassLoader = { }, }; +// When styles-namespacing is enabled, these are the files we want to namespace +const stylesNamespacingDirectories = [ path.join( __dirname, 'client', 'components' ) ]; + /** * Converts @wordpress require into window reference * @@ -130,16 +133,11 @@ const wordpressExternals = ( context, request, callback ) => * * @param {object} env environment options * @param {boolean} env.externalizeWordPressPackages whether to bundle or extern the `@wordpress/` packages - * @param {string} env.stylesNamespacing prefix styles with CSS class or ID - * @param {string} env.stylesNamespacingExclude paths to exlude from namespacing when `stylesNamespacing` is defined + * @param {string} env.stylesNamespacing prefix Calypso component styles with CSS class or ID * * @return {object} webpack config */ -function getWebpackConfig( { - stylesNamespacingExclude = '', - externalizeWordPressPackages = false, - stylesNamespacing = '', -} = {} ) { +function getWebpackConfig( { externalizeWordPressPackages = false, stylesNamespacing = '' } = {} ) { const webpackConfig = { bail: ! isDevelopment, context: __dirname, @@ -205,20 +203,21 @@ function getWebpackConfig( { }, { test: /\.(sc|sa|c)ss$/, - use: _.compact( [ + use: [ ...preSassLoaders, sassLoader ], + // When styles-namespacing is enabled, these files are handled by separate loader below + ...( stylesNamespacing ? { exclude: stylesNamespacingDirectories } : {} ), + }, + stylesNamespacing && { + test: /\.(sc|sa|c)ss$/, + include: stylesNamespacingDirectories, + use: [ ...preSassLoaders, - stylesNamespacing && { + { loader: 'namespace-css-loader', options: `.${ stylesNamespacing }`, }, sassLoader, - ] ), - ...( stylesNamespacingExclude ? { exclude: stylesNamespacingExclude } : {} ), - }, - stylesNamespacingExclude && { - test: /\.(sc|sa|c)ss$/, - include: stylesNamespacingExclude, - use: [ ...preSassLoaders, sassLoader ], + ], }, { test: /extensions[\/\\]index/, From 052349fe1bcbe7211b50f2788cfe275899f5b021 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Wed, 22 Aug 2018 12:42:26 +0300 Subject: [PATCH 14/15] Use singular name --- bin/sdk/gutenberg.js | 2 +- webpack.config.js | 19 ++++++++----------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/bin/sdk/gutenberg.js b/bin/sdk/gutenberg.js index 13f2f05212ed0d..003899fc60b2a2 100644 --- a/bin/sdk/gutenberg.js +++ b/bin/sdk/gutenberg.js @@ -11,7 +11,7 @@ exports.config = ( { } ) => { const baseConfig = getBaseConfig( { externalizeWordPressPackages: true, - stylesNamespacing: 'calypso', + styleNamespace: 'calypso', } ); const name = path.basename( path.dirname( editorScript ).replace( /\/$/, '' ) ); diff --git a/webpack.config.js b/webpack.config.js index 0a16e098c54eab..4df2ed1a6a50f1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -80,10 +80,7 @@ const preSassLoaders = [ { loader: 'postcss-loader', options: { - plugins: _.compact( [ - require( 'autoprefixer' ), - ! isDevelopment && require( 'cssnano' ), - ] ), + plugins: _.compact( [ require( 'autoprefixer' ), ! isDevelopment && require( 'cssnano' ) ] ), }, }, ]; @@ -96,7 +93,7 @@ const sassLoader = { }; // When styles-namespacing is enabled, these are the files we want to namespace -const stylesNamespacingDirectories = [ path.join( __dirname, 'client', 'components' ) ]; +const styleNamespaceDirectories = [ path.join( __dirname, 'client', 'components' ) ]; /** * Converts @wordpress require into window reference @@ -133,11 +130,11 @@ const wordpressExternals = ( context, request, callback ) => * * @param {object} env environment options * @param {boolean} env.externalizeWordPressPackages whether to bundle or extern the `@wordpress/` packages - * @param {string} env.stylesNamespacing prefix Calypso component styles with CSS class or ID + * @param {string} env.styleNamespace prefix Calypso component styles with CSS class or ID * * @return {object} webpack config */ -function getWebpackConfig( { externalizeWordPressPackages = false, stylesNamespacing = '' } = {} ) { +function getWebpackConfig( { externalizeWordPressPackages = false, styleNamespace = '' } = {} ) { const webpackConfig = { bail: ! isDevelopment, context: __dirname, @@ -205,16 +202,16 @@ function getWebpackConfig( { externalizeWordPressPackages = false, stylesNamespa test: /\.(sc|sa|c)ss$/, use: [ ...preSassLoaders, sassLoader ], // When styles-namespacing is enabled, these files are handled by separate loader below - ...( stylesNamespacing ? { exclude: stylesNamespacingDirectories } : {} ), + ...( styleNamespace ? { exclude: styleNamespaceDirectories } : {} ), }, - stylesNamespacing && { + styleNamespace && { test: /\.(sc|sa|c)ss$/, - include: stylesNamespacingDirectories, + include: styleNamespaceDirectories, use: [ ...preSassLoaders, { loader: 'namespace-css-loader', - options: `.${ stylesNamespacing }`, + options: `.${ styleNamespace }`, }, sassLoader, ], From c52e42fd913cec8123c935a85b74b2d15a9f2375 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 24 Aug 2018 13:43:29 +0300 Subject: [PATCH 15/15] Do a test run of integration Jest config in CI Theory is that this doesn't have any affect. --- test/integration/jest.config.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/test/integration/jest.config.json b/test/integration/jest.config.json index e5b81671c7fa08..10bc2503bc882c 100644 --- a/test/integration/jest.config.json +++ b/test/integration/jest.config.json @@ -1,7 +1,4 @@ { - "moduleNameMapper":{ - "\\.(sc|sa|c)ss$": "/test/test/helpers/styles/index.js" - }, "modulePaths": [ "/test/", "/server/",