Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Theming - switched from ?inline to ?raw css imports #1600

Merged
merged 6 commits into from
Oct 27, 2023
Merged

fix: Theming - switched from ?inline to ?raw css imports #1600

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
add15f1
Switched from inline to raw
bmingles Oct 27, 2023
a2aec75
Minify theming css in build
bmingles Oct 27, 2023
884ed45
Added try / catch to MonacoUtils
bmingles Oct 27, 2023
227ffa2
Fixed styleguide
bmingles Oct 27, 2023
d478cac
Fixed babel preset
bmingles Oct 27, 2023
153cee8
Explicit build steps
bmingles Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions jest.config.base.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ module.exports = {
'node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)',
],
moduleNameMapper: {
'theme-([^/]+?)\\.css(\\?inline)?$': path.join(
'theme-([^/]+?)\\.css(\\?raw)?$': path.join(
__dirname,
'./__mocks__/css/mock-theme-$1.js'
),
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
'\\.(css|less|scss|sass)\\?inline$': path.join(
'\\.(css|less|scss|sass)\\?raw$': path.join(
__dirname,
'./__mocks__/fileMock.js'
),
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-preset/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ module.exports = api => ({
'transform-rename-import',
{
// The babel-plugin-add-import-extension adds the .js to .scss imports, just convert them back to .css
original: '^(.+?)\\.s?css(\\?inline)?\\.js$',
original: '^(.+?)\\.s?css(\\?raw)?\\.js$',
replacement: '$1.css$2',
},
],
Expand Down
10 changes: 5 additions & 5 deletions packages/code-studio/src/styleguide/ThemeColors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useMemo } from 'react';
import { Tooltip } from '@deephaven/components';
import { ColorUtils } from '@deephaven/utils';
import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline';
import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline';
import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline';
import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline';
import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline';
import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?raw';
import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?raw';
import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?raw';
import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?raw';
import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?raw';
import styles from './ThemeColors.module.scss';

// Group names are extracted from var names via a regex capture group. Most of
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/declaration.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,14 @@ declare module '*.scss?inline' {
export default content;
}

declare module '*.css?raw' {
const content: string;
export default content;
}

declare module '*.scss?raw' {
const content: string;
export default content;
}

declare module '*.scss';
25 changes: 19 additions & 6 deletions packages/components/src/theme/theme-dark/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
import themeDarkPalette from './theme-dark-palette.css?inline';
import themeDarkSemantic from './theme-dark-semantic.css?inline';
import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?inline';
import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline';
import themeDarkComponents from './theme-dark-components.css?inline';
import themeDarkPalette from './theme-dark-palette.css?raw';
import themeDarkSemantic from './theme-dark-semantic.css?raw';
import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?raw';
import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?raw';
import themeDarkComponents from './theme-dark-components.css?raw';

/**
* DH theme variables are imported via Vite `?inline` query which provides the
* DH theme variables are imported via Vite `?raw` query which provides the
* text content of the variable files as a string. The exported theme is just a
* concatenation of the contents of all of these imports.
*
* Note that ?raw / ?inline imports are natively supported by Vite, but consumers
* of @deephaven/components using Webpack will need to add a rule to their module
* config.
* e.g.
* module: {
* rules: [
* {
* resourceQuery: /inline/,
* type: 'asset/source',
* },
* ],
* },
*
* e.g.
*
* :root {
Expand Down
39 changes: 38 additions & 1 deletion packages/components/src/theme/theme-light/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,42 @@
import themeLightPalette from './theme-light-palette.css?inline';
import themeLightPalette from './theme-light-palette.css?raw';

/**
* DH theme variables are imported via Vite `?raw` query which provides the
* text content of the variable files as a string. The exported theme is just a
* concatenation of the contents of all of these imports.
*
* Note that ?raw / ?inline imports are natively supported by Vite, but consumers
* of @deephaven/components using Webpack will need to add a rule to their module
* config.
* e.g.
* module: {
* rules: [
* {
* resourceQuery: /inline/,
* type: 'asset/source',
* },
* ],
* }
*
* e.g.
*
* :root {
* --dh-color-from-light-palette: #fff;
* --dh-color-from-light-palette2: #ccc;
* }
* :root {
* --dh-color-from-light-semantic: #000;
* }
* :root {
* --dh-color-from-light-semantic-editor: #000;
* }
* :root {
* --dh-color-from-light-semantic-grid: #000;
* }
* :root {
* --dh-color-from-light-components: #000;
* }
*/
Comment on lines +21 to +38
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure where this example came from?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's just an example of concatenation of themes (modified from the comment in the dark one). Once light theme is actually implemented there will be multiple imports

export const themeLight = themeLightPalette;

export default themeLight;
Loading