I want to remove all the unused css rules from my codebase. My code is mostly like:
index.js (which import a sibling styles.css - and binds with withStyles)
styles.css (which has css rules to apply to the sibling index.js file)
Is it possible to do a regex based search in a javascript file created from the corresponding css file
you can use (https://github.com/webpack-contrib/purifycss-webpack) plugin to do it.
UPDATE
lib author recommends https://github.com/FullHuman/purgecss-webpack-plugin
this package instead of purifycss
Chrome DevTools CSS Coverage
Not exactly what you are looking for but may be helpful
Related
npm install react-calendar
import 'react-calendar/dist/Calendar.css';
I've just installed the react-calendar package using the above method. I was wondering how can I adjust the CSS of this calendar, e.g. increase the width or height? I already imported the react-calendar css.
You can copy Calendar.css file and add your edits to it and then use it instead of original. Or create additional CSS file with override styles.
Just use the developer tools in your browser and inspect/select an element you want to style. Based on the css class, you can apply your own custom styles.
The default styles are available in react-calendar/dist/Calendar.css (or in the respective .less file).
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.
Angular cli automatically loads css files those are in node_module directory. I am using #swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.
In your app.component.ts, add:
#Componenent({
encapsulation:ViewEncapsulation.None,
styleUrls:[''], // Add your bootstrap css files
templateUrl: ....
})
If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.
If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.
I'd recommend the first approach.
If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.
Given a webpage with dynamically loaded web components (shadow DOM) and some external CSS files (Bootstrap, etc.). I want these CSS files to be applied within the components (shadow DOM). What are the possible solutions?
Using Polymer -- we're already using AngularJS and don't wanna start messing with another framework too. (Although it's possible.)
Refactoring the CSS files and include /deep/ everywhere -- maintainability...
Import each CSS file manually into the beginning <style> part of each shadow DOM -- no comment...
Is there any better way to apply whole CSS files within shadow DOMs?
Question is a bit old, but putting this answer here in case it helps.
/deep/ has been deprecated
Other option is to use custom properties provided by Polymer.
If you don't want to use Polymer then as suggested in the discussion on the /deep/ and ::shadow selectors deprecation thread, you can you use css #imports.
You can generate the url of your external stylesheet and inject it in your shadow dom templates at run-time.
I have written a descriptive answer here on the topic.
I want to change the standard css style of the beaneditform but can't find the file (default.css) in eclipse or on my local computer?!
any ideas?
this folder assets is not existing in my workspace, where is this file default.css?
The file is located in the Tapestry Core JAR in the org.apache.tapestry5 package. Don't edit it, instead just override the values with your own CSS with a CSS selector that is at least equally specific.
This is also explained nicely in the CSS/Default Stylesheet section of the docs.