Giter VIP home page Giter VIP logo

styled-reset's Introduction

styled-reset

Donate

npm version CircleCI

Eric Meyer's Reset CSS for styled-components

Also see styled-normalize from Sergey Sova.


Installation:

npm i styled-reset

Usage:

Styled Components 4+

import * as React from 'react'
import { Reset } from 'styled-reset'

const App = () => (
  <React.Fragment>
    <Reset />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
)

You can also use the default export or named export (lowercase) in your own global style:

import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* other styles */
`

const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
)

export default App

Styled Components 3.x

If you're using Styled Components version 3.x or 2.x, you'll need to use the injectGlobal api instead (and install [email protected]):

import { injectGlobal } from 'styled-components'
import reset from 'styled-reset'
injectGlobal`
  ${reset}
`

reset is also available as a named export:

import { reset } from 'styled-reset'

Credits

All credit goes to Eric Meyer for reset.css. reset.css is public domain (unlicensed).

LICENSE

styled-reset's People

Contributors

al-bur avatar alexandernanberg avatar cidermitaina avatar dependabot[bot] avatar marvinhagemeister avatar monkeywithacupcake avatar saadq avatar whazap avatar zacanger avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

styled-reset's Issues

Support for named React Component import

Is this a feature request or a bug?

feature

Expected behavior:

There is a named export React component

Actual behavior:

import { Reset } from "styled-reset";
...
export const App = () => (
  <>
    <Reset />
    <Layout />
  </>
);

Error TS2724: Module '"styled-reset"' has no exported member 'Reset'. Did you mean 'reset'?

Breaking change with createGlobalStyle in 1.7.0

Is this a feature request or a bug? Bug

Expected behavior: Expect this package to still work with styled-components 3 as it's listed in the peer deps

  "peerDependencies": {
    "styled-components": ">=3.0.0 || >=4.0.0"
  },

Actual behavior: It doesn't work with styled-components 3 as it's using createGlobalStyle which was introduced with styled-components 4

Environment info (relevant browser, OS, etc.; run npx envinfo):

I'm using [email protected]

I guess probably should either be a breaking change and remove styled-components 3 from peer dependencies as unsupported or revert and patch(or both).

Support for named import

I'm using the reset with Typescript.
Possible to add a index.d.ts to support named imports?

Thanks

Please stop releasing versions when updating devDependencies

Hello!

I've noticed many repos releasing versions when updating parts of the code that don't affect end users, like documentation or devDependencies.

I understand that updating a devDependency related to the build process might warrant a new version since the build output might have changed, but for example in the case of 8412b29 nothing like that was updated. So updating to v4.3.4 brings no value at all to the users of this package.

I appreciate all the effort put into this package! This is just a minor inconvenience, but it happens frequently here and in other packages so I thought I'd bring it up.

At our company, we manually review all changelogs as part of our dependency update process. We see many changelogs entries consisting of "update docs" which waste our time. One is not a big deal, but over time it adds up.

So please consider not publishing versions for these kind of changes. Thanks for your time! ๐Ÿ™‚

About code ERESOLVE

Hello!

I've installed latest version of styled-components because of some errors about that.
link: styled-components/styled-components#3998

So I used this line.
npm i styled-components@latest

Then I tried to install styled-reset but it was not working.
Iterm showed me the error code 'ERESOLVE' and I think it might be conflict of versions.
It could not resolve dependency either.

Is there any solution to install styled-reset?
Is it right of version conflict between styled-components and styled-reset?

Licensing

This is a rather unusual request, but I was wondering if there's any chances you could change the licensing of this package to something more open-source friendly (MIT perhaps)? I'm currently on discussions with lawyers who seem to be worried about LGPL usage in the project I am currently working on and despite my best efforts it seems like a more permissive license would just make the whole process much smoother.

Move styled components to peer dependencies.

Is this a feature request or a bug?

Bug

Expected behavior:

Not getting the warning that you have multiple instances of styled components.

Actual behavior:

Well, it does give the warning. This can impact performance and cause styles not to render properly. There are instructions in the FAQ of the styled components documentation to change it to the right dependency configuration.

Environment info (relevant browser, OS, etc.; run npx envinfo):

It's independant of any browser and OS. The issue is present when using this library as well as styled components within your own package.json.

Uses of opencollective

Is this a feature request or a bug?

This is an issue.

Expected behavior:

The library uses the old opencollective package. This package does not seem to be maintained anymore and it relies on an old babel-polyfill package. This is causing warnings.

Actual behavior:

It would be nice to use a different package that uses up-to-date dependencies.

Environment info (relevant browser, OS, etc.; run npx envinfo):

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 17.37 GB / 31.88 GB
Binaries:
Node: 12.11.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.1 - C:\Users\ABC\AppData\Roaming\npm\yarn.CMD
npm: 6.12.1 - C:\Program Files\nodejs\npm.CMD
Utilities:
Git: 2.23.0. - C:\Program Files\Git\cmd\git.EXE
IDEs:
VSCode: 1.40.2 - C:\Users\ABC\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Browsers:
Edge: 44.18362.449.0
Internet Explorer: 11.0.18362.1

Advertising package

It looks like this project depends on https://github.com/feross/funding, a project intended to show advertising in a projects build log.

I'm not familiar with your project, I'm just looking through a list of projects that depend on feross/funding. It's my understanding that right now there aren't any advertising messages actually showing, but if you're uncomfortable with the possibility of advertisements in build logs that's something you might want to look into.

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.