Skip to content

Commit

Permalink
Merge branch 'prerelease/major' into add-custom-styles-stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@RayRedGoose
RayRedGoose authored May 20, 2024
2 parents 7be253d + 7533a39 commit 1219acb
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 69 deletions.
62 changes: 20 additions & 42 deletions modules/styling-transform/lib/utils/handleCreateStencil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,8 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
const stencilHash = getHash(node, context);

if (ts.isObjectLiteralExpression(config)) {
const extendedFrom = config.properties.reduce((result, property) => {
config.properties.forEach(property => {
if (
!result &&
ts.isPropertyAssignment(property) &&
property.name &&
ts.isIdentifier(property.name) &&
Expand All @@ -65,11 +64,8 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
names[key.replace(extendsStencilName, stencilName)] = names[key];
}
});

return className;
}
return result;
}, '');
});

// get variables first
const varsConfig = config.properties.find(property => {
Expand Down Expand Up @@ -167,10 +163,19 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
);

if (styleObj && modifier.name) {
const stencilClassName = getClassName(stencilName, context);
const fullModifierName = getClassName(
getVarName(modifier.name),
context
);
const className = `${stencilClassName}.${fullModifierName.replace(
`${stencilClassName}--`,
''
)}`;
const initializer = createStyleReplacementNode(
modifier,
styleObj,
getClassName(getVarName(modifier.name), context),
className,
context
);
return updateStyleProperty(modifier, initializer);
Expand Down Expand Up @@ -215,11 +220,7 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
if (ts.isObjectLiteralExpression(element)) {
const selectors: string[] = [];

// If the stencil is an extension, we need to add the stencil name to
// the select to not accidentally match the base stencil
if (extendedFrom) {
selectors.push(`.${getClassName(stencilName, context)}`);
}
selectors.push(`.${getClassName(stencilName, context)}`);

return ts.factory.updateObjectLiteralExpression(
element,
Expand Down Expand Up @@ -250,41 +251,18 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
) {
compoundProperty.initializer.properties.forEach(modifier => {
if (ts.isPropertyAssignment(modifier)) {
//
let modifierName = '';
let className = '';
if (ts.isIdentifier(modifier.name)) {
modifierName += `${modifier.name.text}-`;
className = slugify(modifier.name.text);
}

let className = `.${getClassName(
getVarName(modifier.initializer),
context
)}`;
// The initializer should either be the `true` keyword or a string
// literal. We don't add `-true` to the name.
if (ts.isStringLiteral(modifier.initializer)) {
modifierName = modifierName + '-' + modifier.initializer.text;
className += `-${modifier.initializer.text}`;
}
modifierName = slugify(modifierName);

let classNameOverride = '';
if (extendedFrom) {
// search for this modifier in the styles object
Object.values(context.styles).forEach(fileStyles => {
return fileStyles.forEach(rule => {
if (rule.includes(`.${extendedFrom}--${modifierName} `)) {
const match = rule.match(/(\.[a-z0-9-]+)\s/);
if (match) {
classNameOverride = match[1];
}
}
});
});
}
if (classNameOverride) {
selectors.push(classNameOverride);
} else {
selectors.push(className);
}

selectors.push(className);
}
});
return compoundProperty;
Expand All @@ -309,7 +287,7 @@ export const handleCreateStencil: NodeTransformer = (node, context) => {
const serialized = serializeStyles(
compoundProperty,
styleObj,
`${selectors.join('')}{%s}`,
`${selectors.join('.')}{%s}`,
context
);

Expand Down
62 changes: 35 additions & 27 deletions modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ describe('handleCreateStencil', () => {
compileCSS('.css-button{--css-button-color: red;box-sizing:border-box;}')
);
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-large{padding: 0.3125rem;}')
compileCSS('.css-button.size-large{padding: 0.3125rem;}')
);
});

Expand Down Expand Up @@ -493,16 +493,16 @@ describe('handleCreateStencil', () => {

// modifiers
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-large{padding:30px;}')
compileCSS('.css-button.size-large{padding:30px;}')
);
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-small{padding:10px;}')
compileCSS('.css-button.size-small{padding:10px;}')
);
expect(styles['test.css']).toContainEqual(compileCSS('.css-button--inverse{color:while;}'));
expect(styles['test.css']).toContainEqual(compileCSS('.css-button.inverse{color:while;}'));

// compound
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-large.css-button--inverse{padding:40px;}')
compileCSS('.css-button.size-large.inverse{padding:40px;}')
);
});

Expand Down Expand Up @@ -543,10 +543,10 @@ describe('handleCreateStencil', () => {

// modifiers
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-title-large{font-size:var(--title-large);}')
compileCSS('.css-button.size-title-large{font-size:var(--title-large);}')
);
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-title-small{font-size:var(--title-small);}')
compileCSS('.css-button.size-title-small{font-size:var(--title-small);}')
);
});

Expand Down Expand Up @@ -587,10 +587,10 @@ describe('handleCreateStencil', () => {

// modifiers
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-title-large{font-size:var(--title-large);}')
compileCSS('.css-button.size-title-large{font-size:var(--title-large);}')
);
expect(styles['test.css']).toContainEqual(
compileCSS('.css-button--size-title-small{font-size:var(--title-small);}')
compileCSS('.css-button.size-title-small{font-size:var(--title-small);}')
);
});
});
Expand Down Expand Up @@ -952,7 +952,7 @@ describe('handleCreateStencil', () => {
padding: 5
},
modifiers: {
position: {
iconPosition: {
start: {
paddingInlineStart: 5
},
Expand All @@ -968,7 +968,7 @@ describe('handleCreateStencil', () => {
},
compound: [
{
modifiers: {size: 'large', position: 'start'},
modifiers: {size: 'large', iconPosition: 'start'},
styles: {
paddingInlineStart: 10
}
Expand All @@ -985,6 +985,14 @@ describe('handleCreateStencil', () => {
},
modifiers: {
iconPosition: {
start: {
paddingInlineState: 0
},
end: {
paddingInlineEnd: 0
}
},
extra: {
true: {
margin: 5
Expand All @@ -995,7 +1003,7 @@ describe('handleCreateStencil', () => {
{
modifiers: {
size: 'large',
position: 'start',
iconPosition: 'start',
extra: true
},
styles: {
Expand All @@ -1018,19 +1026,19 @@ describe('handleCreateStencil', () => {

it('should extract a base modifier style', () => {
expect(styles['test.css']).toContainEqual(
compileCSS('.css-base--position-start { padding-inline-start: 5px;}')
compileCSS('.css-base.icon-position-start { padding-inline-start: 5px;}')
);
expect(styles['test.css']).toContainEqual(
compileCSS('.css-base--position-end { padding-inline-end: 5px;}')
compileCSS('.css-base.icon-position-end { padding-inline-end: 5px;}')
);
expect(styles['test.css']).toContainEqual(
compileCSS('.css-base--size-large { padding: 15px;}')
compileCSS('.css-base.size-large { padding: 15px;}')
);
});

it('should extract a base compound modifier style', () => {
expect(styles['test.css']).toContainEqual(
compileCSS('.css-base--size-large.css-base--position-start { padding-inline-start: 10px;}')
compileCSS('.css-base.size-large.icon-position-start { padding-inline-start: 10px;}')
);
});

Expand All @@ -1041,13 +1049,13 @@ describe('handleCreateStencil', () => {
});

it('should extract an extended modifier style', () => {
expect(styles['test.css']).toContainEqual(compileCSS('.css-extended--extra { margin: 5px;}'));
expect(styles['test.css']).toContainEqual(compileCSS('.css-extended.extra { margin: 5px;}'));
});

it('should extract an extended compound modifier with base modifier names and extended modifier names', () => {
expect(styles['test.css']).toContainEqual(
compileCSS(
'.css-extended.css-base--size-large.css-base--position-start.css-extended--extra {margin: 10px; padding-inline-start: 5px;}'
'.css-extended.size-large.icon-position-start.extra {margin: 10px; padding-inline-start: 5px;}'
)
);
});
Expand Down Expand Up @@ -1084,7 +1092,7 @@ describe('handleCreateStencil', () => {
{
modifiers: {
size: 'large',
position: 'start',
iconPosition: 'start',
extra: true
},
styles: {
Expand All @@ -1109,7 +1117,7 @@ describe('handleCreateStencil', () => {
padding: 5
},
modifiers: {
position: {
iconPosition: {
start: {
paddingInlineStart: 5
},
Expand All @@ -1125,7 +1133,7 @@ describe('handleCreateStencil', () => {
},
compound: [
{
modifiers: {size: 'large', position: 'start'},
modifiers: {size: 'large', iconPosition: 'start'},
styles: {
paddingInlineStart: 10
}
Expand All @@ -1147,19 +1155,19 @@ describe('handleCreateStencil', () => {

it('should extract a base modifier style', () => {
expect(getFile(styles, 'base.css')).toContainEqual(
compileCSS('.css-base--position-start { padding-inline-start: 5px;}')
compileCSS('.css-base.icon-position-start { padding-inline-start: 5px;}')
);
expect(getFile(styles, 'base.css')).toContainEqual(
compileCSS('.css-base--position-end { padding-inline-end: 5px;}')
compileCSS('.css-base.icon-position-end { padding-inline-end: 5px;}')
);
expect(getFile(styles, 'base.css')).toContainEqual(
compileCSS('.css-base--size-large { padding: 15px;}')
compileCSS('.css-base.size-large { padding: 15px;}')
);
});

it('should extract a base compound modifier style', () => {
expect(getFile(styles, 'base.css')).toContainEqual(
compileCSS('.css-base--size-large.css-base--position-start { padding-inline-start: 10px;}')
compileCSS('.css-base.size-large.icon-position-start { padding-inline-start: 10px;}')
);
});

Expand All @@ -1171,14 +1179,14 @@ describe('handleCreateStencil', () => {

it('should extract an extended modifier style', () => {
expect(getFile(styles, 'test.css')).toContainEqual(
compileCSS('.css-extended--extra { margin: 5px;}')
compileCSS('.css-extended.extra { margin: 5px;}')
);
});

it('should extract an extended compound modifier with base modifier names and extended modifier names', () => {
expect(getFile(styles, 'test.css')).toContainEqual(
compileCSS(
'.css-extended.css-base--size-large.css-base--position-start.css-extended--extra {margin: 10px; padding-inline-start: 5px;}'
'.css-extended.size-large.icon-position-start.extra {margin: 10px; padding-inline-start: 5px;}'
)
);
});
Expand Down

0 comments on commit 1219acb

Please sign in to comment.