diff --git a/assets/build.js b/assets/build.js index 75c3c6398c8..b4bd08ede9e 100644 --- a/assets/build.js +++ b/assets/build.js @@ -3,6 +3,8 @@ const esbuild = require("esbuild"); const stylePlugin = require("esbuild-style-plugin"); const postcssImport = require("postcss-import"); const tailwind = require("tailwindcss"); +const tailwindNesting = require("tailwindcss/nesting"); +const postcssNesting = require("postcss-nesting"); const autoprefixer = require("autoprefixer"); const args = process.argv.slice(2); @@ -27,7 +29,13 @@ async function main() { plugins: [ stylePlugin({ postcss: { - plugins: [postcssImport, tailwind, autoprefixer], + plugins: [ + postcssImport, + // See https://tailwindcss.com/docs/using-with-preprocessors#nesting + tailwindNesting(postcssNesting), + tailwind, + autoprefixer, + ], }, }), ], diff --git a/assets/css/js_interop.css b/assets/css/js_interop.css index ca2eb833cff..d3394c136dc 100644 --- a/assets/css/js_interop.css +++ b/assets/css/js_interop.css @@ -1,450 +1,338 @@ /* Conditional elements display. -Verious hooks and callbacks dynamically set attributes -based on which we hide/show certain elements. -This way we don't have to engage the server in -solely client-side operations. +Verious hooks and callbacks dynamically set attributes based on which +we hide/show certain elements. This way we don't have to engage the +server in solely client-side operations. */ -/* === Global === */ - -[phx-hook="Highlight"][data-highlighted] > [data-source] { - @apply hidden; -} +/* Hooks */ [phx-hook="Dropzone"][data-js-dragging] { @apply bg-blue-100 border-blue-300; } -/* === Session === */ - -[data-el-session]:not([data-js-insert-mode]) [data-el-insert-mode-indicator] { - @apply invisible; -} - -[data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="markdown"] - [data-el-editor-box], -[data-el-session][data-js-insert-mode] - [data-el-cell][data-type="markdown"]:not([data-js-focused]) - [data-el-editor-box] { - @apply hidden; -} - -[data-el-session][data-js-insert-mode] - [data-el-cell][data-js-focused] - [data-el-enable-insert-mode-button] { - @apply hidden; -} - -[data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="markdown"][data-js-focused] - [data-el-insert-image-button] { - @apply hidden; -} - -[data-el-notebook-headline]:hover [data-el-heading], -[data-el-section-headline]:hover [data-el-heading] { - @apply border-blue-200; -} - -[data-el-notebook-headline][data-js-focused] [data-el-heading], -[data-el-section-headline][data-js-focused] [data-el-heading] { - @apply border-blue-300 outline-none; -} - -[data-el-section-headline]:not(:hover):not([data-js-focused]) - [data-el-heading] - + [data-el-section-actions]:not(:focus-within) { - @apply hidden; -} - -[data-el-section][data-js-collapsed] [data-el-section-collapse-button], -[data-el-section]:not([data-js-collapsed]) - [data-el-section-headline]:not(:hover):not([data-js-focused]) - [data-el-section-collapse-button], -[data-el-section]:not([data-js-collapsed]) [data-el-section-expand-button], -[data-el-session]:not([data-js-view="code-zen"]) - [data-el-section][data-js-collapsed] - > [data-el-section-content], -[data-el-section]:not([data-js-collapsed]) - > [data-el-section-subheadline-collapsed] { - @apply hidden; -} - -[data-el-session]:not([data-js-dragging]) [data-el-insert-drop-area] { - @apply hidden; -} - -[data-el-session]:not([data-js-dragging="external"]) [data-el-files-drop-area] { - @apply hidden; -} - -[data-el-session][data-js-dragging="external"] [data-el-files-add-button] { - @apply hidden; -} - -[data-el-cell][data-js-focused] { - @apply border-blue-300 border-opacity-100; -} - -[data-el-cell]:not([data-js-focused]) [data-el-actions]:not(:focus-within) { - /* Note: using opacity, so the buttons are focusable (via tab navigation) - and when focused we show the actions back. */ - @apply opacity-0; -} - -[data-el-cell]:not([data-js-focused]) - [data-el-actions]:not([data-primary]):not(:focus-within) { - @apply pointer-events-none; -} - -[data-el-cell]:not([data-js-focused])[data-js-hover] - [data-el-actions][data-primary] { - @apply opacity-100 pointer-events-auto; -} - -[data-el-cell][data-js-changed] [data-el-cell-status] { - @apply italic; -} - -[data-el-cell]:not([data-js-changed]) - [data-el-cell-status] - [data-el-change-indicator] { - @apply invisible; -} - -[data-el-outline-item][data-js-is-viewed] { - @apply text-gray-900; -} +/* Session */ + +[data-el-session] { + /* Sections */ + + [data-el-notebook-headline], + [data-el-section-headline] { + &:hover [data-el-heading] { + @apply border-blue-200; + } + + &[data-js-focused] [data-el-heading] { + @apply border-blue-300 outline-none; + } + } + + [data-el-section-headline]:not(:hover, [data-js-focused]) + [data-el-section-actions] { + @apply hidden; + } + + [data-el-section][data-js-collapsed] [data-el-section-collapse-button], + &:not([data-js-hide-section]) + [data-el-section][data-js-collapsed] + [data-el-section-content] { + @apply hidden; + } + + [data-el-section]:not([data-js-collapsed]) + :is( + [data-el-section-headline]:not(:hover, [data-js-focused]) + [data-el-section-collapse-button], + [data-el-section-expand-button], + [data-el-section-subheadline-collapsed] + ) { + @apply hidden; + } + + /* Cells */ + + &:not([data-js-insert-mode]) [data-el-insert-mode-indicator] { + @apply invisible; + } + + [data-el-cell][data-js-hover] [data-el-cell-focus-indicator] { + @apply bg-blue-200; + } + + [data-el-cell][data-js-focused] { + @apply border-blue-300 border-opacity-100; + + [data-el-cell-focus-indicator] { + @apply bg-blue-300; + } + } + + [data-el-cell]:not([data-js-focused]) { + /* We use opacity, so the buttons are focusable via tab navigation */ + + & [data-el-actions][data-secondary] { + @apply opacity-0 pointer-events-none; + } + + &:not([data-js-hover]) [data-el-actions][data-primary] { + @apply opacity-0; + } + } + + [data-el-cell][data-js-changed] [data-el-cell-status] { + @apply italic; + } + + [data-el-cell]:not([data-js-changed]) + [data-el-cell-status] + [data-el-change-indicator] { + @apply invisible; + } + + [data-el-cell][data-type="markdown"]:not([data-js-insert-mode]) + [data-el-editor-box] { + @apply hidden; + } + + [data-el-cell][data-type="markdown"][data-js-insert-mode] + [data-el-enable-insert-mode-button] { + @apply hidden; + } + + [data-el-cell][data-type="smart"][data-js-source-visible] { + [data-el-ui-box] { + @apply hidden; + } + + [data-el-toggle-source-button] > button { + @apply bg-gray-100 text-gray-900; + } + } + + [data-el-cell][data-type="smart"]:not([data-js-source-visible]) { + [data-el-editor-box] { + @apply hidden; + } + + [data-el-cell-indicators] { + @apply static flex justify-end pt-2; + } + + [data-el-cell-indicator] { + @apply bg-gray-50 border-gray-200 text-gray-500; + } + } -[data-el-cell]:not([data-js-focused])[data-js-hover] - [data-el-cell-focus-indicator] { - @apply bg-blue-200; -} - -[data-el-cell][data-js-focused] [data-el-cell-focus-indicator] { - @apply bg-blue-300; -} - -[data-el-cell][data-js-amplified] [data-el-outputs-container] { - @apply bg-white m-0 py-16; - - width: 90vw; - position: relative; - left: calc(-45vw + 50%); -} - -[data-el-cell][data-js-amplified] [data-el-amplify-outputs-button] > button { - @apply bg-gray-100 text-gray-900; -} - -[data-el-cell][data-type="smart"]:not([data-js-source-visible]) - [data-el-editor-box] { - /* Note: we intentionally don't hide the editor, because this leads - to issues with hover intellisense once the editor is shown. */ - @apply h-0 overflow-hidden; -} - -[data-el-cell][data-type="smart"][data-js-source-visible] [data-el-ui-box] { - @apply hidden; -} - -[data-el-cell][data-type="smart"]:not([data-js-source-visible]) - [data-el-cell-indicators] { - @apply static flex justify-end pt-2; -} - -[data-el-cell][data-type="smart"]:not([data-js-source-visible]) - [data-el-cell-indicator] { - @apply bg-gray-50 border-gray-200 text-gray-500; -} - -[data-el-session] [data-el-cell][data-type="setup"]:not( - [data-eval-validity="fresh"]:not([data-js-empty]) - ):not([data-eval-errored]):not([data-js-changed]):not([data-js-focused]) - [data-el-editor-box] { - @apply h-0 overflow-hidden; -} - -[data-el-session] - [data-el-cell][data-type="setup"]:not( - [data-eval-validity="fresh"]:not([data-js-empty]) - ):not([data-eval-errored]):not([data-js-changed]):not([data-js-focused]) - [data-el-cell-indicator] { - @apply bg-gray-50 border-gray-200 text-gray-500; -} - -[data-el-session] - [data-el-cell][data-type="setup"][data-js-focused] - [data-el-info-box], -[data-el-session] - [data-el-cell][data-type="setup"][data-eval-validity="fresh"]:not( - [data-js-empty] - ) - [data-el-info-box], -[data-el-session] - [data-el-cell][data-type="setup"][data-eval-errored] - [data-el-info-box], -[data-el-session] - [data-el-cell][data-type="setup"][data-js-changed] - [data-el-info-box] { - @apply hidden; -} - -[data-el-cell][data-type="smart"][data-js-source-visible] - [data-el-toggle-source-button] - > button { - @apply bg-gray-100 text-gray-900; -} - -[data-el-cell][data-type="smart"][data-js-source-visible] - [data-el-cell-status-container] { - @apply absolute bottom-2 right-2; -} - -[data-el-output][data-border] { - @apply p-4 border border-t-0 border-gray-200 divide-y divide-gray-200; -} - -[data-el-output][data-border]:first-child { - @apply rounded-t-lg border-t; -} - -[data-el-output]:not([data-border]) + [data-el-output][data-border] { - @apply border-t; -} - -[data-el-output][data-border]:last-child { - @apply rounded-b-lg border-b; -} - -[data-el-output]:not(:first-child) { - @apply mt-2; -} - -[data-el-output][data-border] + [data-el-output][data-border] { - @apply mt-0; -} - -[data-el-outputs-container] > [data-el-output]:first-child { - @apply mt-2; -} - -[data-el-session]:not([data-js-side-panel-content]) [data-el-side-panel] { - @apply hidden; -} - -[data-el-session]:not([data-js-side-panel-content="outline"]) - [data-el-outline] { - @apply hidden; -} - -[data-el-session]:not([data-js-side-panel-content="clients-list"]) - [data-el-clients-list] { - @apply hidden; -} - -[data-el-session]:not([data-js-side-panel-content="secrets-list"]) - [data-el-secrets-list] { - @apply hidden; -} - -[data-el-session]:not([data-js-side-panel-content="files-list"]) - [data-el-files-list] { - @apply hidden; -} - -[data-el-session]:not([data-js-side-panel-content="runtime-info"]) - [data-el-runtime-info] { - @apply hidden; -} - -[data-el-session][data-js-side-panel-content="runtime-info"] - [data-el-runtime-indicator] { - @apply border-gray-700; -} - -[data-el-session]:not([data-js-side-panel-content="app-info"]) - [data-el-app-info] { - @apply hidden; -} - -[data-el-session][data-js-side-panel-content="outline"] - [data-el-outline-toggle] { - @apply text-gray-50 bg-gray-700; -} - -[data-el-session][data-js-side-panel-content="clients-list"] - [data-el-clients-list-toggle] { - @apply text-gray-50 bg-gray-700; -} - -[data-el-session][data-js-side-panel-content="secrets-list"] - [data-el-secrets-list-toggle] { - @apply text-gray-50 bg-gray-700; -} - -[data-el-session][data-js-side-panel-content="files-list"] - [data-el-files-list-toggle] { - @apply text-gray-50 bg-gray-700; -} - -[data-el-session][data-js-side-panel-content="runtime-info"] - [data-el-runtime-info-toggle] { - @apply text-gray-50 bg-gray-700; -} - -[data-el-session][data-js-side-panel-content="app-info"] - [data-el-app-info-toggle] { - @apply text-gray-50 bg-gray-700; -} - -[data-el-clients-list-item]:not([data-js-followed]) [data-meta="unfollow"] { - @apply hidden; -} - -[data-el-clients-list-item][data-js-followed] [data-meta="follow"] { - @apply hidden; -} - -/* === Session views === */ - -[data-el-session][data-js-view="code-zen"] [data-el-view-toggle="code-zen"] { - @apply text-green-bright-400; -} - -[data-el-session][data-js-view="presentation"] - [data-el-view-toggle="presentation"] { - @apply text-green-bright-400; -} - -[data-el-session][data-js-view="custom"] [data-el-view-toggle="custom"] { - @apply text-green-bright-400; -} - -[data-el-session][data-js-view] - :is([data-el-actions], [data-el-insert-buttons]) { - @apply hidden; -} - -[data-el-session][data-js-view] [data-el-views-disabled] { - @apply hidden; -} - -[data-el-session]:not([data-js-view]) [data-el-views-enabled] { - @apply hidden; -} - -[data-js-hide-output] [data-el-output] { - @apply hidden; -} - -[data-js-hide-section] - :is( + [data-js-focused], + [data-eval-validity="fresh"]:not([data-js-empty]), + [data-eval-errored], + [data-js-changed] + ) { + [data-el-editor-box] { + @apply hidden; + } + + [data-el-cell-indicator] { + @apply bg-gray-50 border-gray-200 text-gray-500; + } + } + + [data-el-cell][data-type="setup"]:is( + [data-js-focused], + [data-eval-validity="fresh"]:not([data-js-empty]), + [data-eval-errored], + [data-js-changed] + ) + [data-el-info-box] { + @apply hidden; + } + + /* Outputs */ + + [data-el-cell][data-js-amplified] { + [data-el-amplify-outputs-button] > button { + @apply bg-gray-100 text-gray-900; + } + + [data-el-outputs-container] { + @apply bg-white m-0 py-16; + + width: 90vw; + position: relative; + left: calc(-45vw + 50%); + } + } + + [data-el-output][data-border] { + @apply p-4 border border-t-0 border-gray-200 divide-y divide-gray-200; + } + + [data-el-output][data-border]:first-child { + @apply rounded-t-lg border-t; + } + + [data-el-output]:not([data-border]) + [data-el-output][data-border] { + @apply border-t; + } + + [data-el-output][data-border]:last-child { + @apply rounded-b-lg border-b; + } + + [data-el-output]:not(:first-child) { + @apply mt-2; + } + + [data-el-output][data-border] + [data-el-output][data-border] { + @apply mt-0; + } + + [data-el-outputs-container] > [data-el-output]:first-child { + @apply mt-2; + } + + /* Side panel */ + + &:not([data-js-side-panel-content]) [data-el-side-panel] { + @apply hidden; + } + + &:not([data-js-side-panel-content="outline"]) [data-el-outline], + &:not([data-js-side-panel-content="clients-list"]) [data-el-clients-list], + &:not([data-js-side-panel-content="secrets-list"]) [data-el-secrets-list], + &:not([data-js-side-panel-content="files-list"]) [data-el-files-list], + &:not([data-js-side-panel-content="runtime-info"]) [data-el-runtime-info], + &:not([data-js-side-panel-content="app-info"]) [data-el-app-info] { + @apply hidden; + } + + &[data-js-side-panel-content="outline"] [data-el-outline-toggle], + &[data-js-side-panel-content="clients-list"] [data-el-clients-list-toggle], + &[data-js-side-panel-content="secrets-list"] [data-el-secrets-list-toggle], + &[data-js-side-panel-content="files-list"] [data-el-files-list-toggle], + &[data-js-side-panel-content="runtime-info"] [data-el-runtime-info-toggle], + &[data-js-side-panel-content="app-info"] [data-el-app-info-toggle] { + @apply text-gray-50 bg-gray-700; + } + + &[data-js-side-panel-content="runtime-info"] [data-el-runtime-indicator] { + @apply border-gray-700; + } + + [data-el-clients-list-item]:not([data-js-followed]) [data-meta="unfollow"] { + @apply hidden; + } + + [data-el-clients-list-item][data-js-followed] [data-meta="follow"] { + @apply hidden; + } + + [data-el-outline-item][data-js-is-viewed] { + @apply text-gray-900; + } + + /* Drag and drop */ + + &:not([data-js-dragging]) [data-el-insert-drop-area] { + @apply hidden; + } + + &:not([data-js-dragging="external"]) [data-el-files-drop-area] { + @apply hidden; + } + + &[data-js-dragging="external"] [data-el-files-add-button] { + @apply hidden; + } + + /* Session views */ + + &[data-js-view="code-zen"] [data-el-view-toggle="code-zen"], + &[data-js-view="presentation"] [data-el-view-toggle="presentation"], + &[data-js-view="custom"] [data-el-view-toggle="custom"] { + @apply text-green-bright-400; + } + + &[data-js-view] { + [data-el-actions], + [data-el-insert-buttons] { + @apply hidden; + } + + [data-el-views-disabled] { + @apply hidden; + } + } + + &:not([data-js-view]) [data-el-views-enabled] { + @apply hidden; + } + + &[data-js-hide-output] { + [data-el-outputs-container] { + @apply hidden; + } + } + + &[data-js-hide-section] { [data-el-section-headline], [data-el-section-subheadline], - [data-el-section-subheadline-collapsed] - ) { - @apply hidden; -} - -[data-js-hide-section] [data-el-sections-container] { - @apply space-y-0 mt-0; -} - -[data-js-hide-markdown] [data-el-cell][data-type="markdown"] { - @apply hidden; -} - -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell] - [data-el-cell-indicator], -[data-js-hide-code][data-el-session] - [data-el-cell]:not([data-js-focused]) - [data-el-cell-indicator] { - @apply bg-gray-50 border-gray-200 text-gray-500; -} - -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="code"] - [data-el-editor-box], -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="code"]:not([data-js-focused]) - [data-el-editor-box] { - @apply hidden; -} - -[data-js-hide-code][data-el-session] - [data-el-cell][data-type="setup"] - [data-el-info-box], -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="setup"] - [data-el-editor-box], -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="setup"]:not([data-js-focused]) - [data-el-editor-box] { - @apply hidden; -} - -[data-js-hide-code] [data-el-cell][data-type="smart"] [data-el-ui-box] { - @apply hidden; -} - -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="smart"] - [data-el-editor-box], -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="smart"]:not([data-js-focused]) - [data-el-editor-box] { - @apply hidden; -} - -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="code"] - [data-el-cell-body-root]:after, -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="code"]:not([data-js-focused]) - [data-el-cell-body-root]:after, -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="setup"] - [data-el-cell-body-root]:after, -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="setup"]:not([data-js-focused]) - [data-el-cell-body-root]:after, -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="smart"] - [data-el-cell-body-root]:after, -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="smart"]:not([data-js-focused]) - [data-el-cell-body-root]:after { - content: "Code"; - - @apply flex py-2 px-3 border border-gray-200 rounded-lg text-sm text-gray-400 font-medium; -} - -[data-js-hide-code][data-el-session]:not([data-js-insert-mode]) - [data-el-cell][data-type="smart"] - [data-el-cell-indicators], -[data-js-hide-code][data-el-session][data-js-insert-mode] - [data-el-cell][data-type="smart"]:not([data-js-focused]) - [data-el-cell-indicators] { - @apply absolute bottom-2 right-2; -} - -[data-js-spotlight] - :is( + [data-el-section-subheadline-collapsed] { + @apply hidden; + } + + [data-el-sections-container] { + @apply space-y-0 mt-0; + } + } + + &[data-js-hide-markdown] { + [data-el-cell][data-type="markdown"] { + @apply hidden; + } + } + + &[data-js-hide-code] { + [data-el-cell]:is( + [data-type="code"], + [data-type="setup"], + [data-type="smart"] + ):not([data-js-insert-mode]) { + [data-el-editor-box], + &[data-type="setup"] [data-el-info-box], + &[data-type="smart"] [data-el-ui-box] { + @apply hidden; + } + + [data-el-cell-body-root]:after { + @apply flex py-2 px-3 border border-gray-200 rounded-lg text-sm text-gray-400 font-medium; + content: "Code"; + } + + [data-el-cell-indicator] { + @apply bg-gray-50 border-gray-200 text-gray-500; + } + + &[data-type="smart"] [data-el-cell-indicators] { + @apply absolute bottom-2 right-2; + } + } + } + + &[data-js-spotlight] { [data-el-section-headline]:not([data-js-focused]), [data-el-section-subheadline]:not([data-js-focused]), [data-el-cell]:not([data-js-focused]), - [data-el-js-view-iframes] iframe:not([data-js-focused]) - ) { - @apply opacity-10; -} - -[data-js-spotlight] - :is([data-el-sidebar], [data-el-side-panel], [data-el-toggle-sidebar]) { - @apply hidden; + [data-el-js-view-iframes] iframe:not([data-js-focused]) { + @apply opacity-10; + } + + [data-el-sidebar], + [data-el-side-panel], + [data-el-toggle-sidebar] { + @apply hidden; + } + } } diff --git a/assets/js/hooks/cell.js b/assets/js/hooks/cell.js index e79e46052e7..9d551a7ddf9 100644 --- a/assets/js/hooks/cell.js +++ b/assets/js/hooks/cell.js @@ -330,6 +330,7 @@ const Cell = { handleInsertModeChanged(insertMode) { if (this.isFocused && !this.insertMode && insertMode) { this.insertMode = insertMode; + this.el.setAttribute("data-js-insert-mode", ""); if (this.currentEditor()) { this.currentEditor().focus(); @@ -337,6 +338,7 @@ const Cell = { } } else if (this.insertMode && !insertMode) { this.insertMode = insertMode; + this.el.removeAttribute("data-js-insert-mode"); if (this.currentEditor()) { this.currentEditor().blur(); diff --git a/assets/js/hooks/highlight.js b/assets/js/hooks/highlight.js index b557f6f080c..21241aa1823 100644 --- a/assets/js/hooks/highlight.js +++ b/assets/js/hooks/highlight.js @@ -41,7 +41,7 @@ const Highlight = { const html = highlight(code, this.props.language); this.targetEl.innerHTML = html; - this.el.setAttribute("data-highlighted", ""); + this.sourceEl.style.display = "none"; }, }; diff --git a/assets/package-lock.json b/assets/package-lock.json index ba4db095165..dc1726d1023 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -4,7 +4,6 @@ "requires": true, "packages": { "": { - "name": "assets", "dependencies": { "@codemirror/autocomplete": "^6.11.1", "@codemirror/commands": "^6.3.3", @@ -66,6 +65,7 @@ "esbuild-style-plugin": "^1.6.2", "postcss": "^8.2.3", "postcss-import": "^16.0.0", + "postcss-nesting": "^13.0.1", "prettier": "^3.0.3" } }, @@ -12666,6 +12666,94 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-nesting": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.1.tgz", + "integrity": "sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/selector-resolve-nested": "^3.0.0", + "@csstools/selector-specificity": "^5.0.0", + "postcss-selector-parser": "^7.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/postcss-nesting/node_modules/@csstools/selector-resolve-nested": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.0.0.tgz", + "integrity": "sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^7.0.0" + } + }, + "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz", + "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^7.0.0" + } + }, + "node_modules/postcss-nesting/node_modules/postcss-selector-parser": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz", + "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/postcss-selector-parser": { "version": "6.1.2", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", diff --git a/assets/package.json b/assets/package.json index 3c68fdae39d..64486dd9a32 100644 --- a/assets/package.json +++ b/assets/package.json @@ -69,6 +69,7 @@ "esbuild-style-plugin": "^1.6.2", "postcss": "^8.2.3", "postcss-import": "^16.0.0", + "postcss-nesting": "^13.0.1", "prettier": "^3.0.3" } } diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex index 0f9948ac7ab..3e1fa79c937 100644 --- a/lib/livebook_web/live/session_live/cell_component.ex +++ b/lib/livebook_web/live/session_live/cell_component.ex @@ -301,6 +301,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do role="toolbar" aria-label="cell actions" data-el-actions + data-secondary > {render_slot(@secondary)}