Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
babel-plugin-split-styles
Advanced tools
babel-plugin-split-styles - npm Package Compare versions
Comparing version 0.0.2 to 0.1.0
| { | ||
| "name": "babel-plugin-split-styles", | ||
| "version": "0.0.2", | ||
| "version": "0.1.0", | ||
| "description": "Splitting dynamic and static styles into style and css prop.", | ||
| "main": "dist/index.js", | ||
| "files": [ | ||
| "index.d.ts", | ||
| "src", | ||
| "dist" | ||
| ], | ||
| "private": false, | ||
| "main": "lib/index.js", | ||
| "module": "es/index.js", | ||
| "types": "lib/index.d.ts", | ||
| "dependencies": { | ||
@@ -15,14 +13,19 @@ "babel-plugin-syntax-jsx": "^6.18.0" | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.4.4", | ||
| "@babel/core": "^7.4.4", | ||
| "@babel/preset-env": "^7.4.4", | ||
| "babel-core": "^6.26.3", | ||
| "babel-jest": "^24.7.1", | ||
| "babel-plugin-tester": "^6.0.1", | ||
| "eslint": "^5.16.0", | ||
| "jest": "^24.7.1" | ||
| "jest": "^24.8.0", | ||
| "ts-jest": "^24.0.2", | ||
| "typescript": "^3.4.5", | ||
| "babel-plugin-tester": "^6.2.1" | ||
| }, | ||
| "scripts": { | ||
| "build": "babel src -d dist", | ||
| "test": "jest" | ||
| "build": "npm run build:lib & npm run build:es", | ||
| "build:es": "tsc --outDir ../node_modules/babel-plugin-split-styles/es --module es2015", | ||
| "build:lib": "tsc --outDir ../node_modules/babel-plugin-split-styles/lib --module commonjs", | ||
| "clean": "rimraf es lib coverage ../node_modules/babel-plugin-split-styles", | ||
| "prebuild": "npm run clean", | ||
| "prepare": "rimraf es lib && cp -r ../node_modules/babel-plugin-split-styles/es es && cp -r ../node_modules/babel-plugin-split-styles/lib lib", | ||
| "postbuild": "rimraf {lib,es}/**/__tests__ && cp package.json ../node_modules/babel-plugin-split-styles", | ||
| "posttest": "npm run typecheck", | ||
| "test": "jest --runInBand", | ||
| "test:watch": "jest --watch --updateSnapshot --coverage false", | ||
| "typecheck": "tsc --noEmit" | ||
| }, | ||
@@ -32,5 +35,5 @@ "author": "Fabrice Weinberg <Fabrice@weinberg.me>", | ||
| "type": "git", | ||
| "url": "https://github.com/FWeinb/babel-plugin-split-styles.git" | ||
| "url": "git+https://github.com/cerebral/enhanced-react-style.git" | ||
| }, | ||
| "license": "MIT" | ||
| } |
100
README.md
| # babel-plugin-split-styles | ||
| This is a PROOF OF CONCEPT. It will be a babel preset using Emotion as a dependency to give a supersweet experience styling your apps. | ||
| Split static and constant styles. | ||
| ## What is it? | ||
| CSS-IN-JSS libraries has come a long way to help you effectively define and isolate CSS. There are still some challenges though. | ||
| ## How does it work? | ||
| ### Differentiating dynamic and static styling | ||
| Dynamic styling should really always be treated as inline styles. For example: | ||
| ```js | ||
| styled.div(({ width }) => ({ | ||
| width: width + "px" | ||
| })) | ||
| ``` | ||
| There are no limits to have many class names that might be produced. | ||
| ### Leaking props | ||
| If you happen to send a property that is also an HTML attribute it will leak into the DOM. | ||
| ```js | ||
| styled.div(({ disabled }) => ({ | ||
| })) | ||
| ``` | ||
| ### Custom JSX pragma | ||
| Tools like Emotion exposes a custom pragma named **jsx** which allows you to use a **css** attribute on your components that are converted into classnames. The problem here is the tricky setup, especially with Typescript. | ||
| ### Mental overhead | ||
| Having to think about styles vs CSS is just a completely unnecessary overhead. You should not be thinking about any of this at all. You should just style your components and everything is handled for you. | ||
| ## Emotion almost got us there | ||
| The project [emotion.sh](https://emotion.sh) is pretty amazing, but through its iterations it is trying to do too many things. This library takes the increadible innovation made by Emotion to remove the overhead of thinking styles vs css, optimizing, server side rendering etc. It just works! | ||
| ## How to use? | ||
| This POC requires you to install emotion and [@emotion/babel-preset-css-prop](https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop), but will later become one package which has the dependencies needed. | ||
| ## How does it work? | ||
| The first thing to know is that you are going to write all your styling inline. This might sound crazy, but you have to leave your deep knowledge of styling vs css, classnames and everything else behind. Think about the best possible developer experience you can imagine, where none of this knowledge and mental overhead is needed. You just define your styles: | ||
| ```js | ||
| import React from "react" | ||
| import React from 'react' | ||
| function App() { | ||
| const [toggle, setToggle] = React.useState(false); | ||
| const [toggle, setToggle] = React.useState(false) | ||
| return ( | ||
@@ -58,13 +24,13 @@ <h1 | ||
| </h1> | ||
| ); | ||
| ) | ||
| } | ||
| ``` | ||
| Note that we are defining one static style, named **color**. We are also defining a dynamic style named **background**. This tool understands the difference and will make the static part a class and the dynamic part an inline style. | ||
| Note that we are defining one static style, named **color**. We are also defining a dynamic style named **background**. This tool understands the difference and will make the static part a class and the dynamic part an inline style. | ||
| ```js | ||
| import React from "react" | ||
| import React from 'react' | ||
| function App() { | ||
| const [toggle, setToggle] = React.useState(false); | ||
| const [toggle, setToggle] = React.useState(false) | ||
| return ( | ||
@@ -78,7 +44,7 @@ <h1 | ||
| </h1> | ||
| ); | ||
| ) | ||
| } | ||
| ``` | ||
| What is also important to notice here is that you can still just import React as normal. You do not need any special `jsx` imports or similar. | ||
| What is also important to notice here is that you can still just import React as normal. You do not need any special `jsx` imports or similar. | ||
@@ -88,6 +54,6 @@ ### What about selectors? | ||
| ```js | ||
| import React from "react" | ||
| import React from 'react' | ||
| function App() { | ||
| const [toggle, setToggle] = React.useState(false); | ||
| const [toggle, setToggle] = React.useState(false) | ||
| return ( | ||
@@ -97,6 +63,6 @@ <h1 | ||
| style={{ | ||
| color: "red", | ||
| "&": { | ||
| ":hover": { | ||
| color: "blue" | ||
| color: 'red', | ||
| '&': { | ||
| ':hover': { | ||
| color: 'blue' | ||
| } | ||
@@ -108,3 +74,3 @@ } | ||
| </h1> | ||
| ); | ||
| ) | ||
| } | ||
@@ -116,9 +82,10 @@ ``` | ||
| ### But everything inline? | ||
| Yeah! Because that means there is only one way to define styling. It is the most straight forward and simplest way to think about styling. But you might worry about messy code? That is just a matter of structure. For example, emotion and other libraries allows: | ||
| ```js | ||
| import styled from "@emotion/styled" | ||
| import styled from '@emotion/styled' | ||
| export const Wrapper = styled.div({ | ||
| color: "red" | ||
| color: 'red' | ||
| }) | ||
@@ -130,3 +97,3 @@ ``` | ||
| ```js | ||
| import React from "react" | ||
| import React from 'react' | ||
@@ -137,23 +104,17 @@ const Header = ({ onClick, children }) => ( | ||
| style={{ | ||
| color: "red", | ||
| "&": { | ||
| ":hover": { | ||
| color: "blue" | ||
| color: 'red', | ||
| '&': { | ||
| ':hover': { | ||
| color: 'blue' | ||
| } | ||
| } | ||
| }} | ||
| > | ||
| > | ||
| {children} | ||
| </h1> | ||
| </h1> | ||
| ) | ||
| function App() { | ||
| const [toggle, setToggle] = React.useState(false); | ||
| return ( | ||
| <Header | ||
| onClick={() => setToggle(!toggle)} | ||
| > | ||
| Hello World | ||
| </Header> | ||
| ); | ||
| const [toggle, setToggle] = React.useState(false) | ||
| return <Header onClick={() => setToggle(!toggle)}>Hello World</Header> | ||
| } | ||
@@ -165,4 +126,3 @@ ``` | ||
| ## Summary | ||
| The important thing here is the developer experience. You never think about underlying technologies, you just use the `style` attribute and style up your components. They are automatically optimized for dynamic/static behaviour and even doing server side rendering automatically extracts critical CSS for you. | ||
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by93.01%
20515
- Dev dependency count
- decreased by-50%
4
- Number of package files
- increased by80%
9
- Lines of code
- increased by10.67%
166
Worsened metrics
- Number of lines in readme file
- decreased by-25%
120
- Number of medium supply chain risk alerts
- increased byInfinity%
2
No dependency changes