Skip to content
This repository was archived by the owner on Feb 18, 2025. It is now read-only.

Increase specificity for hybrid ui #1

Open
nvanselow wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Increase specificity for hybrid ui #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ed671d
Increase specificity for hybrid ui
nvanselow Oct 5, 2017
600d951
Merge branch 'master' into Increase_specificity_of_each_class
nvanselow Oct 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
registry=https://nexus1.ci.quickbaserocks.com/nexus/content/repositories/qb-npm-all/
[email protected]
always-auth=true
_auth=ZGV2ZWxvcGVyOmlkMnViVjhtaUVWaFh0R2Q=
30 changes: 13 additions & 17 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{
"name": "styled-components",
"version": "2.2.1",
"description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
"name": "@quickbase/styled-components",
"version": "2.3.6",
"description":
"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
"main": "lib/index.js",
"typings": "typings/styled-components.d.ts",
"jsnext:main": "dist/styled-components.es.js",
Expand All @@ -11,7 +12,8 @@
"prebuild:lib": "rimraf lib/*",
"build:lib": "babel --out-dir lib --ignore \"*.test.js\" src",
"prebuild:dist": "rimraf dist/*",
"build:dist": "rollup -c && rollup -c --environment ESBUNDLE && rollup -c --environment PRODUCTION",
"build:dist":
"rollup -c && rollup -c --environment ESBUNDLE && rollup -c --environment PRODUCTION",
Copy link

@genedwards genedwards Oct 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow they're using rollup

"build:watch": "npm run build:lib -- --watch",
"test": "npm run test:web && npm run test:native && npm run test:size",
"test:web": "jest",
Expand All @@ -34,6 +36,10 @@
"type": "git",
"url": "git+https://github.com/styled-components/styled-components.git"
},
"publishConfig": {
"registry":
"https://nexus1.ci.quickbaserocks.com/nexus/content/repositories/qb-npm/"
},
"files": [
"no-parser.js",
"CONTRIBUTING.md",
Expand All @@ -47,12 +53,7 @@
"src",
"typings"
],
"keywords": [
"react",
"css",
"css-in-js",
"styled-components"
],
"keywords": ["react", "css", "css-in-js", "styled-components"],
"author": "Glen Maddern",
"license": "MIT",
"bugs": {
Expand Down Expand Up @@ -130,19 +131,14 @@
},
"jest": {
"clearMocks": true,
"roots": [
"<rootDir>/src/"
],
"roots": ["<rootDir>/src/"],
"testPathIgnorePatterns": [
"<rootDir>/src/native",
"<rootDir>/src/primitives"
]
},
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
"*.js": ["eslint --fix", "git add"]
},
"pre-commit": "lint-staged",
"bundlesize": [
Expand Down
35 changes: 26 additions & 9 deletions src/constructors/constructWithOptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,42 @@
import type { Interpolation, Target } from '../types'
Copy link

@genedwards genedwards Oct 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no semi-colons! those bastards!

Copy link
Collaborator Author

@nvanselow nvanselow Oct 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. I have a really hard time reading this code.


export default (css: Function) => {
const constructWithOptions = (componentConstructor: Function,
tag: Target,
options: Object = {}) => {
const constructWithOptions = (
componentConstructor: Function,
tag: Target,
options: Object = {},
) => {
if (typeof tag !== 'string' && typeof tag !== 'function') {
// $FlowInvalidInputTest
throw new Error(`Cannot create styled-component for component: ${tag}`)
}

/* This is callable directly as a template function */
const templateFunction =
(strings: Array<string>, ...interpolations: Array<Interpolation>) =>
componentConstructor(tag, options, css(strings, ...interpolations))
const templateFunction = (strings: Array<string>, ...interpolations: Array<Interpolation>) => {
const cssWrapperStart = '.hybridUI & { '
const cssWrapperEnd = ' }'

// We wrap the provided css string with our own specificity class (.hybridUI)
const updatedStrings = [...strings]
updatedStrings[0] = `${cssWrapperStart}${updatedStrings[0]}`
updatedStrings[updatedStrings.length - 1] = `${updatedStrings[
updatedStrings.length - 1
]}${cssWrapperEnd}`
Copy link

@genedwards genedwards Oct 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updatedStrings.push(`${updatedStrings.pop()}${cssWrapperEnd}`)
possibly looks nicer, but probably less performant, maybe also more convoluted, whaddayathink?
I wish we could do array[-1] like python

Copy link
Collaborator Author

@nvanselow nvanselow Oct 6, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm. I’ll try. I was having a lot of issues working with that strings array. I’m not sure if it’s typescript or what.


return componentConstructor(tag, options, css(updatedStrings, ...interpolations))
}

/* If config methods are called, wrap up a new template function and merge options */
templateFunction.withConfig = config =>
constructWithOptions(componentConstructor, tag, { ...options, ...config })
constructWithOptions(componentConstructor, tag, {
...options,
...config,
})
templateFunction.attrs = attrs =>
constructWithOptions(componentConstructor, tag, { ...options,
attrs: { ...(options.attrs || {}), ...attrs } })
constructWithOptions(componentConstructor, tag, {
...options,
attrs: { ...(options.attrs || {}), ...attrs },
})

return templateFunction
}
Expand Down