I'm trying to navigate to the definition of external classes using VSCode, notably Bootstrap. Read on for more details.
I can use extensions like CSS Peek and CSS Navigation to navigate to internal classes inside my project just fine.
I can also see what external classes exist thanks to extensions like SCSS Everywhere.
However, I cannot navigate to those external classes. This is what I'd like to solve.
The use cases are:
to easily and quickly know what classes do without looking up documentation
avoid conflicts and side-effects by knowing what you are applying
to extend bootstrap classes using sass with #extends
Thanks
Related
I'm currently refactoring my website code. I previously used a styles folder because nextJS does not accept styles inside the pages folder, which is totally annoying for a beginner. Now I'm using the folder src/common/pages/<Page_Title> to accomodate my page scoped components, styles and assets, but this makes it impossible to export each style to the _app component, so I started using .module.sass and importing each class to my components and pages.
More than being difficult to refactor, now I found out that this completely destroys my beautifully crafted class names. So, I would have a class .list and a class .item inside of it, which would look nice on my browser and for debugging, but now they make my compiled code ugly and messy.
Is there any way I can configure these class names, from say ".item_47dj2", to something cleaner, like ".item-from-list-component", which would take into consideration my folder path or something written on my sass file?
Or is there a way to write my sass files right in an organized pages components without having to use module.sass or pollute my sass code with a bunch of #import "../../../<far_from_it_folder>/<far_from_it_file>"?
If you have other folder structure/architecture tips to organize my code, please share, because my folders are getting messy because of this common/pages unfortunate hack.
I think this should be possible, though dont know, I use tools like 'gulp' and 'webpack' to bundle asset files but is there any tool that extracts the necessary css classes, only that are being used, from the css files and pack them.
What you are looking for is called tree shaking, and usually it's already done in the build process with webpack,
You can install this plugin for css specific tree shaking or you can look for more info here about how it works with javascript (something similar happens in css)
In Gulp there is package called Uncss
https://github.com/ben-eb/gulp-uncss
and also an addon that is available for firefox
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
which will help you in removed unused css
Take a look into tree shaking, there are several that are for specific css.
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
I'm using GWTP and Maven, i have a .css file which specifies different styles for the widgets in my application, and my application has some sub modules also so my question is how can i make my css available for the whole application ?
how can i make my css file available for sub modules also?
To benefit from GWT's CssResource advantages (like you do when you say <ui:style src="abc.css"/>) you'll have to use a ClientBundle.
ClientBundles are basically Java classes that represent CSS and other resources. Without GWT, you'd put your CSS and images directly into your HTML code. With GWT, you want to do everything through Java... and that means using Java design patterns.
As you know, you can't just use a global variable in Java programs, and the same is true for css with GWT. You'll have to pass your CSS classes to your libraries as Java objects. You can use static references in many places, but I prefer to actually pass in CSS objects to maximize flexibility later, and I think that's an established best practice.
TL;DR:
Figure out ClientBundles and do as you'd normally do to pass Java variables between libraries.
In my project i have a lot of css styles. Some of them are never used (not anymore). I check this manually with eclipse: i select text and then with "Search -> Text -> Project" i can find, if this style occurs only in the stylesheet or also in java files. Is there better way to check, which styles are currently used in my GWT project?
edit:
#Igor,Keith: thanks for the hint, but i'm not using the CssResource to insert my css file. Instead i use my index.html. And i want to remove the unused styles just for better overview. CssResource is not exactly, what i'm looking for.
If you use CssResource to inject your css file, GWT will handle pruning unused styles for you (just like it does in the case of unused code). It will also by default obfuscate it, so watch out for that. For a comprehensive explanation see the docs.
CssResource works best in combination with UiBinder. I'd recommend both - you even get cool features like compilation-time errors when you are missing a CSS style in your UiBinder xml files (or you misspelled it), among other cool/awesome things - again, check the docs for the full list.
GWT 2.0 added a feature called ClientBundle, which is a generic mechanism for bundling resource files such as images and CSS. If you bundle CSS files with ClientBundle (via the CssResource class), the GWT compiler can actually generate errors on unused CSS selectors.
The documentation is a bit rough, but here is the relevant part of the GWT docs:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Strict_scoping
In addition to detecting missing selectors, CssResource also supplements CSS itself, letting you use constants and conditionals within your CSS, even allowing you to specify different styles depending on which browser is being used. It also provides obfuscation and minification, among other things.
I'm still looking for a better solution. To solve the problem i've used the linux terminal instead eclipse for the search and that was faster.