Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

fixes #90 by adding postProcess hook to scoped-css-preprocessor to break cache for associated template files #95

Merged
merged 4 commits into from
Sep 18, 2023
Merged

fixes #90 by adding postProcess hook to scoped-css-preprocessor to break cache for associated template files #95

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d50d10e
fixes #90 by adding postProcess hook to scoped-css-preprocessor to br…
jakebixby Sep 15, 2023
845ecb8
changeset
jakebixby Sep 15, 2023
7590996
lint fixes
jakebixby Sep 15, 2023
ad1ca49
added tests
jakebixby Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion ember-scoped-css/src/lib/scoped-css-preprocessor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@ import Filter from 'broccoli-persistent-filter';
import path from 'path';

import fsExists from './fsExists.js';
import { readFile, writeFile } from 'fs/promises';
import { packageScopedPathToModulePath } from './generateAbsolutePathHash.js';
import getClassesTagsFromCss from './getClassesTagsFromCss.js';
import generateHash from './generateRelativePathHash.js';
import rewriteCss from './rewriteCss.js';
import rewriteHbs from './rewriteHbs.js';

const COMPONENT_EXTENSIONS = ['hbs', 'js', 'ts', 'gjs', 'gts'];
const TEMPLATE_EXTENSIONS = ['hbs', 'gjs', 'gts'];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will be using these for gjs/gts support later


class ScopedFilter extends Filter {
constructor(componentsNode, options = {}) {
Expand Down Expand Up @@ -67,12 +71,57 @@ class ScopedFilter extends Filter {
return '';
}
}
async postProcess(results, relativePath) {
if (relativePath.endsWith('.module.css')) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should probably be a config option, but I think since usage is low, we can skip it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add a config option to opt in

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Misunderstood, will look at doing that in a later PR since module.css is also considered elsewhere.

However, I do think I'd like to check for CI to skip the whole thing since CI doesn't do a second pass and we'd be doing extra work for nothing.

   if (process.env.CI || relativePath.endsWith('.module.css')) {
      return results;
    }

return results;
}

// need to add gjs/gts support
// check existence of gjs and gts files
// extract template tag

const templatePath = relativePath.replace(/\.css/, '.hbs');

for (let inputPath of this.inputPaths) {
const templateFilePath = path.join(inputPath, templatePath);
const fileExists = await fsExists(templateFilePath);

if (fileExists) {
const cssFilePath = path.join(inputPath, relativePath);
const cssContents = await readFile(cssFilePath, 'utf-8');
const { classes, tags } = getClassesTagsFromCss(cssContents);

const previousClasses = this.options.previousClasses.get(relativePath);

// if we have previous classes, and they are different, build templates to compare
if (previousClasses && classes.toString() !== previousClasses.toString()) {
const localPackagerStylePath = packageScopedPathToModulePath(relativePath);
const postfix = generateHash(localPackagerStylePath);
const templateContents = await readFile(templateFilePath, 'utf-8');
const templateOriginal = rewriteHbs(templateContents, previousClasses, tags, postfix);
const templateRewrite = rewriteHbs(templateContents, classes, tags, postfix);
// if the rewrite doesn't match the original output, we want to rebuild the template
if (templateOriginal !== templateRewrite) {
// this is an awful hack because we don't know how to invalidate broccoli-persistent-filter cache
// ideally we'd invalidate the broccoli-peristent-filter cache here
await writeFile(templateFilePath, templateContents + ' ');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel sad that I had to revert to using a hack like this, but the cache invalidation was not working as advertised (or I was just doing it wrong). Would love to fix this to actually invalidate the cache correctly, but this will work for now.

}
}
// assign for next run comparison
this.options.previousClasses.set(relativePath, classes);
}
}

return results;
}
}

export default class ScopedCssPreprocessor {
constructor(options) {
this.owner = options.owner;
this.appName = options.owner.parent.pkg.name;
this.name = 'scoped-css-preprocessor';
this.previousClasses = new Map();
}

/**
Expand All @@ -98,7 +147,9 @@ export default class ScopedCssPreprocessor {

componentsNode = new ScopedFilter(componentsNode, {
inputPath,
getUserOptions: () => this.userOptions,
getUserOptions: () => this.userOptions,
owner: this.owner,
previousClasses: this.previousClasses,
});

const componentStyles = new Funnel(componentsNode, {
Expand Down