craco-plugin-scoped-css not working on react.js css - javascript

I m using react.js
My problem is that css on one component is coming on other component. so to try and fix it I tried using craco-plugin-scoped-css
craco-plugin-scoped-css is not working for some reason for me, heres what I did to install:
I first ran npm i craco-plugin-scoped-css
then created craco.config.js inside src folder and pasted:
module.exports = {
plugins: [
{
plugin: require('craco-plugin-scoped-css')
}
]
}
I renamed my home.css and contact.css to home.scoped.css and contact.scoped.css, but for some reason, css is contact.scoped.css is overlaping css on home.scoped.css
I tried to add craco-plugin-scoped-css outside of src which didnt work
Edit: I would like to share that There is a main file, a header and a footer a main page file. and I m trying to add the styles to main file but instead its syncing the classes from footer file

Related

ReactJS - JSS - createUseStyles - how to generate inline style

I am using ReactJS/NextJS and
import { createUseStyles } from 'react-jss'
to generate CSS-in-JS. Is there a way to use react-jss to generate inline CSS?
I would like to add
const styles = ....
...
<Head><style>{styles}</style></Head>
to all my components.
Thank you.
EDIT:
I can see some potential here: https://cssinjs.org/react-jss?v=v10.7.1#server-side-rendering
But I am not sure how to use the SheetsRegistry with NextJs and serveless deployment. I tried adding it to the _app.js but did not work.
EDIT:
Following this: https://github.com/vercel/next.js/tree/canary/examples/with-react-jss/pages , I have been able to make progress.
The new problem is that now ALL OF THE CSS is in the HTML inline. I am using SSR, wouldn't it be possible to only add the CSS of the component involved in this page ?

Duplicated styles on head and a lot of <style> elements

