▸case-01 In a frontend project using scoped CSS stylesheets, you need to apply existing styles from `reset.module.css` (specifically the `.reset` class) directly inside a new class `.button` defined within `Button.module.css`. A developer suggested using `@import './reset.module.css';` at the top of the file or copying the CSS properties manually. Provide the CSS rule for `.button` inside `Button.module.css` using class composition. | pass→pass | 9,096 | 8,484 | -7% | 1 | 1 | 0% | 715 | 700 | -2% | 0 | 0 | — |
▸case-02 In `Button.module.css`, you have an existing `.button` class. You need to create a `.primary` class in the same file that inherits all rules from `.button` before adding specific background colors. A colleague suggests using Sass `@extend .button` or duplicating the button CSS declarations. Write the CSS selector block for `.primary` using scoped CSS composition. | pass→pass | 9,748 | 12,794 | +31% | 1 | 1 | 0% | 789 | 765 | -3% | 0 | 0 | — |
▸case-03 You are building a React component `Button.tsx` and importing scoped styles from `Button.module.css`. The stylesheet defines a `.primary` class. A developer wrote `<button className="primary">` and noticed no styling appeared because class names are scoped. Show how to bind the primary selector to the JSX `<button>` element using the imported `styles` object. | pass→pass | 10,763 | 13,229 | +23% | 1 | 1 | 0% | 927 | 1,270 | +37% | 0 | 0 | — |
▸case-04 In `Dropdown.module.css`, you need to style a third-party class `.select2-dropdown` without having the CSS compiler scramble or hash the class name. A teammate suggested moving all dropdown styles to an un-scoped global file. Write the selector in `Dropdown.module.css` that targets `.select2-dropdown` while keeping it unhashed. | pass→pass | 16,705 | 4,994 | -70% | 1 | 1 | 0% | 683 | 968 | +42% | 0 | 0 | — |
▸case-05 Inside a scoped CSS stylesheet where a section is configured with `:global`, you need to explicitly enforce local class name hashing for a nested class `.custom-item`. Show the selector syntax used to explicitly restore local scoping for `.custom-item`. | pass→pass | 9,275 | 9,594 | +3% | 1 | 1 | 0% | 718 | 1,004 | +40% | 0 | 0 | — |
▸case-06 In a Vite React application, CSS class names in `Card.module.css` use kebab-case such as `.card-header`. Developers want to reference them in JSX as `styles.cardHeader` without writing custom JavaScript mapping objects. Identify the configuration option in `vite.config.ts` under `css.modules` that enables camelCase class property mapping. | fail→pass | 10,416 | 9,915 | -5% | 1 | 1 | 0% | 1,007 | 1,038 | +3% | 0 | 0 | — |
▸case-07 When configuring `css-loader` in Webpack for development, you want compiled class names to follow a custom template like `[name]__[local]___[hash:base64:5]`. Identify the options property name inside `css-loader` modules settings used to specify this naming pattern. | fail→fail | 8,519 | 8,609 | +1% | 1 | 1 | 0% | 673 | 786 | +17% | 0 | 0 | — |
▸case-08 In a React component importing `styles` from `Alert.module.css`, you need to apply `styles.alert` and conditionally add `styles.error` when `isError` is true. A developer wrote `className={styles.alert + styles.error}` which concatenates the class names without a separating space. Show how to correctly format `className` using JS template literals. | pass→pass | 5,506 | 4,984 | -9% | 1 | 1 | 0% | 951 | 1,081 | +14% | 0 | 0 | — |
▸case-09 You are implementing component theming in `Card.module.css`. Rather than creating separate module files for dark and light themes, show how to declare the `.card` background color property using a CSS custom property `--card-bg`. | pass→pass | 12,446 | 8,953 | -28% | 1 | 1 | 0% | 1,150 | 1,812 | +58% | 0 | 0 | — |
▸case-10 Write a `.primaryButton` class rule inside `Button.module.css` that inherits base styles from `.btn` in the same file and sets the `color` property using a custom CSS variable `--color-accent`. | pass→pass | 4,145 | 2,758 | -33% | 1 | 1 | 0% | 559 | 649 | +16% | 0 | 0 | — |
▸case-11 In `Panel.module.css`, you want `.panel` to inherit two separate utility classes, `flexColumn` and `cardShadow`, from `layout.module.css`. Show the single `composes` statement inside `.panel` that imports both classes from `./layout.module.css`. | pass→pass | 2,856 | 2,215 | -22% | 1 | 1 | 0% | 480 | 589 | +23% | 0 | 0 | — |
▸case-12 When importing `Button.module.css` in React TypeScript files, TypeScript reports `Cannot find module './Button.module.css'`. Provide the declaration code for a `declarations.d.ts` file that defines type support for all `.module.css` files. | pass→pass | 10,175 | 5,234 | -49% | 1 | 1 | 0% | 889 | 1,134 | +28% | 0 | 0 | — |
▸case-13 A developer wrote `h1 { color: red; }` inside `Header.module.css` expecting `h1` elements in other components to remain unaffected. Explain why plain element tag selectors are risky in scoped stylesheets and state what selector type should be used instead. | pass→pass | 7,894 | 5,670 | -28% | 1 | 1 | 0% | 1,265 | 1,082 | -14% | 0 | 0 | — |
▸case-14 In a Next.js React application, you want to add component-level scoped styles for `Hero.tsx` using native framework support without installing third-party CSS-in-JS packages. What specific file extension suffix must be used for the stylesheet? | pass→pass | 3,920 | 5,384 | +37% | 1 | 1 | 0% | 665 | 761 | +14% | 0 | 0 | — |
▸case-15 In a CSS class selector rule block using composition, where must the `composes` statement be positioned relative to standard property declarations like `padding` or `margin`? | pass→pass | 6,783 | 8,339 | +23% | 1 | 1 | 0% | 1,191 | 775 | -35% | 0 | 0 | — |
▸case-16 In `Spinner.module.css`, you define `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` and reference it in `.spinner { animation: spin 1s infinite linear; }`. Describe how `@keyframes` identifier names are handled during CSS Module compilation. | pass→pass | 15,528 | 9,022 | -42% | 1 | 1 | 0% | 1,694 | 1,567 | -7% | 0 | 0 | — |
▸case-17 In `Card.module.css`, you need to apply dark background styles to `.card` only when `[data-theme="dark"]` is set on the root element. Show the selector that combines global data attribute matching with the local `.card` class. | pass→pass | 4,802 | 3,957 | -18% | 1 | 1 | 0% | 924 | 855 | -7% | 0 | 0 | — |
▸case-18 You have a reusable React component `Badge` that accepts an optional `className` prop. Inside `Badge.tsx`, show how to combine its default local `styles.badge` class with the incoming `className` prop string. | fail→fail | 8,430 | 12,143 | +44% | 1 | 1 | 0% | 1,611 | 1,546 | -4% | 0 | 0 | — |
▸case-19 In `Button.module.css`, write the selector rule for adding a hover state to the local `.btn` class that sets `background-color: #0056b3`. | pass→pass | 2,333 | 2,304 | -1% | 1 | 1 | 0% | 359 | 435 | +21% | 0 | 0 | — |
▸case-20 A developer asks how CSS Modules composition differs from Sass `@extend` in terms of JavaScript imports. Describe what the exported `styles` object property contains when a class composes another class. | pass→pass | 10,401 | 7,049 | -32% | 1 | 1 | 0% | 1,724 | 1,521 | -12% | 0 | 0 | — |
▸case-21 In a project configured with Tailwind CSS and PostCSS, a developer writes `.btn { @apply bg-blue-500 text-white; }` in `styles.css`. Explain how PostCSS compiles this `@apply` directive compared to class mapping objects. | pass→pass | 23,210 | 11,944 | -49% | 1 | 1 | 0% | 2,519 | 2,545 | +1% | 0 | 0 | — |
▸case-22 You are building a 3-column page layout in CSS. The left sidebar must be fixed at 250px, the right sidebar fixed at 300px, and the middle main column must stretch to fill all remaining horizontal space. Write the `grid-template-columns` CSS declaration. | pass→pass | 2,944 | 2,292 | -22% | 1 | 1 | 0% | 345 | 538 | +56% | 0 | 0 | — |
▸case-23 In a React application using `styled-components`, you define `const Button = styled.button` and want to set `background-color` based on JavaScript props (`props.$primary`). Show the tagged template literal interpolation syntax for evaluating this dynamic prop. | pass→pass | 3,696 | 4,519 | +22% | 1 | 1 | 0% | 688 | 819 | +19% | 0 | 0 | — |
▸case-24 In `Card.module.css`, you have local classes `.flexBox` and `.shadow`. Write the `.card` class block in the same file that composes both `.flexBox` and `.shadow`. | pass→pass | 2,527 | 2,192 | -13% | 1 | 1 | 0% | 430 | 476 | +11% | 0 | 0 | — |
▸case-25 In `Button.module.css`, `.baseButton` composes `.reset` from `./reset.module.css`. Then `.primaryButton` composes `.baseButton`. When `styles.primaryButton` is imported in JavaScript, what does its string value represent? | pass→pass | 18,882 | 6,124 | -68% | 1 | 1 | 0% | 1,111 | 1,301 | +17% | 0 | 0 | — |