daybrush / css-styled Goto Github PK

View Code? Open in Web Editor NEW

14.0 2.0 3.0 2.81 MB

⚖️ This component is a lightweight, simple line style component.

License: MIT License

HTML 7.03% JavaScript 16.85% CSS 4.12% TypeScript 72.00%

style styled styled-components react lightweight simple component

css-styled's Introduction

css-styled

This component is a lightweight, simple line style component.

📄 API Documents

API documentation

⚙️ Installation

npm

$ npm install css-styled

scripts

<script src="//daybrush.com/css-styled/release/latest/dist/css-styled.min.js"></script>

🚀 How to use

import styled from "css-styled";

const cssStyled = styled(`
{
    display: block;
}
.a {
    display: none;
}
`);

const result = cssStyled.inject(document.body);

result.destroy();

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to css-styled or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

css-styled's People

Contributors

Stargazers

Watchers

Forkers

rheehot px2code volkansamurai

css-styled's Issues

Undefined version cause crash in non-react apps

The following commit cause an issue in project using this library:
ac6a2b3

Line that causes the issue:
ac6a2b3#diff-0e825ed2f2470d57c43b731b2eea9bbf05aef8e9d1e091b017b56ecd094609eaR22

My situation: I am using the library moveable in a non-react app.
Since there is no react version, its value is undefined so it crashes when doing .indexOf (cannot read indexOf of undefined)

@daybrush Could you check if the version exists before doing the indexOf ? Like:
if ((version ?? '').indexOf("simple") > -1 && portalContainer) {

Thank you

"export 'version' was not found in 'react-simple-compat'

"export 'version' was not found in 'react-simple-compat'
@ ./node_modules/react-compat-moveable/dist/moveable.esm.js

creact-css-styled requires `croact` but does not specify in `package.json`

the creact-css-styled packages imports the croact package but the package.json does not have croact in dependencies, only in devDependencies. this causes problems.

how to reproduce the problem:

npm init
npm add croact-css-styled
run node, and inside run require('croact-css-styled')
you get this error-message:

Uncaught Error: Cannot find module 'croact'
Require stack:
- .../node_modules/croact-css-styled/dist/styled.cjs.js

(in this case you can workaround it by just installing croact, but if you use yarn for example, which only allows loading code from packages that your package depends on, it becomes a harder problem)

Bug: link to API docs is broken

you wanted a bug report, here it comes ;-)

The link to the API docs from ReadMe.md points to "https://daybrush.com/css-styled/release/latest/doc/" which does not exist.

Has an issue in StrictMode

I've found that this library generates an error when used with React's strict mode. It looks like it would be straightforward to fix - this code just needs to be switched to using refs instead of using findDOMNode.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Styler which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by Styler)
    in Styler (created by MoveableManager)
    in MoveableManager (created by Moveable)
    in Moveable