I'm quite happy with angular-material2 components but there are some weird behaviors that I don't understand and they don't have a proper documentation especially for teeming and customizing their components.
My project looks like:
.src
--app
--components
--login-component
login-component.html
login-component.scss
login-component.js
--login-component
home-component.html
home-component.scss
home-component.js
--and so on ...
app.component.html
app.component.scss
app.component.ts
app.module.ts
app.routing.ts
--assets
--environments
--scss
styles.scss
_material2-theme.scss
_variables-scss
_utilities.scss
_reset.scss
favicon
index.html
and so on ....
In angular-cli.json I have modified the styles to look at scss/style.scss
...
"styles": [
"scss/styles.scss"
]
...
the _material2-theme.scss looks like:
//////////////////////* THEMES */ Custom Blue Theme*/
#import '~#angular/material/theming';
#include mat-core();
$app-primary: mat-palette($mat-light-blue);
$app-accent: mat-palette($mat-light-blue, A200, A100, A400);
$app-theme: mat-light-theme($app-primary, $app-accent);
#include angular-material-theme($app-theme);
/*default palette forground/background*/
$light-foreground-palette: map-get($app-theme, foreground);
$light-background-palette: map-get($app-theme, background);
$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);
and inside of style.scss I am importing everything to be compiled with scss cli compiler
//////////////////////* CUSTOM */
#import "_material2-theme.scss";
#import "_reset.scss";
#import "_utilities.scss";
//////////////////////* COMPONENTS */
#import "~app/components/login/login.component.scss";
My question is after the scss is compiled we have in html head many style tags some of them duplicated and look like:
Everything seems to be compiled in one style that is added in head(tha one that has type attribute) and and after that each scss component splited in each css component with its separate style in head, and that is very weird. I am doing something wrong or is just tha way is working material2?
The behavior you're seeing is caused by ViewEncapsulation.Emulated defined for material components.
First, you don't need to add styles for components to the global styles "scss/styles.scss":
//////////////////////* COMPONENTS */
#import "~app/components/login/login.component.scss";
If you do that, besides your styles getting duplicated you will lose style encapsulation because styles added for components/login/login.component.scss will become global.
Now, to the question why there are many style elements. When you use ViewEncapsulation.Emulated, and it's a default view encapsulation mode, Angular will put each component's style into its own style tag and add attribute to elements inside a component template. In material all components use emulated encapsulation mode so for each component the style tag is added.
If you add #Component({..., encapsulation: ViewEncapsulation.Native }) for your components, you will see the style for your components will be removed.
Here is the logic that adds the style tag:
export class DomSharedStylesHost extends SharedStylesHost implements OnDestroy {
...
private _addStylesToHost(styles: Set<string>, host: Node): void {
styles.forEach((style: string) => {
const styleEl = this._doc.createElement('style'); <--- creates a style element
styleEl.textContent = style;
this._styleNodes.add(host.appendChild(styleEl));
});
}
In Material design for Angular the stylesheet is split into:
style - margins, paddings etcetera that is linked from the component
theme - mostly colors that is build using the theme scss
typography - fonts & font properties that is built using the typography scss
This causes similar selectors, but with different properties inside.
I think it is the live development server that comes with angular cli or webpack that loads css dynamically which causes duplication of style tags. I believe this is not happening in a production build.
PS. Strange of you to add _reset.scss after anything else.
I do not think it is due to having separate styles for each component.
This issue is similar to what's there in a ngularjs-material as well.
Angular-material includes some default theme css as a const variable in JavaScript.
You can read a more on this issue ,
https://stackoverflow.com/questions/33466779/how-to-get-rid-off-angular-material-extra-styles-and-css-linked-by-it-forcefull
In development, the angular cli or webpack compiles every css/scss files from each component to a style tag in the HTML page.
ie, in your case: login-component.scss, home-component.scss each will be loaded inside seperate style tags in the HTML page.
All these will be compiled into a single css file and will be linked in index.html in production conf.
So I too think its the way angular works!
Currently I see that there is only one file generated in production build ng build --prod .
There are multiple style tag in your head may be your every component is linked with some external different css Or you have written internal css at related HTML page.
If you want that there is only one style tag throughout application then in that case you have to write all style in single file.

ng2-ckeditor - how to customise the css loaded inside the editor itself?

I need to customise the ENTER key behaviour of ng2-ckeditor. I understand there is a config option as explained here.
However as that link explains, I should use custom css:
If you want to change it to control paragraph spacing, you should use
stylesheets instead. Edit the contents.css file and set up a suitable
margin value for <p> elements, for example:
p { margin: 0; }
According to this SO question I can load a custom CSS file using a config option, like this:
config.contentsCss = 'mystyles.css'
I tried adding a single file to my project and setting the config in angular 2 component, but the file does not appear to load.
private setConfig(): void {
this.ckConfig = {
height: '250',
extraPlugins: 'divarea',
contentsCss: '/theme/styles/ckeditor.css',
toolbar: [... toolbar configurations ...]
};
}
So how can I get ng2-ckeditor to load this file?
This breaks if you have the DIVAREA plugin activated
Edit (from comment):
This is because contentsCss does not load when using DIVAREA. Makes sense since the CSS would need to be scoped to inside the DIV (easy with iFrame).
Maybe new CSS layers could help here?
github.com/ckeditor/ckeditor4/issues/4640 github.com/ckeditor/ckeditor4/issues/4642

how to remove the style tags from the header section

I am using angular js and deployed a site, In the head part of my website there are a lot of style tags are coming in the console like the below image, I attached a snap of my website console. I don't know where those tags are coming from and how can I remove those style tags from the head of the website
As of my understanding, you are using Angular Material Design and it is responsible for adding the style tags in your head section. It all happens under the hood, you can follow this link to know more. I think you no need to worry about removing this style tags and all because it came as functionality. Angular Material Design dynamically inject this style tags for theming purpose.
Reference: https://material.angularjs.org/latest/Theming/05_under_the_hood
Thank you.
EDIT
If you don't want to generate themes by default then you can use
$mdThemingProvider.generateThemesOnDemand(true);
Example:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider, $provide) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
$provide.value('themeProvider', $mdThemingProvider);
})
.run(['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
//create new theme
themeProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange')
.backgroundPalette('yellow');
//reload the theme
$mdTheming.generateTheme('default');
//optional - set the default to this new theme
themeProvider.setDefaultTheme('default');
}]);
Reference: https://material.angularjs.org/latest/Theming/04_multiple_themes
If you want to remove all the style tags :
var st = document.getElementsByTagName('style');
and add a loop to remove all of them.
for(i = 0 ; i < st.length ; i++){
st[i].parentNode.removeChild(st[i]);
}
Please Try with below JQuery code
$('style[md-theme-style]').remove();
Reason :
Angular-material includes some default theme css as a constant variable.
You can check here(angular-material.js).
When we load this library in the browser it adds lots of style tags dynamically into the <HEAD> section of the Page.
How to disable ?
You can override the constans.It will result in not adding theme classes on components.
angular(myApp, [ ngMaterial, myAppModules ]).constant("$MD_THEME_CSS","");
You can also look into the angular-material.js. This solution is also proposed in library itself.
Have you tried to disable theme generation before and then enable the one you want?
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
//themes are still defined in config, but the css is not generated
$mdThemingProvider.theme('altTheme')
.primaryPalette('purple')
.accentPalette('green');
//generate the predefined theme named altTheme
$mdTheming.generateTheme('altTheme');
});
When material.js loads into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:
git clone https://github.com/angular/material.git
Then install dependancies:
cd material
npm install
Then go to gulp/util.js and change line 53 from:
var jsProcess = series(jsBuildStream, themeBuildStream() )
to be:
var jsProcess = series(jsBuildStream)
Then run the build process:
gulp build

