i create my own starterkit base on https://github.com/barbar/vortigern and all ok but i have one problem.
Usually when i want to connect all style to the App i'll do
import '../styles/scss/bundle.scss';
bundle.scss - contains all imports.
But in isomorphic case all some complicate.
.global {
background: yellow;
>.child {
background: tomato;
}
}
transform in:
.app_global_1pn {
background: yellow; }
.app_global_1pn > .app_qwe_FD8 {
background: tomato; }
question 1: app_global_1pn - that name will remain forever? And i'm can use it like
<Tag className='app_global_1pn' />
question 2: Is there an solution without uglify style?
This behavior exists so that duplicate style names in multiple css modules don't cause conflicts with the generated CSS. If you don't want to use css modules, then you can always pre-compile your CSS and load it as a static .css file. But then you won't have the benefits of css-modules such as hot-reloading etc.
Related
TL;DR
I need to be able to define specific tokens in the editor as using a certain font feature without forcing it into every type of text present, without resorting to hacky alternatives.
Context:
In Visual Studio Code, you can enable font features using the setting editor.fontLigatures. I made a custom font that adds a totally ordinary OTF Stylistic Set (SS) to represent non-code text, so i can have a regular mono font to display the code, and a more readable, visually different script font to render comments and comment blocks.
To achieve that, i need to target only comments and comment blocks as having the custom stylistic set applied, but i found no way in the settings that lets me specify font features with enough granularity as to only use them for non-code text.
As an example, you can specify italics with this level of granularity using textMateRules settings:
editor.tokenColorCustomizations: {
textMateRules: [
{
"scope": "comment",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "comment.block",
"settings": {
"fontStyle": "italic"
}
}
]
}
However, i cannot force a stylistic set to be applied.
To solve this issue i use this extension, that allows me to inject arbitrary CSS into the editor.
Currently i insert this code:
/* Set documentation comments style */
.mtk38.mtki,
.mtk39.mtki {
font-family: "MonoLisa Script Nerd Font";
font-size: 1.1em;
font-style: italic;
font-weight: 375;
font-feature-settings: ss02 on;
}
/* Set inline comments style */
.mtk15.mtki {
font-family: "MonoLisa Script Nerd Font";
font-size: 1.2em;
font-style: italic;
font-weight: 200;
font-feature-settings: ss02 on;
}
This achieves the result i wanted (forcing a stylistic set into a specific subset of the editor displayed tokens), but it forces me to fidget with the permissions of the VS Code installation folder, and breaks every update. I could add a hook so every time the system updates, it could automatically manage this process, but all this i'm doing is terribly hacky and i'm sure there must be a "proper" way to achieve what i want.
Here's a concrete example of how this looks
Is there a granular way to set font features in VSCode?
I'm writing a desktop application with Electron and ReactJS that edits CSS files. I need to scan the CSS looking for a class selector, and then clear the following declaration block and add some new properties.
The tricky part is matching the class in the selector. I need the class to be the actual target (not a parent), but there might be multiple comma-separated selectors, and so I need to check all of them. For example, in this file I'm searching for the containerApp class:
.section-main .section-right , .menu .container-manu , .containerApp .container-nav {
background: black;
}
.section-main2 .section-left , .menu .container-manu , .section-group-d .containerApp {
background: red;
}
The first block doesn't match because .containerApp is only mentioned as the parent of the real target, .container-nav. The second block does match, and I would want to remove the background: red; and replace it with something else.
What's the best way to go about doing this CSS matching and rewriting?
I want to remove the injected CSSResource in GWT application.
I used the following code MyClass.INSTANCE.ensureInjected();
I want the above CSSResource for a particular page only. So the remaining pages should be work as per the actual css/theme.
Once I inject this then its applicable for the whole application. How can I overcome this?
You can inject your css bundle using directly StyleInjector utility class, instead of the ensureInjected() method
Then you will have a reference of the injected element which you can remove when you want.
// Equivalent to MyClass.INSTANCE.ensureInjected()
StyleElement e = StyleInjector.injectStylesheet(MyClass.INSTANCE.css().getText());
// Remove the injected css element
e.removeFromParent();
Theoretically you could try to remove the injected style block from the DOM, but this would be quite difficult (and maybe not very reliable).
Much better to organize your 'special' CSS style sheet in a different way:
Turn selectors like
.some {
color: green;
}
.other {
color: red;
}
into
.special .some {
color: green;
}
.special .other {
color: red;
}
and then add/remove the 'special' class e.g. to/from your body element to activate/deactivate the special styles.
If you have embedded the same GWT application in more than 1 page and you want a different behavior based on the given page, you can for example call the
MyClass.INSTANCE.ensureInjected();
if a bootstrap parameter is set.
In the host page, set the parameter, like YourGwtApp.nocahe.js?css=inject and read it as it's explained here
In the onLoadMethod, call the ensureInjected accordingly to your bootstrap parameter.
I'd like to say, in a single, centralized location,
#def mainColor = #f00;
and then, in all of my other css files, refer to mainColor without having to redefine it. Then when I change mainColor in once place, my entire app changes color.
The best way I can think of so far is to include two #Source files for every CssResource declaration and always include the global def file. Are there any other ways?
As far as I know, this is your only option:
style.css
#def mainColor #f00;
*.ui.xml
<ui:style src="../../../styles/style.css">
.widget{ color: mainColor; }
</ui:style>
The downside to this is the relative path. Each ui.xml will require a different src path.
Alternatively, if you dont mind using a Constants.java file (instead of css),
you could use #eval
<ui:style>
#eval mainColor com.myproject.client.Styles.INSTANCE.mainColor();
.widget{ color: mainColor; }
</ui:style>
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created