Code Monkey home page Code Monkey logo

Comments (7)

atomiks avatar atomiks commented on May 12, 2024 1

BTW, How can I remove all default imported CSS styles?

This was a tradeoff so you don't need to think about CSS: but basically, you can't (easily). Maybe you could wait until DOMContentLoaded and then find the <style> node and remove it from the <head>.

Maybe we should offer an import point without the CSS, like ``import Tippy from '@tippy.js/react/without-css'`

from tippyjs-react.

ignatevdev avatar ignatevdev commented on May 12, 2024 1

I have personally come up with a pretty clean hack based on the comments above.

I have added the following line in my webpack's resolve.alias section and it stopped injecting the default style!

resolve: {
    alias: {
        'tippy.js': 'tippy.js/esm',
    }
}

from tippyjs-react.

robertu7 avatar robertu7 commented on May 12, 2024

Closed. I found the tippy structure in here and here, I think I know how it works.

BTW, How can I remove all default imported CSS styles?

from tippyjs-react.

robertu7 avatar robertu7 commented on May 12, 2024

This was a tradeoff so you don't need to think about CSS.

This is very reasonable.

Maybe we should offer an import point without the CSS, like ``import Tippy from '@tippy.js/react/without-css'`

Maybe we can provide another option to control the enable/disable auto injection of theme?

from tippyjs-react.

atomiks avatar atomiks commented on May 12, 2024

Maybe we can provide another option to control the enable/disable auto injection of theme?

The issue is import tippy from 'tippy.js' auto-injects CSS into head, but import tippy from 'tippy.js/esm won't

Maybe this hackish solution could work: node monkey-patch.js that runs before dev/build:

const fs = require('fs')
const path = 'node_modules/@tippy.js/react/esm/index.js'
fs.writeFileSync(
  path,
  fs
    .readFileSync(path, 'utf8')
    .replace(
      "import tippy from 'tippy.js'",
      "import tippy from 'tippy.js/esm'"
    )
)

I've also done similar monkey-patching on node_modules before

from tippyjs-react.

jschuler avatar jschuler commented on May 12, 2024

Could you import the non-css version by default and inject the css yourself, but also provide a prop to disable the injection part?

from tippyjs-react.

atomiks avatar atomiks commented on May 12, 2024

The injection is global so not sure how that would work. I think the ideal is to provide a different import path w/o the CSS. It shouldn't be too hard to make a PR for if you want?

from tippyjs-react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.