Use native CSS variables instead of compiling them into the bundle #3201
Assignees
Labels
Comments
|
Good idea. Would interfere with the iframe when using it on (as the host css is also loaded in the iframe for the inline toolbar) |
|
is done via #3200 we decided to prefix them with |
Merged
54 tasks
i guess so one can better reuse the styles? how do we want to solve this for the separate distributed react-ui components package? |
|
Yes I did that already for backend modules in https://github.com/neos/neos-development-collection/blob/8.2/Neos.Neos/Resources/Private/Styles/_CSSVariables.scss |
|
So this section is only for the case if someone uses react-ui-components without the post-css-replace-variables thing and relies on real css variables beeing there? |
|
Yes or mixes react ui components with custom elements that should use the same variables. |
wie kritisch siehst du das? |
|
With namespacing shouldn't be an issue right? |
|
Im rethinking in general how we distribute the react ui components #3213 (comment) and would like to chat with you about that soon |
This was referenced Oct 12, 2022
markusguenther
added a commit
that referenced
this issue
Nov 24, 2022
* wip * wip * TASK: ignore intelliJ project settings file * WIP: ESbuild with functioning JS, only postcss 'composes' does not work * WIP: correctly load svg files * WIP: convert reset.css to normal css * WIP: Fix Build - Iframe Host Styles - HostOnlyStyles - fortawesome string replace * WIP: use css standard css variables * WIP: use standard css variables * WIP: fix dropdown includes, add some docs * WIP: STYLES WORK * TASK: fix reset styles import mixin * WIP: Replace Webpack with esbuild in Makefile * WIP: ckeditor load svg as text * TASK: remove unwanted duplication * WIP: exlude regex for stylePlugin::cssModulesMatch * TASK: correctly import .vanilla-css and codemirror highlight js * BUGFIX: fix CKEditor table handle * TASK: revert build-essentials * TASK: remove old build setup stuff * TASK: activate minify in production * TASK: fix code style to make linter happy * TASK: Cleanup NodeCreationDialog getDerivedStateFromProps * Task: Esbuild improve excluding of CKEditor styles * Wip: Define global as alias for window to make react-dnd work again #3200 (comment) we somehow have a dependency which uses global and because we where lazy we just defined in esbuild to insert for `global` an empty object `{}` like: we dont care. i forgot about that line in the build script and dindt gave it much mlre attention - and considered it harmless after playing debugging randomly and lately playing divide and conquer i found out that react-dnd uses either `global` (if defined) or `window` to store things - that broke it (as global was now everytime replaced with an empy object -> see esbuild 'define') :verschwitztes_lachen: the hotfix is `global = window` but ill try to narrow down the problem to fix it more accurately * Wip: Fix helpmessages by upgrading `react-markdown` from 5 to 8 #3200 (comment) * Wip: Better way to fix `react-codemirror2` global ussage I find using `'global': 'window'` gives us not enough control about when it was accidentally used #3200 (comment) * Wip: `ClientEval:` use `new Function` instead of unsave `eval` Removes the warning Using direct eval with a bundler is not recommended and may cause problems see https://esbuild.github.io/link/direct-eval * WIP: Fix redux: yield [...effects] has been deprecated in favor of all([...effects]) * WIp: Fix EmailAddressValidator polyfill Buffer and remove utils * Wip: Build the ui without make build-subpackages it does produces a better bundle to use the source files later we need to rethink the distribution of npm splits * WIP: REVERT: use standard css variables rollback css var rename (and not using postcss var replace) only for now so this pr becomes easier to review reverts - f586f46 - 7ca28b6 undos sugestion #3201 * TASK: Fix merge conflict * TASK: Fix dependency clashes * BUGFIX: Use @neos-project/eslint-config-neos in version 2.5 Resolve merge error * TASK: Upgrade eslint and babel Use babel 7 and eslint 8 * BUGFIX: Resolve linting issues * BUGFIX: DiscardAll not found in e2e tests * BUGFIX: Make TreeNode selector for e2e work again * BUGFIX: Remove compiled assets from git again * TASK: Ignore compiled assets again * TASK: Remove babel config warning in PHPStorm * TASK: Upgrade testcafe * BUGFIX: Resolve more React selector issues * BUGFIX: Try to fix more e2e tests * WIP: Fix jest - Make it work with ESM and esbuild instead of babel * TASK: Esbuild `keepNames: true` for react magic selector in e2e We found out that this fixes the problem for unit snapshot testing, and most likely will fix also e2e Watch out the option will increase the bundle size around 100 bytes. 3.9 -> 4.0 Once we have less time we might start a quick separate e2e build ;) * Revert changes to ReactSelectors These were now unnecessary as the problems were fixed via the esbuild config * WIP: Fix jest: custom esbuild transform - jest fix circular dependency - fix jest module field package.json (requires at least jest 24) - remove test script from neos-ui-constants (no tests) - jest transform all files (except 2 js libs) - fix snapshot tests by using keepNames true * Task: update jest to v27 * Task: make linter happier * Task: make sure esbuild transpiles tests also in strict mode fixes: ``` FAIL src/index.spec.js ● should not be writable. expect(received).toThrow() Received function did not throw at Object.<anonymous> (src/<stdin>:82:16) ``` and ``` FAIL src/createConsumerApi.spec.js (7.141 s) ● "createConsumerApi" should create a global, read-only object expect(received).toThrow() Received function did not throw at Object.<anonymous> (src/<stdin>:12:25) ● "createConsumerApi" should expose the passed api, with each key being read-only expect(received).toThrow() Received function did not throw at Object.<anonymous> (src/<stdin>:33:26) ``` * Task: Esbuild special e2e testing build build is slightly bigger but works with the react magic selector * Task: Unit test runner cleanup * TAKS: Revert moving jest config into jest preset This reverts commit 9462771. and This reverts commit ae99b80. * Task: remove unused babel.rc and jsconfig.json * Task: adjust Make * Revert "Task: remove unused babel.rc and jsconfig.json" This reverts commit 1ebce46. * TASK: remove ignore pattern from eslint config * TASK: Remove direct tslib dependency * TASK: Resolve eslint warnings in eslintrc * FEATURE: Include notosans from npm Reduces font size by 50% * TASK: Remove old files * TASK: Lint esbuild.js * TASK: Run typechecks during lint * TASK: Lint issue in font styles * Task: esbuild fix cssModulesMatch regex * Feature: esbuild watch mode `make build-watch` * Task: Use patch for lib "react-codemirror2" instead of esbuild hack * Task: Move compiled assets to `Build` folder and fix jenkins legal comments are now also separate Co-authored-by: Robert Baruck <robert.baruck@sandstorm.de> Co-authored-by: mhsdesign <85400359+mhsdesign@users.noreply.github.com> Co-authored-by: Markus Günther <info@unikka.de> Co-authored-by: Sebastian Helzle <sebastian@helzle.it>
mhsdesign
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
There is no compatibility reason anymore to replace the css variables during compile time.
Therefore we can remove this PostCSS step and supply all variables natively. This also helps with plugin development
Expected behavior
All CSS variables are actual CSS variables and the UI still looks the same
Actual behavior
All CSS variables are replaced with their value
Affected Versions
Neos: all using the new Neos UI
UI: all
The text was updated successfully, but these errors were encountered: