paris 0.24.0 → 0.24.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # paris
 
+## 0.24.1
+
+### Patch Changes
+
+- 83fdca9: Fix: ship per-component CSS as plain `.css` instead of `.module.css`
+
+  v0.24.0 emitted each component's extracted CSS as a `*.module.css` file while baking the (already globally-unique) `paris_<local>_<hash>` class names into the compiled JS as literal strings. Consumer bundlers that honor the CSS-Modules naming convention (Next.js and Vite both do) re-scoped those files a second time — rewriting the selector to `.Button-module__<hash>__paris_button_<hash>`, which no longer matched the class Paris applied to the element. The result was that **every component rendered unstyled**.
+
+  The build now renames each extracted `*.module.css` to plain `*.css` and rewrites the JS side-effect import to match, so downstream bundlers treat the CSS as global (already-scoped) and leave the class names alone. Class names, the `exports` map, `sideEffects`, and the `paris/styles.css` aggregate are unchanged. Verified end-to-end in Next.js App Router and Vite React (computed `display: flex` on a rendered Button).
+
 ## 0.24.0
 
 ### Minor Changes

package/README.md

@@ -10,11 +10,11 @@ Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.desig
 
 ## Upgrading from a pre-0.24 version?
 
-As of **v0.24**, Paris ships precompiled — so you can **remove** `transpilePackages: ['paris']` and the `sass` dependency, and switch your global-styles import to `paris/theme/global.css`. Component import paths are unchanged.
+As of **v0.24**, Paris ships precompiled — so you can **remove** `transpilePackages: ['paris']` and the `sass` dependency, and switch your global-styles import to `paris/theme/global.css`. Component import paths are unchanged. (Use **`^0.24.1`** or newer — 0.24.0 had a CSS packaging bug that left components unstyled.)
 
 The easiest way to upgrade is to **hand it to your coding agent**. Copy the prompt below into Claude Code, Cursor, or any agent working in your repo:
 
