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.

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

feat: CSS variable injection #426

Merged
merged 6 commits into from
Jun 20, 2018
Merged

Conversation

pmdartus
Copy link
Member

Details

Add custom properties injection support as outlined in the RF0105 CSS custom properties injection.

Does this PR introduce a breaking change?

  • Yes
  • No

@pmdartus pmdartus requested review from diervo and apapko June 18, 2018 18:22
import { transform } from '../../transformers/transformer';
import { pretify } from '../../__tests__/utils';

describe('transform', () => {
Copy link
Member Author

Choose a reason for hiding this comment

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

Reorganize the tests per file type.

"allowJs": false,
"checkJs": false,
Copy link
Member Author

Choose a reason for hiding this comment

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

Make typescript stricter for the postcss-plugin-lwc project.

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: d5cd47c | Target commit: bc72ae1

expect(() => transform()).toThrow(
/Expect a string for source. Received undefined/
/Expect a string for source. Received undefined/,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Expected

}
});
it("should apply transformation for valid javascript file", async () => {
describe('javascript transform', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

for consistency with html and css test descriptions, perhaps we can capitalize JAVASCRIPT transform. Also wondering if we need the word transform since the root level describe is already named transform

@@ -1,68 +1,100 @@
import * as postcss from "postcss";
import * as cssnano from "cssnano";
import postcssPluginRaptor from "postcss-plugin-lwc";
import postcssPluginLwc from "postcss-plugin-lwc";
Copy link
Collaborator

Choose a reason for hiding this comment

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

thanks for renaming! raptor no more

"export default style;"
].join("\n");
/**
* Transform the var function to a call expression to the custom properties resolver with
Copy link
Collaborator

Choose a reason for hiding this comment

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

description is a bit confusing. Are we doing transform var function to a call expression in a form of custom properties resolver...?

token: TOKEN_PLACEHOLDER,
customProperties: {
allowDefinition: customProperties.allowDefinition,
Copy link
Collaborator

Choose a reason for hiding this comment

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

is existence check needed prior accessing allowDefinition?

Copy link
Member Author

Choose a reason for hiding this comment

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

No need since it gets normalized.

@@ -51,42 +17,35 @@ function transform(decl: Declaration, transformer: VarTransformer, value: string
return value;
}

const [, prefix] = varMatch;
// Prefix is either an empty string or a whitespace depending if the `var()` function is
Copy link
Collaborator

Choose a reason for hiding this comment

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

good comment

@@ -17,6 +24,15 @@ export type OutputProxyCompatConfig =
| { module: string }
| { independent: string };

export interface CustomPropertiesConfig {
allowDefinition?: boolean;
resolveFromModule?: string;
Copy link
Collaborator

Choose a reason for hiding this comment

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

i like the simplification

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: 3e65275 | Target commit: fe9d73d

lwc-engine-benchmark

table-append-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table/append/1k duration 157.65 (± 6.00 ms) 154.20 (± 5.60 ms) 2.19% 👌
table-clear-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table/clear/1k duration 12.40 (± 0.30 ms) 12.20 (± 0.40 ms) 1.61% 👌
table-create-10k metric base(3e65275) target(fe9d73d) trend
benchmark-table/create/10k duration 915.60 (± 7.20 ms) 913.90 (± 6.10 ms) 0.19% 👌
table-create-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table/create/1k duration 103.90 (± 1.80 ms) 104.10 (± 1.70 ms) -0.19% 👌
table-update-10th-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table/update-10th/1k duration 94.40 (± 2.95 ms) 87.60 (± 3.00 ms) 7.20% 👌
tablecmp-append-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table-component/append/1k duration 263.70 (± 5.80 ms) 265.15 (± 4.85 ms) -0.55% 👌
tablecmp-clear-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table/clear/1k duration 37.05 (± 2.05 ms) 39.40 (± 1.70 ms) -6.34% 👎
tablecmp-create-10k metric base(3e65275) target(fe9d73d) trend
benchmark-table-component/create/10k duration 1887.40 (± 21.90 ms) 1861.10 (± 8.70 ms) 1.39% 👍
tablecmp-create-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table-component/create/1k duration 205.70 (± 5.30 ms) 204.00 (± 4.10 ms) 0.83% 👌
tablecmp-update-10th-1k metric base(3e65275) target(fe9d73d) trend
benchmark-table-component/update-10th/1k duration 76.50 (± 4.60 ms) 77.00 (± 5.00 ms) -0.65% 👌

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: 3e65275 | Target commit: 795ae5d

lwc-engine-benchmark

table-append-1k metric base(3e65275) target(795ae5d) trend
benchmark-table/append/1k duration 157.65 (± 6.00 ms) 152.50 (± 5.50 ms) 3.27% 👍
table-clear-1k metric base(3e65275) target(795ae5d) trend
benchmark-table/clear/1k duration 12.40 (± 0.30 ms) 12.10 (± 0.60 ms) 2.42% 👍
table-create-10k metric base(3e65275) target(795ae5d) trend
benchmark-table/create/10k duration 915.60 (± 7.20 ms) 914.20 (± 7.10 ms) 0.15% 👌
table-create-1k metric base(3e65275) target(795ae5d) trend
benchmark-table/create/1k duration 103.90 (± 1.80 ms) 103.70 (± 1.70 ms) 0.19% 👌
table-update-10th-1k metric base(3e65275) target(795ae5d) trend
benchmark-table/update-10th/1k duration 94.40 (± 2.95 ms) 92.60 (± 4.00 ms) 1.91% 👌
tablecmp-append-1k metric base(3e65275) target(795ae5d) trend
benchmark-table-component/append/1k duration 263.70 (± 5.80 ms) 257.70 (± 4.30 ms) 2.28% 👍
tablecmp-clear-1k metric base(3e65275) target(795ae5d) trend
benchmark-table/clear/1k duration 37.05 (± 2.05 ms) 38.60 (± 1.50 ms) -4.18% 👎
tablecmp-create-10k metric base(3e65275) target(795ae5d) trend
benchmark-table-component/create/10k duration 1887.40 (± 21.90 ms) 1839.40 (± 14.40 ms) 2.54% 👍
tablecmp-create-1k metric base(3e65275) target(795ae5d) trend
benchmark-table-component/create/1k duration 205.70 (± 5.30 ms) 201.70 (± 4.10 ms) 1.94% 👍
tablecmp-update-10th-1k metric base(3e65275) target(795ae5d) trend
benchmark-table-component/update-10th/1k duration 76.50 (± 4.60 ms) 73.30 (± 5.50 ms) 4.18% 👌

@pmdartus pmdartus merged commit c8d0f9c into master Jun 20, 2018
@pmdartus pmdartus deleted the pmdartus/css-variable-injection branch June 20, 2018 21:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants