-
Notifications
You must be signed in to change notification settings - Fork 217
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(styling): Fix parent selectors in compat mode (#2743)
PR #2741 added the ability to target parent modifier class names to build selectors, but doesn't work in compat mode because compat mode merges all the CSS class names into a single, new class name. I added a `parentModifiers` function that handles this for both React Kit and CSS Kit and updated stencils to add inert class names for the purpose of always matching a selector. I also fixed a bug where passing `undefined` to a Stencil for a modifier key resulted in overriding `defaultModifiers`. [category:Styling]
- Loading branch information
1 parent
2313244
commit 78514b9
Showing
7 changed files
with
235 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
modules/styling-transform/lib/utils/handleParentModifier.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import ts from 'typescript'; | ||
|
||
import {parentModifier} from '@workday/canvas-kit-styling'; | ||
import {createPropertyTransform} from '../createPropertyTransform'; | ||
import {parseNodeToStaticValue} from './parseNodeToStaticValue'; | ||
|
||
export const handleParentModifier = createPropertyTransform((node, context) => { | ||
const {names, extractedNames} = context; | ||
|
||
if ( | ||
ts.isComputedPropertyName(node) && | ||
ts.isCallExpression(node.expression) && | ||
ts.isIdentifier(node.expression.expression) && | ||
node.expression.expression.text === 'parentModifier' | ||
) { | ||
const args = node.expression.arguments.map(arg => parseNodeToStaticValue(arg, context)); | ||
const hash = args[0].toString().replace('css-', ''); | ||
|
||
// add a mapping from `css-{hash}` to `{hash}` for extraction string replacement | ||
names[args[0]] = hash; | ||
|
||
// map the `{hash}` to the extracted CSS class name | ||
extractedNames[hash] = extractedNames[args[0]]; | ||
|
||
return parentModifier(args[0].toString()); | ||
} | ||
|
||
return; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
modules/styling-transform/spec/utils/handleParentModifier.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import ts from 'typescript'; | ||
|
||
import {createProgramFromSource} from '../createProgramFromSource'; | ||
|
||
import {transform, withDefaultContext, _reset} from '../../lib/styleTransform'; | ||
import {compileCSS} from '../../lib/utils/createStyleObjectNode'; | ||
|
||
describe('handleParentModifier', () => { | ||
let program: ts.Program; | ||
let result: string; | ||
|
||
const styles = {}; | ||
const names = {}; | ||
const extractedNames = {}; | ||
|
||
beforeAll(() => { | ||
_reset(); | ||
program = createProgramFromSource(` | ||
import {createStencil, parentModifier} from '@workday/canvas-kit-styling'; | ||
const buttonStencil = createStencil({ | ||
vars: { | ||
color: 'red' | ||
}, | ||
base: {}, | ||
modifiers: { | ||
size: { | ||
large: {padding: 20}, | ||
small: {padding: 10} | ||
} | ||
} | ||
}) | ||
const childStencil = createStencil({ | ||
base: { | ||
[parentModifier(buttonStencil.modifiers.size.large)]: { | ||
color: 'blue', | ||
} | ||
} | ||
}) | ||
`); | ||
|
||
result = transform( | ||
program, | ||
'test.ts', | ||
withDefaultContext(program.getTypeChecker(), {styles, names, extractedNames}) | ||
); | ||
}); | ||
|
||
it('should add a mapping from the CSS class name to the hash to the names cache', () => { | ||
expect(names).toHaveProperty( | ||
names['buttonStencil.modifiers.size.large'], | ||
names['buttonStencil.modifiers.size.large'].replace('css-', '') | ||
); | ||
}); | ||
|
||
it('should add a mapping from the hash to the extracted CSS class name to the extractedNames cache', () => { | ||
expect(extractedNames).toHaveProperty( | ||
names['buttonStencil.modifiers.size.large'].replace('css-', ''), | ||
'css-button--size-large' | ||
); | ||
}); | ||
|
||
it('should transform the runtime to include a selector with only the hash', () => { | ||
expect(result).toContain( | ||
`.${names['buttonStencil.modifiers.size.large'].replace('css-', '')} :where(&){color:blue;}` | ||
); | ||
}); | ||
|
||
it('should extract CSS to include the fully qualified modifier name', () => { | ||
expect(styles['test.css']).toContainEqual( | ||
compileCSS(` | ||
.css-child { | ||
box-sizing: border-box; | ||
} | ||
.css-button--size-large :where(.css-child) { | ||
color: blue; | ||
} | ||
`) | ||
); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters