New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global CSS included with component CSS import #4331

Closed
benthehenten opened this Issue Dec 21, 2016 · 78 comments

Comments

Projects
None yet
@benthehenten

benthehenten commented Dec 21, 2016

Thanks for this great library!

I tried to use babel-plugin-import to do modular CSS imports, but along with the css for an individual component, there is a lot of global css being imported that interferes with my existing styles. Is it possible to import the CSS for an individual component without global CSS being included?

Thanks!

@benjycui

This comment has been minimized.

Contributor

benjycui commented Dec 22, 2016

Do you mean CSS rules like this?

html,
body {
  ...
}
@benthehenten

This comment has been minimized.

benthehenten commented Dec 22, 2016

Yes.

@benjycui

This comment has been minimized.

Contributor

benjycui commented Dec 22, 2016

It's impossible not to import those CSS rules now.

@afc163

This comment has been minimized.

Member

afc163 commented Dec 22, 2016

#1966 (comment)

You have to override these global styles now.


Or you drop the style option of babel-plugin-import, import the less files indenpently.

@import "~antd/lib/style/themes/default.less";
@import "~antd/lib/button/style/index.less";
@TheImpressionist

This comment has been minimized.

TheImpressionist commented Apr 21, 2017

That's terrible design though.

@peitalin

This comment has been minimized.

peitalin commented Apr 25, 2017

This issue makes this library very difficult to work with. Especially having global properties on body etc. I think this issue should be made much more clear unless you have plans to change this.

@benjycui

This comment has been minimized.

Contributor

benjycui commented Apr 26, 2017

@Forestdev @peitalin it's an known issue, but we don't have enough time to solve this issue.

But we can keep discussing here.

@benjycui benjycui reopened this Apr 26, 2017

@benjycui

This comment has been minimized.

Contributor

benjycui commented Apr 26, 2017

If we can import breaking changes, we can solve this issue. Such as, move styles in reset to components' styles:

Move:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

To:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

And for backward compatibility, we can provide a standalone reset stylesheet.

import 'antd/styles/reset.less'
@bsheikh

This comment has been minimized.

Contributor

bsheikh commented May 5, 2017

is there any update on this?

@benjycui

This comment has been minimized.

Contributor

benjycui commented May 8, 2017

We can discuss, but we have no time to apply any solution(if we can find) now.

@bochen2014

This comment has been minimized.

Contributor

bochen2014 commented May 12, 2017

I think this is a critical issue as not many people can afford importing a global css and having their existing styles overridden

@LogicMonsters

This comment has been minimized.

LogicMonsters commented Jul 9, 2017

That is really annoying which stopped me from adopting Antd

@zpzxgcr

This comment has been minimized.

zpzxgcr commented Aug 1, 2017

This will block many developers#

@baiyunchen

This comment has been minimized.

baiyunchen commented Sep 11, 2017

because ant can not compatible bootstarp,i had to give up using ant.

@LinBoLen

This comment has been minimized.

LinBoLen commented Sep 12, 2017

how about put out of less file into an independent library.

btw. I am trying

@afc163

This comment has been minimized.

Member

afc163 commented Sep 20, 2017

Related discussion: palantir/blueprint#244

@afc163 afc163 self-assigned this Sep 20, 2017

@afc163 afc163 referenced this issue Sep 20, 2017

Merged

update reset styles #7682

3 of 3 tasks complete
@afc163

This comment has been minimized.

Member

afc163 commented Sep 21, 2017

Hey guys, I am working on antd@3.0 and try to find a solution for global styles issue.

I tried the solution of import 'antd/styles/reset.less' from @benjycui. It turns out it would be a break change and make importing styles much more complicated, especially with babel-plugin-import. So I decide to pass it.

Then I find the main point of this issue is about babel-plugin-import which will turn code into:

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

The better workaround for this is not using style option of babel-plugin-import and import style manually.

@import '~antd/dist/antd.css';

// your global styles
body {
 ...
}

So I give up the whole reset.less idea and just remove the annoying reset codes like:

// unify the setting of elements's margin and padding for browsers
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin: 0;
padding: 0;
}
// Reset fonts for relevant elements
button,input,select,textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
ul,
ol {
list-style: none;
}

Also I added better typography code from bootstrap@v4 to resolve #6162

All updates are in #7682 now and will be merged into antd-3.0 soon.

@harisvsulaiman

This comment has been minimized.

harisvsulaiman commented Mar 20, 2018

I have had some success with overriding the global css provided by antd and using projects like styled jsx.
You can see the site deployed here! Ps: its work in progress.