Adding plugins to ckeditor while using rails_admin

I've been banging my head against the wall on this for a few hours. Maybe someone can help me.
I've got a rails app. I'm using the rails_admin gem, version 0.6.2.
Following the rails_admin instructions, I enabled ckeditor on a few text fields, and it's working great.
Next I needed to customize some of the toolbar icons, so I created a custom config.js file in app/assets/javascripts/ckeditor/
This works fine, I can change the toolbar buttons (example code from config.js is below)
CKEDITOR.config.toolbar_Custom = [
{ name: 'document', items : [ 'Source','NewPage','Preview','-','Templates' ] }
// other toolbars removed for brevity
];
CKEDITOR.config.toolbar = 'Custom';
Now I want to add some ckeditor plugins - specifically, the codesnippet plugin.
I put the plugin files in app/assets/javascripts/ckeditor/plugins and include them like so:
CKEDITOR.config.extraPlugins = 'codesnippet'
Now ckeditor won't load, console is complaining that CKEDITOR.editor and CKEDITOR.style are undefined. These errors are coming from the plugin js files, so I know they're being loaded, but they seem to be referenced before ckeditor has time to initialize?
I've tried wrapping up my config settings in something like
CKEDITOR.on('instanceReady', function(){
// initialize config stuff here
});
But that does nothing.
I think the problem involves line 159 of this coffeescript file from rails_admin, it's setting up the editors and applying settings. But for the life of me, I'm lost, and the documentation has only confused me. Any help or hints appreciated.
Add below content into config.js file which will be at app/assets/javascripts/ckeditor/.
CKEDITOR.editorConfig = function (config) {
config.extraPlugins = 'widget,dialog,codesnippet,widgetselection,lineutils';
}
Download the plugins (as zip) from below links. Extract them and put at app/assets/javascripts/ckeditor/plugins which is required for codesnippet.
https://ckeditor.com/cke4/addon/widgetselection
https://ckeditor.com/cke4/addon/lineutils
https://ckeditor.com/cke4/addon/dialog
https://ckeditor.com/cke4/addon/widget
https://ckeditor.com/cke4/addon/codesnippet
Add below line into assets.rb.
Rails.application.config.assets.precompile += %w( ckeditor/* )
Enable it for rails_admin, try below for any specific model.
config.model 'Problem' do
# Your code here
edit do
field :code_snippet, :ck_editor
# Rest columns
end
end

Categories