cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.08k stars 399 forks source link

jss-plugin-vendor-prefixer doesn't do its job, it's ignored #1305

Closed tomtom94 closed 4 years ago

tomtom94 commented 4 years ago

Hello I am using jss-plugin-vendor-prefixer with react-jss and it just ignores the plugin. No error message in the console.

What's wrong I am doing ?

Server side rendering

import { JssProvider, SheetsRegistry, createGenerateId, jss } from 'react-jss'
import vendorPrefixer from 'jss-plugin-vendor-prefixer'
...
const generateId = createGenerateId()
const sheets = new SheetsRegistry()
jss.setup(preset())
jss.use(vendorPrefixer())
const html = renderToString(
  <JssProvider jss={jss} registry={sheets} generateId={generateId}>
    {sheet.collectStyles(extractor.collectChunks(jsx(staticContext, helmetContext)))}
  </JssProvider>
 )

Client side rendering

import { JssProvider, SheetsRegistry, createGenerateId, jss } from 'react-jss'
import vendorPrefixer from 'jss-plugin-vendor-prefixer'
jss.setup(preset())
jss.use(vendorPrefixer())
...
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <HelmetProvider>
          <JssProvider jss={jss}>
            <HotApp />
          </JssProvider>
        </HelmetProvider>
      </ConnectedRouter>
    </Provider>
  )

I just don't have the -webkit when I use display: flex And it's really bad with Internet Explorer ;)

kof commented 4 years ago
  1. Prefixes added only when needed
  2. Plugin already inside of the default preset and by default in react-jss
  3. Please create a new issue with codesandbox link to a reproducible example and IE version