@reyronald

This comment has been minimized.

reyronald commented Mar 21, 2018

I've just found myself in the same situation, and have been having moderate success using the same approach described by @inverts and @corinnebrady (#4331 (comment) and #4331 (comment)). So, some of my components look like this:

// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'

import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'

import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'

import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc

This works somewhat OK with most antd components, but there are others that don't have a specific css file associated to them, and it's styles can only be found in the global one. This is the case for the icon component, to make them work I had to manually copy all the icon related styles from the global file to my own stylesheet. Maintainers: would you accept a PR to include an antd/lib/icon/style/index.css?

@AlexTwine

This comment has been minimized.

AlexTwine commented Mar 30, 2018

Seems like you can include individual less files too, e.g import 'antd/lib/spin/style/index.less'

@THPubs

This comment has been minimized.

THPubs commented Apr 6, 2018

Any plans to resolve this issue officially?

@ghost

This comment has been minimized.

ghost commented Apr 10, 2018

Still a problem but I'm trying to fix with referenced imports like @reyronald explains.

I'm stucked too with Icon's style problem.

@reyronald can you make a PR, please?

@Serguzest

This comment has been minimized.

Serguzest commented Apr 18, 2018

People who are suffering from this might wanna try my fork by adding the package directly from the repository

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

or

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

I only ruled out base.less and built it without any other modifications. It works in my case, I don't use many components from it. It will probably break look of some components especially if you don't already have sane reset stylesheet in your project. #4546

@chazcb

This comment has been minimized.

Contributor

chazcb commented Apr 29, 2018

Hey @afc163 I'd also like to hop in here and add additional voice for a fix to this issue. We build a large application with many targets, and a few of our targets are loaded on 3rd party sites. antd interfering with global CSS is problematic for us because we end up blowing away CSS resets and fonts for those 3rd party sites. We love the library and would love to contribute to a fix if maintainers were willing to point us in a direction. Please re-open or direct the conversation to another open issue! Thanks

@bsinibaldi

This comment has been minimized.

bsinibaldi commented May 22, 2018

So we were able to get this working (at least so far) by using some webpack manipulation to load an alternate less file:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Where the src/style.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector:

#root { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }

The result is that all of the "global" styles are being applied with the #root scope:

#root article, #root aside, #root dialog, #root figcaption, #root figure, #root footer, #root header, #root hgroup, #root main, #root nav, #root section { display: block; }
etc...

Hope this is helpful for someone.

@zinoviev

This comment has been minimized.

zinoviev commented Jun 7, 2018

Folks, it's really annoying. This styling behavior it's not you would expect from world class UI library.

At least mention about the global reset in docs, so people do not get confused. Or probably some guide "Integrating in legacy website" with recipe about importing individual styles and icons will be helpful

@reyronald

This comment has been minimized.

reyronald commented Jun 7, 2018

I think the maintainers have unsubscribed from this issue after it was closed because they haven't participated in the discussion since, so we will probably not receive any official support on this unless we open a new issue, ping them directly or open a PR.

@sbusch

This comment has been minimized.

Contributor

sbusch commented Jun 9, 2018

I finally found a way to circumvent this problem by producing a new CSS file based on the original antd.css, with every rule prefixed with a custom class. My solution uses PostCSS, Gulp and postcss-prefixwrap plugin:

https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa

It is far from perfect, but works surprisingly well. At least for my needs ;-)

The gist also contains a ready-made version of antd CSS, prefixed with .antd-ns ("ns" as shorthand for "namespace")

Notes:
An important requirement for me was that it's automated, so prefixed CSS can easily be produced for every new ant release.

  • it's intended just as a tool for creating the prefixed CSS; so it could run from different folder separated from your project. No need for your antd-based project to include PostCSS or Gulp! The resulting CSS just needs to be placed in static CSS folder of your project (which is done by Gulp if configured accordingly).
  • postcss-prefixwrap must be at least version 1.3.0, which includes my patch to preserve antd keyframe animations

Comments / feedback always appreciated!

Thanks to @dbtedman for making this possible with his fine PostCSS postcss-prefixwrap plugin.

Comments / feedback appreciated!

@abenhamdine

This comment has been minimized.

Contributor

abenhamdine commented Jun 10, 2018

I finally found a way to circumvent this problem by producing a new CSS file based on the original antd.css, with every rule prefixed with a custom class.

