[TT-12353, TUI-46] sass out, css in #363
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Jira Issue: https://tyktech.atlassian.net/browse/TUI-46
Release Candidate Version: https://www.npmjs.com/package/@tyk-technologies/tyk-ui/v/4.0.0-rc1
There are 2 things in this PR:
1. the bundle
For now this is only for the js files of the components. Initially I did this for the css files too by having the components load their own css file instead of importing them in a central
components.css
file but there were problems because this would mean that the css would load in a different order. And there are selectors with the same specificity from the projects that use tyk-ui that depend on this order. So for now the css of the components is still loaded incomponents.css
to preserve that order.After thinking about it and trying different things I came to the conclusion that there's no good way of splitting the code and create little bundles for each component that then get consumed by client projects. There will always be the problem of having duplicate code bundled in the final build depending on how the library is used.
The best idea would be to not bundle at all in tyk-ui and ship and consume the actual code. And the responsibility of code splitting and bundling is left to the client projects. We already do this for css(sass). We don't consume the bundle from the
lib
directory, we consume the sass files directly. We should do the same for js.2. sass -> css
With this PR tyk-ui will strictly use css. But since the client projects still use sass tyk-ui ships 3 sass files to be used in the client projects until they will transition from sass to css too. If that's something that is needed.
These 3 files are:
src/common/sass/mixins.scss
src/common/sass/variables.scss
src/index.scss
They are in the same path as before to minimize the changes needed in the client projects.
For example the changes needed in ara would be just in two files:
src/index.js
webpack.config.js
transitioning
The name of the sass variables were kept the same in css custom properties.
For example if you declared a variable in sass called
$foo-bar
then it will become--foo-bar
in css.The colors in css have the prefix
--color
followed by the theme and the color name.This in sass:
is this in css:
And when you use a color
theme-color('danger', 'dark')
becomesvar(--color-danger-dark)
.When using spacing variables
map.get($spacing, 'md')
becomesvar(--spacing-md)
.Overwriting tyk-ui variables looks like this: