I am using VS code for a project using CSS Grid and CSS Modules. However when I try something like this
.loginRegisterDiv {
composes: loginDiv;
margin: 0px;
width: 100%;
}
I get an error saying composes "unknown property" for composes. Plus I am using css grid and there does not seem to be any intellisense for this in VS code. Do I need to install an extension?
I am using rallycoding rulesets.
You can add to the VSC CSS linter an exception to the rule css.lint.unknownProperties (or set this to ignore). Open the VSC settings, search for css.lint.validProperties and add 'composes' to the list. The error/warning will go away.
This works to me, in your settings.json file add "css.lint.validProperties": ["composes"],
I use extensions to help with this particular problem. The extension system is excellent in VS Code, and there are a lot of really high quality extensions built by the community that greatly improve the quality and feature set of the editor.
Here are a few extensions that I use for writing SASS in VS Code. One or a couple of these should fix the problems you are having (and maybe even a few you didn't know you were having).
SCSS Grammar Extended by Danny McGee
Features:
Fixes content and cursor property names being tokenized as tag selectors
Fixes background being tokenized as an invalid/deprecated keyword in certain contexts
Fixes color being tokenized as a property value keyword instead of a property name in certain contexts
null and boolean values tokenized as language constants
BEM-style __element and --modifier fragments tokenized as class names
Added recognition for Angular-specific pseudo-selectors :host-context and ::ng-deep
Sass by Syler
Features:
Upgraded syntax highlighting
AutoCompletions / Intellisense
Formatter
CSS Modules Syntax Highlighter by Andrew Leedham
Features:
#value variable decleration: regular and namespaced.
composes: attribute: local and imports.
:global and :local pseudo classes.
SCSS IntelliSense by mrmlnc
Features:
Code Completion Proposals (variables, mixins, functions)
Hover (variables, mixins, functions)
Code navigation
Install one or several of those in VS Code, restart the editor, and then let me know if that doesn't fix your issue.
To make the VS Code recognise these custom CSS directive/properties, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.
Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.
{
"version": 1.1,
"properties": [
{
"name": "composes",
"description": "css modules compose"
}
],
"atDirectives": [
{
"name": "#value",
"description": "css modules value import"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown property" warning. When you hover over "composes", you will see the description you set for it in custom.css-data.json
A similar issue has been raised to the vs code team and has not been addressed yet:
https://github.com/Microsoft/vscode/issues/13003
Related
I'm having problems understanding the AG-grid css syntax (Variable Reference).
disclaimer - I'm not a developer, just self-taught hobbiest, so I'm not sure what to search for.
I want to create my own theme for a project, and I wasn't getting anywhere, so I copied the css file for an existing theme, and intended to modify it to suit my needs, but I don't understand why its not working.
Below is an example (heavily truncated):
.ag-theme-pz {
...
--ag-background-color: rgba(209,210,210,0.75); <-- Doesn't work
background-color: rgba(209,210,210,0.75); <-- Does work
...
}
For some reason, in my copied css file, the syntax (--ag-background-color) no longer works - but it worked fine in the original css file.
Is there a reference I need to add to make sure the syntax as per their documentation works??
What have I missed?
I am using tailwind version 1.4.6 in one of my projects and have found that using the classes space-x and space-y are not working in IE 11.
I have read through the docs and have found to install postcss-custom-properties to help support some of their features for IE 11. I have done this and have included it within my plugins (below is a snippet of what plugins which are imported)
Tailwind mentioned here for IE support
https://v1.tailwindcss.com/docs/using-with-preprocessors#variables
plugins: [
require("#tailwindcss/custom-forms"),
require('postcss-nested'),
require('postcss-custom-properties'),
]
Is there something I am missing as to why this isnt working?
You need to explicitly set the target in your tailwind config file to ie11. The default target is relaxed. It seems like a good idea to selectively target ie11 for the space plugin, reading through comments on this PR.
Add this to your tailwind.config.js:
{
target: [
'relaxed',
{
space: 'ie11'
}
]
}
The space utility plugin uses local css variables when the default relaxed target is set, which is not supported in IE11 and postcss-custom-properties (only applies to css variables defined in the :root selector):
This local variable implementation will be replaced when targeting ie11. As such, keep in mind that space-x-reverse and space-y-reverse utilities will not work.
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.