planttheidea / react-style-tag Goto Github PK

In React V17 the standard name will no longer be supported, only the UNSAFE_ prefix will be available.

It would be helpful to have a .d.ts file or a @types/react-style-tag npm module.

Let me tell you this is really nice piece of code :-)

I already do something similar in rioct-cli / react-templates (where the <style> tags are processed at compile time) but studying your code suggested me two or three improvements I can do, so a big thank you.

A question: I noticed the component generates a <style> tag that is also appended to the document.head. So I was expecting to find two style tags, one in the head and one in the component, but inspecting the DOM the one in the component is missing. How do you achieve that?

BTW, I would like to import your minify(cssText) function, is it going to stay? or perhaps can a module be made out of it?

One last remark: npm run dev fails in Windows, had to use instead:

node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --config=webpack.config.dev.js

Is there any particular reason [email protected] is not supported? If there aren't any major standing issues, can you please add support? Happy to raise a PR.

I'm not really sure of this, but isn't it better to have hasSourceMap and isMinified as static properties so to not have to explicit them for every instance? E.g.

// before loading any other styles
import Style from 'react-style-tag';
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
Style.hasSourceMap = !IS_PRODUCTION ;
Style.isMinified = IS_PRODUCTION;

From the code, it appears that there is no way to pass in a autoprefixer config (such as browsers) for the component. I could see this being useful for our project where we support a very specific set of browsers (defined in our browserslist) and we would like to share that config for the autoprefixer with this component.

If this is something that makes sense to add to this project, I can get a PR going 😄

Currently the style component includes an option for not prefixing code. This is great! Prefixing may not be required in all circumstances, and the bloat to the bundle for on-the-fly prefixing is significant.

I am proposing a separate component without prefixing, as even with the prop set to disable prefixing, using the component adds an untenable amount of code to generated bundles. Even if you are not using prefixing in your application, including the <Style /> tag will add the entirety of caniuse-db to your bundle, as it is imported regardless.

Hello,

When I render the component I get in my console a warning.

`Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Style`

Is that something I should be concerned about or will it be fixed?

Thank you

I’m getting this when using Webpack 5 in constants.js.

Have tried using DefinePlugin to set process.env.NODE_ENV but it doesn’t help.

It throws at that point and nothing renders.

Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Style

In situations in which prefixing is used, using https://github.com/ben-eb/caniuse-lite instead of caniuse-db will decrease bundle bloat significantly.