-> Upgrade this project's `paris` dependency to the latest v0.24+. Follow the official migration guide at https://paris.slingshot.fm/migrate-0.24.md carefully and step by step — fetch and read the whole guide first, make only the changes it describes, and run the project's build/typecheck at the end to confirm everything passes. Report exactly what you changed.
+> Upgrade this project's `paris` dependency to `^0.24.1` (or newer). Follow the official migration guide at https://paris.slingshot.fm/migrate-0.24.md carefully and step by step — fetch and read the whole guide first, make only the changes it describes, and run the project's build/typecheck at the end to confirm everything passes. Report exactly what you changed.
 
 Prefer to do it by hand? The same guide is here: **[Migration guide → v0.24](https://paris.slingshot.fm/migrate-0.24.md)**.
 

package/dist/stories/accordion/Accordion.module.scss.js

@@ -1,4 +1,4 @@
-import './Accordion.module.css';const toggleIcon = "paris_toggleIcon_Aqg7R";
+import './Accordion.css';const toggleIcon = "paris_toggleIcon_Aqg7R";
 const open = "paris_open_Anlum";
 const title = "paris_title_quAkj";
 const plusIcon = "paris_plusIcon_vUae0";

package/dist/stories/accordionselect/AccordionSelect.module.scss.js

@@ -1,4 +1,4 @@
-import './AccordionSelect.module.css';const root = "paris_root_66wcQ";
+import './AccordionSelect.css';const root = "paris_root_66wcQ";
 const open = "paris_open_FCY1A";
 const header = "paris_header_PKn63";
 const headerContent = "paris_headerContent_GYCii";

package/dist/stories/avatar/Avatar.module.scss.js

@@ -1,4 +1,4 @@
-import './Avatar.module.css';const content = "paris_content_ckGnM";
+import './Avatar.css';const content = "paris_content_ckGnM";
 const styles = {
 	content: content
 };

package/dist/stories/button/Button.module.scss.js

@@ -1,4 +1,4 @@
-import './Button.module.css';const button = "paris_button_1IoaA";
+import './Button.css';const button = "paris_button_1IoaA";
 const primary = "paris_primary_WZ3V2";
 const secondary = "paris_secondary_PPwS-";
 const tertiary = "paris_tertiary_YxJ8t";

package/dist/stories/callout/Callout.module.scss.js

@@ -1,4 +1,4 @@
-import './Callout.module.css';const content = "paris_content_RTtwv";
+import './Callout.css';const content = "paris_content_RTtwv";
 const icon = "paris_icon_bhM1o";
 const warning = "paris_warning_cREVK";
 const negative = "paris_negative_6a2uj";

package/dist/stories/card/Card.module.scss.js

@@ -1,4 +1,4 @@
-import './Card.module.css';const container = "paris_container_PRpOa";
+import './Card.css';const container = "paris_container_PRpOa";
 const raised = "paris_raised_o1LwV";
 const pending = "paris_pending_VDHaM";
 const surface = "paris_surface_qR0mA";

package/dist/stories/cardbutton/CardButton.module.scss.js

@@ -1,4 +1,4 @@
-import './CardButton.module.css';const container = "paris_container_yNfv5";
+import './CardButton.css';const container = "paris_container_yNfv5";
 const card = "paris_card_ORTWc";
 const text = "paris_text_JEY3p";
 const raised = "paris_raised_GtoCs";

package/dist/stories/checkbox/Checkbox.module.scss.js

@@ -1,4 +1,4 @@
-import './Checkbox.module.css';const container = "paris_container_hJlaN";
+import './Checkbox.css';const container = "paris_container_hJlaN";
 const containerbutton = "paris_containerbutton_H-e8h";
 const disabled = "paris_disabled_R5-D0";
 const root = "paris_root_w6zlF";

package/dist/stories/codeinput/CodeInput.module.scss.js

@@ -1,4 +1,4 @@
-import './CodeInput.module.css';const container = "paris_container_IcGkk";
+import './CodeInput.css';const container = "paris_container_IcGkk";
 const loading = "paris_loading_qeyK6";
 const segment = "paris_segment_lMDZE";
 const error = "paris_error_Yls6v";

package/dist/stories/dialog/Dialog.module.scss.js

@@ -1,4 +1,4 @@
-import './Dialog.module.css';const root = "paris_root_2Y6y9";
+import './Dialog.css';const root = "paris_root_2Y6y9";
 const overlay = "paris_overlay_YZZ8Z";
 const overlayBlur = "paris_overlayBlur_8Wx1-";
 const overlayGrey = "paris_overlayGrey_xDbBD";

package/dist/stories/drawer/Drawer.module.scss.js

@@ -1,4 +1,4 @@
-import './Drawer.module.css';const root = "paris_root_wVedw";
+import './Drawer.css';const root = "paris_root_wVedw";
 const overlay = "paris_overlay_WN57R";
 const overlayBlur = "paris_overlayBlur_W12Sf";
 const overlayGrey = "paris_overlayGrey_q3bTn";

package/dist/stories/informationaltooltip/InformationalTooltip.module.scss.js

@@ -1,4 +1,4 @@
-import './InformationalTooltip.module.css';const tooltip = "paris_tooltip_QdB1w";
+import './InformationalTooltip.css';const tooltip = "paris_tooltip_QdB1w";
 const medium = "paris_medium_7veyJ";
 const heading = "paris_heading_wQIgt";
 const styles = {

package/dist/stories/input/Input.module.scss.js

@@ -1,4 +1,4 @@
-import './Input.module.css';const inputContainer = "paris_inputContainer_a8TwY";
+import './Input.css';const inputContainer = "paris_inputContainer_a8TwY";
 const inputScaleWrapper = "paris_inputScaleWrapper_XVKDd";
 const enhancer = "paris_enhancer_dWZ5z";
 const container = "paris_container_4aoux";

package/dist/stories/markdown/Markdown.module.scss.js

@@ -1,4 +1,4 @@
-import './Markdown.module.css';const markdown = "paris_markdown_xr6-T";
+import './Markdown.css';const markdown = "paris_markdown_xr6-T";
 const heading = "paris_heading_YY-2-";
 const paragraph = "paris_paragraph_e4anz";
 const strikethrough = "paris_strikethrough_zLlkK";

package/dist/stories/markdowneditor/FixedToolbar.module.scss.js

@@ -1,4 +1,4 @@
-import './FixedToolbar.module.css';const toolbar = "paris_toolbar_FAd-9";
+import './FixedToolbar.css';const toolbar = "paris_toolbar_FAd-9";
 const group = "paris_group_I1JpH";
 const separator = "paris_separator_qPb-B";
 const styles = {

package/dist/stories/markdowneditor/FloatingToolbar.module.scss.js

@@ -1,4 +1,4 @@
-import './FloatingToolbar.module.css';const toolbar = "paris_toolbar_ALJP3";
+import './FloatingToolbar.css';const toolbar = "paris_toolbar_ALJP3";
 const separator = "paris_separator_qOWSq";
 const styles = {
 	toolbar: toolbar,

package/dist/stories/markdowneditor/LinkPopover.module.scss.js

@@ -1,4 +1,4 @@
-import './LinkPopover.module.css';const popover = "paris_popover_NuqJ8";
+import './LinkPopover.css';const popover = "paris_popover_NuqJ8";
 const label = "paris_label_U8nq1";
 const inputRow = "paris_inputRow_pIHbL";
 const input = "paris_input_faso5";

package/dist/stories/markdowneditor/MarkdownEditor.module.scss.js

@@ -1,4 +1,4 @@
-import './MarkdownEditor.module.css';const root = "paris_root_AbYRN";
+import './MarkdownEditor.css';const root = "paris_root_AbYRN";
 const editorContainer = "paris_editorContainer_9v7gh";
 const editorContent = "paris_editorContent_WTm2y";
 const styles = {

package/dist/stories/markdowneditor/ToolbarButton.module.scss.js

@@ -1,4 +1,4 @@
-import './ToolbarButton.module.css';const button = "paris_button_o-kCm";
+import './ToolbarButton.css';const button = "paris_button_o-kCm";
 const styles = {
 	button: button
 };

package/dist/stories/menu/Menu.module.scss.js

@@ -1,4 +1,4 @@
-import './Menu.module.css';const menu = "paris_menu_HYnWi";
+import './Menu.css';const menu = "paris_menu_HYnWi";
 const menuItems = "paris_menuItems_QbqR7";
 const menuItem = "paris_menuItem_snmkz";
 const newItem = "paris_newItem_LE830";

package/dist/stories/popover/Popover.module.scss.js

@@ -1,4 +1,4 @@
-import './Popover.module.css';const trigger = "paris_trigger_NZC4B";
+import './Popover.css';const trigger = "paris_trigger_NZC4B";
 const content = "paris_content_qDvSV";
 const styles = {
 	trigger: trigger,

package/dist/stories/select/Select.module.scss.js

@@ -1,4 +1,4 @@
-import './Select.module.css';const container = "paris_container_p9NzC";
+import './Select.css';const container = "paris_container_p9NzC";
 const listboxButton = "paris_listboxButton_cDH7o";
 const chevron = "paris_chevron_A3qpw";
 const field = "paris_field_moc6-";

package/dist/stories/styledlink/StyledLink.module.scss.js

@@ -1,4 +1,4 @@
-import './StyledLink.module.css';const link = "paris_link_3T5Qd";
+import './StyledLink.css';const link = "paris_link_3T5Qd";
 const styles = {
 	link: link
 };

package/dist/stories/table/Table.module.scss.js

@@ -1,4 +1,4 @@
-import './Table.module.css';const table = "paris_table_BdqlG";
+import './Table.css';const table = "paris_table_BdqlG";
 const tableHeader = "paris_tableHeader_Uz1-B";
 const empty = "paris_empty_5JeGO";
 const clickable = "paris_clickable_g4EbF";

package/dist/stories/tabs/Tabs.module.scss.js

@@ -1,4 +1,4 @@
-import './Tabs.module.css';const tabList = "paris_tabList_oiZCx";
+import './Tabs.css';const tabList = "paris_tabList_oiZCx";
 const thick = "paris_thick_v-JaE";
 const thin = "paris_thin_JoVrb";
 const full = "paris_full_iRdoV";

package/dist/stories/tag/Tag.module.scss.js

@@ -1,4 +1,4 @@
-import './Tag.module.css';const tag = "paris_tag_QE3dx";
+import './Tag.css';const tag = "paris_tag_QE3dx";
 const normal = "paris_normal_8yko9";
 const rectangle = "paris_rectangle_0M8zy";
 const sharp = "paris_sharp_Qf5k1";

package/dist/stories/text/Text.module.scss.js

@@ -1,4 +1,4 @@
-import './Text.module.css';const text = "paris_text_RV-f-";
+import './Text.css';const text = "paris_text_RV-f-";
 const styles = {
 	text: text,
 	"weight-thin": "paris_weight-thin_VdyKV",

package/dist/stories/text/Typography.module.css.js

@@ -1,4 +1,4 @@
-import './Typography.module.css';const displayLarge = "paris_displayLarge_5a9iJ";
+import './Typography.css';const displayLarge = "paris_displayLarge_5a9iJ";
 const displayMedium = "paris_displayMedium_2lnZv";
 const display = "paris_display_gJawE";
 const displaySmall = "paris_displaySmall_pR3fw";

package/dist/stories/tilt/Tilt.module.scss.js

@@ -1,4 +1,4 @@
-import './Tilt.module.css';const container = "paris_container_LkvM4";
+import './Tilt.css';const container = "paris_container_LkvM4";
 const glareWrapper = "paris_glareWrapper_V80bN";
 const glare = "paris_glare_5v3J7";
 const styles = {

package/dist/stories/toast/Toast.module.scss.js

@@ -1,4 +1,4 @@
-import './Toast.module.css';const toast = "paris_toast_5rwNh";
+import './Toast.css';const toast = "paris_toast_5rwNh";
 const styles = {
 	toast: toast
 };

package/package.json

@@ -2,7 +2,7 @@
     "name": "paris",
     "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
     "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-    "version": "0.24.0",
+    "version": "0.24.1",
     "type": "module",
     "sideEffects": [
         "**/*.css",
@@ -31,7 +31,7 @@
         "storybook"
     ],
     "scripts": {
-        "build": "bun run generate:exports && vite build && node scripts/buildThemeCss.mjs",
+        "build": "bun run generate:exports && vite build && node scripts/postbuild.mjs",
         "build:site": "next build",
         "prepack": "bun run build",
         "storybook": "storybook dev -p 6006",