From 94e97d90f0e6bd3a6243a4ba93d6ec3e04437f6b Mon Sep 17 00:00:00 2001 From: Jairo <68893868+jairo-bc@users.noreply.github.com> Date: Fri, 20 Sep 2024 18:16:46 +0200 Subject: [PATCH] feat: STRF-11834 Consolidate css assembing logic (#1231) --- lib/css-assembler.js | 99 ----------------------------- lib/css/compile.js | 7 +-- lib/stencil-bundle.js | 9 +-- package-lock.json | 143 +++++++++++++++++++++++++----------------- package.json | 2 +- 5 files changed, 94 insertions(+), 166 deletions(-) delete mode 100644 lib/css-assembler.js diff --git a/lib/css-assembler.js b/lib/css-assembler.js deleted file mode 100644 index 77e2d832..00000000 --- a/lib/css-assembler.js +++ /dev/null @@ -1,99 +0,0 @@ -const async = require('async'); -const fs = require('fs'); -const path = require('path'); -const upath = require('upath'); - -const importRegex = /@import\s+?["'](.+?)["'];/g; - -/** - * Parses all of the imports for SCSS files and returns a flat object with the file path as the key and - * file content as the value. - * - * @param cssFiles - * @param absolutePath - * @param type - scss - * @param options - options object - * @param callback - */ -function assemble(cssFiles, absolutePath, type, options, callback) { - const ret = {}; - const ext = `.${type}`; - - const cssFilesArr = Array.isArray(cssFiles) ? cssFiles : [cssFiles]; - - const parseImports = (cssFileAlias, parseImportsCallback) => { - const normalizedCssFileAlias = cssFileAlias.replace(/(\.scss)$/g, ''); - const typedCssFilePath = path.join(absolutePath, normalizedCssFileAlias + ext); - const rawCssFilePath = path.join(absolutePath, normalizedCssFileAlias + '.css'); - const cssFileAliasDir = path.parse(normalizedCssFileAlias).dir; - - const fileParts = path.parse(typedCssFilePath); - const underscoredFilePath = path.join(fileParts.dir, `_${fileParts.base}`); - let filePath; - - if (fs.existsSync(typedCssFilePath)) { - filePath = typedCssFilePath; - } else if (fs.existsSync(underscoredFilePath)) { - filePath = underscoredFilePath; - } else if (ext === '.scss' && fs.existsSync(rawCssFilePath)) { - filePath = rawCssFilePath; - } else { - // File doesn't exist, just return to skip it - parseImportsCallback(); - return; - } - - fs.readFile(filePath, { encoding: 'utf-8' }, (err, content) => { - const matches = []; - let match; - let importCssFileAlias; - - if (!err) { - // Ensure all import paths are Unix paths for prod compat. - const cssFile = options.bundle - ? upath.toUnix(normalizedCssFileAlias + ext) - : normalizedCssFileAlias + ext; - - ret[cssFile] = content; - match = importRegex.exec(content); - - while (match !== null) { - [, importCssFileAlias] = match; - if (cssFileAliasDir) { - importCssFileAlias = path.join(cssFileAliasDir, importCssFileAlias); - } - - if (!ret[importCssFileAlias + ext]) { - matches.push(importCssFileAlias); - } - - match = importRegex.exec(content); - } - } - - async.each(matches, parseImports, parseImportsCallback); - }); - }; - - async.map( - cssFilesArr, - (cssFile, mapCallback) => { - const cssFileParts = path.parse(cssFile); - const cssFileAlias = path.join(cssFileParts.dir, cssFileParts.name); - - parseImports(cssFileAlias, mapCallback); - }, - (err) => { - if (err) { - callback(err); - return; - } - - callback(null, ret); - }, - ); -} - -module.exports = { - assemble, -}; diff --git a/lib/css/compile.js b/lib/css/compile.js index 091f1738..ebf4f2ae 100644 --- a/lib/css/compile.js +++ b/lib/css/compile.js @@ -1,8 +1,5 @@ const path = require('path'); const StencilStyles = require('@bigcommerce/stencil-styles'); -const { promisify } = require('util'); - -const cssAssembler = require('../css-assembler'); const SASS_ENGINE_NAME = 'node-sass'; @@ -11,10 +8,11 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA const ext = configuration.css_compiler === 'css' ? configuration.css_compiler : 'scss'; const pathToFile = path.join(fileParts.dir, `${fileParts.name}.${ext}`); const basePath = path.join(themeAssetsPath, `${ext}`); + const stencilStyles = new StencilStyles(console); let files; try { - files = await promisify(cssAssembler.assemble)(pathToFile, basePath, `${ext}`, {}); + files = await stencilStyles.assembleCssFiles(pathToFile, basePath, `${ext}`, {}); } catch (err) { console.error(err); throw err; @@ -31,7 +29,6 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA overrideBrowserslist: configuration.autoprefixer_browsers, }, }; - const stencilStyles = new StencilStyles(console); stencilStyles.activateEngine(engineName); return stencilStyles.compileCss('scss', params); diff --git a/lib/stencil-bundle.js b/lib/stencil-bundle.js index ad08c3d0..eafafd83 100644 --- a/lib/stencil-bundle.js +++ b/lib/stencil-bundle.js @@ -4,11 +4,11 @@ const async = require('async'); const crypto = require('crypto'); const fs = require('fs'); const path = require('path'); +const StencilStyles = require('@bigcommerce/stencil-styles'); const BuildConfigManager = require('./BuildConfigManager'); const BundleValidator = require('./bundle-validator'); const Cycles = require('./Cycles'); -const cssAssembler = require('./css-assembler'); const langAssembler = require('./lang-assembler'); const templateAssembler = require('./template-assembler'); const { recursiveReadDir } = require('./utils/fsUtils'); @@ -37,6 +37,8 @@ const PATHS_TO_ZIP = [ { pattern: 'webpack.*.js' }, ]; +const stencilStyles = new StencilStyles(); + class Bundle { constructor( themePath, @@ -126,13 +128,12 @@ class Bundle { }); async.map( filterFiles, - (file, mapCallback) => { - cssAssembler.assemble( + async (file) => { + return stencilStyles.assembleCssFiles( file, basePath, compiler, assembleOptions, - mapCallback, ); }, (assemblingError, results) => { diff --git a/package-lock.json b/package-lock.json index f36e1a0b..53a5cd30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@bigcommerce/stencil-cli", - "version": "8.0.0", + "version": "8.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@bigcommerce/stencil-cli", - "version": "8.0.0", + "version": "8.2.0", "license": "BSD-4-Clause", "dependencies": { "@bigcommerce/stencil-paper": "5.0.0", - "@bigcommerce/stencil-styles": "5.3.3", + "@bigcommerce/stencil-styles": "^6.1.1", "@hapi/boom": "^10.0.0", "@hapi/glue": "^8.0.0", "@hapi/h2o2": "^9.1.0", @@ -839,20 +839,33 @@ } }, "node_modules/@bigcommerce/stencil-styles": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-styles/-/stencil-styles-5.3.3.tgz", - "integrity": "sha512-r05ZTTguZocQL5j5Oq8Bh86tv08oy6SsACYAsYVwf9hb25kMjow8rWqMUY/hkJYS7l5NfnejrOvn7rfHIfBN+g==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-styles/-/stencil-styles-6.1.1.tgz", + "integrity": "sha512-Ous4jaM5CCHAQuK+ki8Bw6sv2G3er0v2EWzK1pU4XJc63zbV7r99vjIG38yotUUVu1MOE5Kw9zifSdpfvk4uHQ==", + "license": "BSD-4-Clause", "dependencies": { - "autoprefixer": "^10.4.13", + "async": "^3.2.6", + "autoprefixer": "^10.4.20", "cheerio": "^1.0.0-rc.12", "lodash": "^4.17.21", "node-sass": "^9.0.0", - "postcss": "^8.4.20", + "postcss": "^8.4.45", "recursive-readdir": "^2.2.3", - "sass": "^1.58.0" + "sass": "^1.58.0", + "upath": "^2.0.1" }, "engines": { - "node": ">=16.0.0" + "node": ">=20.0.0" + } + }, + "node_modules/@bigcommerce/stencil-styles/node_modules/upath": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz", + "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==", + "license": "MIT", + "engines": { + "node": ">=4", + "yarn": "*" } }, "node_modules/@colors/colors": { @@ -4080,9 +4093,10 @@ } }, "node_modules/async": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", - "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==" + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "license": "MIT" }, "node_modules/async-each-series": { "version": "0.1.1", @@ -4124,9 +4138,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.19", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", - "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", "funding": [ { "type": "opencollective", @@ -4141,12 +4155,13 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { - "browserslist": "^4.23.0", - "caniuse-lite": "^1.0.30001599", + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "postcss-value-parser": "^4.2.0" }, "bin": { @@ -8143,6 +8158,7 @@ "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "license": "MIT", "engines": { "node": "*" }, @@ -12075,6 +12091,7 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -15403,9 +15420,9 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==" }, "node_modules/picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "license": "ISC" }, "node_modules/picomatch": { @@ -15599,9 +15616,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "funding": [ { "type": "opencollective", @@ -15616,10 +15633,11 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -15664,7 +15682,8 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -17175,9 +17194,10 @@ } }, "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" } @@ -19148,17 +19168,26 @@ } }, "@bigcommerce/stencil-styles": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-styles/-/stencil-styles-5.3.3.tgz", - "integrity": "sha512-r05ZTTguZocQL5j5Oq8Bh86tv08oy6SsACYAsYVwf9hb25kMjow8rWqMUY/hkJYS7l5NfnejrOvn7rfHIfBN+g==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-styles/-/stencil-styles-6.1.1.tgz", + "integrity": "sha512-Ous4jaM5CCHAQuK+ki8Bw6sv2G3er0v2EWzK1pU4XJc63zbV7r99vjIG38yotUUVu1MOE5Kw9zifSdpfvk4uHQ==", "requires": { - "autoprefixer": "^10.4.13", + "async": "^3.2.6", + "autoprefixer": "^10.4.20", "cheerio": "^1.0.0-rc.12", "lodash": "^4.17.21", "node-sass": "^9.0.0", - "postcss": "^8.4.20", + "postcss": "^8.4.45", "recursive-readdir": "^2.2.3", - "sass": "^1.58.0" + "sass": "^1.58.0", + "upath": "^2.0.1" + }, + "dependencies": { + "upath": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz", + "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==" + } } }, "@colors/colors": { @@ -21847,9 +21876,9 @@ "dev": true }, "async": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", - "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==" + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==" }, "async-each-series": { "version": "0.1.1", @@ -21881,15 +21910,15 @@ } }, "autoprefixer": { - "version": "10.4.19", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", - "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", "requires": { - "browserslist": "^4.23.0", - "caniuse-lite": "^1.0.30001599", + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "postcss-value-parser": "^4.2.0" } }, @@ -30016,9 +30045,9 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==" }, "picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" }, "picomatch": { "version": "2.3.1", @@ -30161,13 +30190,13 @@ "dev": true }, "postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", "requires": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" } }, "postcss-safe-parser": { @@ -31327,9 +31356,9 @@ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, "source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==" }, "source-map-support": { "version": "0.5.13", diff --git a/package.json b/package.json index 2d34a0e3..c28ef82a 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ ], "dependencies": { "@bigcommerce/stencil-paper": "5.0.0", - "@bigcommerce/stencil-styles": "5.3.3", + "@bigcommerce/stencil-styles": "^6.1.1", "@hapi/boom": "^10.0.0", "@hapi/glue": "^8.0.0", "@hapi/h2o2": "^9.1.0",