This is IMHO the straigthest solution.
Personnaly, I have no need currently for this, but it would be beneficial for everyone if somebody would submit a PR to add a classname less variable (eg .@{scope} ) before each css rule in less files.

By default, this variable would be empty, to avoid breaking current behaviour.

One would only have to set the variable with, for instance, antd to isolate the styles.

I think this solution would be acceptable for maintainers and would allow to go forward.

@paneq

This comment has been minimized.

paneq commented Jun 13, 2018

Here is a workaround which worked for me. I created styles.less file

// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
@import '~antd/lib/style/mixins/index.less';
@import '~antd/lib/style/core/iconfont.less';
@import '~antd/lib/style/core/motion.less';

@import '~antd/lib/menu/style/index.less';
@import '~antd/lib/dropdown/style/index.less';
@import '~antd/lib/button/style/index.less';
@import '~antd/lib/checkbox/style/index.less';
@import '~antd/lib/grid/style/index.less';

In .babelrc I have:

  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false,
      }
    ]
  ]

for optimizing JS build size as described in https://ant.design/docs/react/getting-started#Import-on-Demand and https://github.com/ant-design/babel-plugin-import

For customized styling I changed my webpack config to:

module: {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader'
    }, {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {"primary-color": "#ed1c24"},
      }
    }]
  }]
}

as described in https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way)

BTW: I tried using new webpack.IgnorePlugin(/style\/core\/base/) to just ignore this "base.less" file from processing but I couldn't make it work. I don't know why. My hypothesis is that because it is processed with LESS, and not with Webpack directly.

@itsglen

This comment has been minimized.

itsglen commented Jun 27, 2018

For what its worth, I manually edited antd.css and was able to remove unwanted styling without breaking any antd components that I use.

@emilbruckner

This comment has been minimized.

emilbruckner commented Jul 3, 2018

@paneq I'm currently doing the same. Note that babel-plugin-import's style option could also be a function, which can decide if a style should be included. I just didn't get it to work. Would have to debug that …
Maybe I'm also misinterpreting that option?

@omnisci3nce

This comment has been minimized.

omnisci3nce commented Jul 17, 2018

@paneq I've copied what you've done and it seems to be worked so far, but I haven't tried enough components to see which ones require that global css. Thanks

@cdskill

This comment has been minimized.

cdskill commented Jul 28, 2018

afc163 added a commit that referenced this issue Sep 2, 2018

Explain how to prevent global styles pollution
Add explantion in docs (customize theme) to how to prevent global styles pollution by configuring webpabk.
Based on #4331 (comment)
@tylik1

This comment has been minimized.

tylik1 commented Sep 21, 2018

hi, it should be possible to try match all elems, starting with .ant, and assign them styles

*[class^='ant-']{
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
}

It should have crossbrowser compatibility and shouldn't take long to implement.

@jaleikas

This comment has been minimized.

jaleikas commented Oct 2, 2018

So we were able to get this working (at least so far) by using some webpack manipulation to load an alternate less file:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Where the src/style.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector:

#root { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }

The result is that all of the "global" styles are being applied with the #root scope:

Which version of less-loader are you using? Seems like it only works with 3.0.0? See. e.g. webpack-contrib/less-loader#184

Also, which version of antd were you using for this workaround? The reason I'm asking is that I didn't have success even with antd@3.7.3 and less-loader@3.0.0 (webpack had problems resolving after the change). ..

@hundsim

This comment has been minimized.

hundsim commented Oct 3, 2018

I don't know if this helps anyone, but the following helped me import the CSS for only the component in use:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

@jaleikas

This comment has been minimized.

jaleikas commented Oct 3, 2018

I don't know if this helps anyone, but the following helped me import the CSS for only the component in use:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

Yeah, this seems to work ok for many components. Your milage may vary, though -- at least Select needs a little more than just the component's own styles. The "remove" icon in selections won't render otherwise; I didn't have time to track down the issue completely, but i's probably something minor. So you may need to mimic some styles from the main styles in some of the components.

While this option is not quite perfect, it could work well for many components. The custom styles are in risk of breaking with updates, but you can obviously control when you want to do your updates.

@kclonts

This comment has been minimized.

kclonts commented Oct 5, 2018

The best solution I found for our organization is to include the entire CSS sheet from antd, with any styles that affect non antd named styles stripped out. Mileage might vary, and there is obviously the downside of every style now being imported. But it works well and I haven't seen any issues after doing so for about two months now.

@kylegach kylegach referenced this issue Dec 5, 2018

Closed

Proposal to remove reliance on global styles #13459

1 of 1 task complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment