From 098a9b8212f4ab2781de3a20e1731d6efdb9eaf2 Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Wed, 28 Jul 2021 10:46:21 -0700 Subject: [PATCH 1/4] Align second arg for preprocessCss to match classic In classic builds the second argument is '/app/styles' but we were passing 'app/styles'. While this difference might be small, in ember-cli-eyeglass [it removes the leading slash](https://github.com/linkedin/eyeglass/blob/master/packages/ember-cli-eyeglass/src/index.ts#L210-L212) and this causes issues when the slash is missing. --- packages/compat/src/v1-app.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compat/src/v1-app.ts b/packages/compat/src/v1-app.ts index 10ade69c9..db93f9372 100644 --- a/packages/compat/src/v1-app.ts +++ b/packages/compat/src/v1-app.ts @@ -477,7 +477,7 @@ export default class V1App { }; let nestedInput = buildFunnel(this.combinedStyles(addonTrees), { destDir: 'app/styles' }); - let styles = this.preprocessors.preprocessCss(nestedInput, 'app/styles', '/assets', options); + let styles = this.preprocessors.preprocessCss(nestedInput, '/app/styles', '/assets', options); return new AddToTree(styles, outputPath => { let addonMeta: AddonMeta = { From f6d0a8bddeb485e8c04bd2bef49e9d5bd60eed9c Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Wed, 28 Jul 2021 13:07:39 -0700 Subject: [PATCH 2/4] adding test case --- tests/fixtures/preprocess-addon/index.js | 46 ++++++++++++++++++++++++ tests/scenarios/package.json | 17 +++++---- tests/scenarios/preprocess-test.ts | 40 +++++++++++++++++++++ 3 files changed, 96 insertions(+), 7 deletions(-) create mode 100644 tests/fixtures/preprocess-addon/index.js create mode 100644 tests/scenarios/preprocess-test.ts diff --git a/tests/fixtures/preprocess-addon/index.js b/tests/fixtures/preprocess-addon/index.js new file mode 100644 index 000000000..00f6e9a3d --- /dev/null +++ b/tests/fixtures/preprocess-addon/index.js @@ -0,0 +1,46 @@ +'use strict'; + +const Filter = require('broccoli-persistent-filter'); +const funnel = require('broccoli-funnel'); +const path = require('path'); + +class Awk extends Filter { + constructor(inputNode, searchReplaceObj) { + super(inputNode, {}); + this.searchReplaceObj = searchReplaceObj; + } + + processString(content) { + let modifiedContent = content; + + Object.entries(this.searchReplaceObj).forEach(([search, replace]) => { + modifiedContent = modifiedContent.replace(search, replace); + }); + + return modifiedContent; + } +} + +module.exports = { + name: require('./package').name, + + setupPreprocessorRegistry(type, registry) { + registry.add('css', { + name: this.name, + ext: 'css', + toTree: (tree, inputPath, outputPath) => { + return funnel(new Awk(tree, { '%%%': inputPath === '/app/styles' ? 'red' : 'blue' }), { + getDestinationPath(relativePath) { + let relativePathWithPrefix = `/${relativePath}`; + + if (relativePathWithPrefix === `${inputPath}/app.css`) { + return path.join(outputPath, 'app-template.css'); + } + + return path.join(outputPath, relativePathWithPrefix.replace(inputPath, '')); + }, + }); + }, + }); + }, +}; diff --git a/tests/scenarios/package.json b/tests/scenarios/package.json index 0277b47ae..3a67a0bb5 100644 --- a/tests/scenarios/package.json +++ b/tests/scenarios/package.json @@ -23,27 +23,30 @@ "bootstrap": "^4.3.1", "broccoli-funnel": "^3.0.5", "broccoli-merge-trees": "^3.0.2", + "broccoli-persistent-filter": "^3.1.2", "ember-bootstrap": "^4.6.3", - "ember-cli-latest": "npm:ember-cli@latest", - "ember-cli-beta": "npm:ember-cli@beta", "ember-cli-3.16": "npm:ember-cli@~3.16.0", "ember-cli-3.20": "npm:ember-cli@~3.20.0", "ember-cli-3.24": "npm:ember-cli@~3.24.0", + "ember-cli-beta": "npm:ember-cli@beta", + "ember-cli-latest": "npm:ember-cli@latest", "ember-cli-fastboot": "^2.2.3", + "ember-composable-helpers": "^4.4.1", "ember-data-3.16": "npm:ember-data@~3.16.0", "ember-data-3.20": "npm:ember-data@~3.20.0", "ember-data-3.24": "npm:ember-data@~3.24.0", "ember-data-latest": "npm:ember-data@latest", + "ember-engines": "^0.8.16", + "ember-inline-svg": "^0.2.1", "ember-source-latest": "npm:ember-source@latest", "ember-source-beta": "npm:ember-source@beta", "ember-source-3.16": "npm:ember-source@~3.16.0", "ember-source-3.20": "npm:ember-source@~3.20.0", "ember-source-3.24": "npm:ember-source@~3.24.0", - "fastboot-addon": "link:../../test-packages/fastboot-addon", - "ember-engines": "^0.8.16", - "ember-inline-svg": "^0.2.1", - "ember-composable-helpers": "^4.4.1", - "ember-truth-helpers": "^3.0.0" + "ember-source-beta": "npm:ember-source@beta", + "ember-source-latest": "npm:ember-source@latest", + "ember-truth-helpers": "^3.0.0", + "fastboot-addon": "link:../../test-packages/fastboot-addon" }, "volta": { "node": "14.16.1", diff --git a/tests/scenarios/preprocess-test.ts b/tests/scenarios/preprocess-test.ts new file mode 100644 index 000000000..23f9e154a --- /dev/null +++ b/tests/scenarios/preprocess-test.ts @@ -0,0 +1,40 @@ +import { appScenarios } from './scenarios'; +import { PreparedApp, Project } from 'scenario-tester'; +import QUnit from 'qunit'; +import merge from 'lodash/merge'; +import { loadFromFixtureData } from './helpers'; +import { dirname, join } from 'path'; +import fs from 'fs'; +const { module: Qmodule, test } = QUnit; + +appScenarios + .map('preprocess', project => { + let preprocessAddon = Project.fromDir(dirname(require.resolve('../addon-template/package.json')), { + linkDeps: true, + }); + + merge(preprocessAddon.files, loadFromFixtureData('preprocess-addon')); + preprocessAddon.linkDependency('broccoli-funnel', { baseDir: __dirname }); + preprocessAddon.linkDependency('broccoli-persistent-filter', { baseDir: __dirname }); + preprocessAddon.pkg.name = 'preprocess-addon'; + + project.addDevDependency(preprocessAddon); + merge(project.files, { + app: { + styles: { + 'app.css': `body { background: %%%; }`, + }, + }, + }); + }) + .forEachScenario(scenario => { + Qmodule(scenario.name, function () { + test(`yarn test`, async function (assert) { + let app: PreparedApp = await scenario.prepare(); + await app.execute('./node_modules/ember-cli/bin/ember b'); + + const data = fs.readFileSync(join(app.dir, 'dist', 'assets', 'app-template.css'), 'utf8'); + assert.equal(data, 'body { background: red; }'); + }); + }); + }); From 9d63e59351bab7087bd6862edfa2a46368d6a6c2 Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Thu, 29 Jul 2021 15:36:55 -0700 Subject: [PATCH 3/4] checking windows path --- tests/fixtures/preprocess-addon/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/fixtures/preprocess-addon/index.js b/tests/fixtures/preprocess-addon/index.js index 00f6e9a3d..9d034de12 100644 --- a/tests/fixtures/preprocess-addon/index.js +++ b/tests/fixtures/preprocess-addon/index.js @@ -29,9 +29,12 @@ module.exports = { name: this.name, ext: 'css', toTree: (tree, inputPath, outputPath) => { + console.log('inputPath: ' + inputPath); return funnel(new Awk(tree, { '%%%': inputPath === '/app/styles' ? 'red' : 'blue' }), { getDestinationPath(relativePath) { let relativePathWithPrefix = `/${relativePath}`; + console.log('relativePath: ' + relativePath); + console.log('relativePathWithPrefix: ' + relativePathWithPrefix); if (relativePathWithPrefix === `${inputPath}/app.css`) { return path.join(outputPath, 'app-template.css'); From 508321202de2996cb4704428259e8117736756b5 Mon Sep 17 00:00:00 2001 From: Travis Hoover Date: Fri, 30 Jul 2021 11:45:42 -0700 Subject: [PATCH 4/4] fixing windows tests --- tests/fixtures/preprocess-addon/index.js | 9 +++------ tests/scenarios/preprocess-test.ts | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/tests/fixtures/preprocess-addon/index.js b/tests/fixtures/preprocess-addon/index.js index 9d034de12..a23cc849a 100644 --- a/tests/fixtures/preprocess-addon/index.js +++ b/tests/fixtures/preprocess-addon/index.js @@ -2,7 +2,7 @@ const Filter = require('broccoli-persistent-filter'); const funnel = require('broccoli-funnel'); -const path = require('path'); +const { join } = require('path').posix; class Awk extends Filter { constructor(inputNode, searchReplaceObj) { @@ -29,18 +29,15 @@ module.exports = { name: this.name, ext: 'css', toTree: (tree, inputPath, outputPath) => { - console.log('inputPath: ' + inputPath); return funnel(new Awk(tree, { '%%%': inputPath === '/app/styles' ? 'red' : 'blue' }), { getDestinationPath(relativePath) { let relativePathWithPrefix = `/${relativePath}`; - console.log('relativePath: ' + relativePath); - console.log('relativePathWithPrefix: ' + relativePathWithPrefix); if (relativePathWithPrefix === `${inputPath}/app.css`) { - return path.join(outputPath, 'app-template.css'); + return join(outputPath, 'app-template.css'); } - return path.join(outputPath, relativePathWithPrefix.replace(inputPath, '')); + return join(outputPath, relativePathWithPrefix.replace(inputPath, '')); }, }); }, diff --git a/tests/scenarios/preprocess-test.ts b/tests/scenarios/preprocess-test.ts index 23f9e154a..824f498bb 100644 --- a/tests/scenarios/preprocess-test.ts +++ b/tests/scenarios/preprocess-test.ts @@ -31,7 +31,7 @@ appScenarios Qmodule(scenario.name, function () { test(`yarn test`, async function (assert) { let app: PreparedApp = await scenario.prepare(); - await app.execute('./node_modules/ember-cli/bin/ember b'); + await app.execute('node ./node_modules/ember-cli/bin/ember b'); const data = fs.readFileSync(join(app.dir, 'dist', 'assets', 'app-template.css'), 'utf8'); assert.equal(data, 'body { background: red; }');