diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..ccc233785 --- /dev/null +++ b/.npmrc @@ -0,0 +1,4 @@ +registry=https://nexus1.ci.quickbaserocks.com/nexus/content/repositories/qb-npm-all/ +email=quickbasefrontenddevs@quickbase.com +always-auth=true +_auth=ZGV2ZWxvcGVyOmlkMnViVjhtaUVWaFh0R2Q= diff --git a/package.json b/package.json index edb9c5e64..865bc3602 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", "build:watch": "npm run build:lib -- --watch", "test": "npm run test:web && npm run test:native && npm run test:size", "test:web": "jest", @@ -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", @@ -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": { @@ -130,19 +131,14 @@ }, "jest": { "clearMocks": true, - "roots": [ - "/src/" - ], + "roots": ["/src/"], "testPathIgnorePatterns": [ "/src/native", "/src/primitives" ] }, "lint-staged": { - "*.js": [ - "eslint --fix", - "git add" - ] + "*.js": ["eslint --fix", "git add"] }, "pre-commit": "lint-staged", "bundlesize": [ diff --git a/src/constructors/constructWithOptions.js b/src/constructors/constructWithOptions.js index e820980a2..dbf6a37ad 100644 --- a/src/constructors/constructWithOptions.js +++ b/src/constructors/constructWithOptions.js @@ -2,25 +2,42 @@ import type { Interpolation, Target } from '../types' 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, ...interpolations: Array) => - componentConstructor(tag, options, css(strings, ...interpolations)) + const templateFunction = (strings: Array, ...interpolations: Array) => { + 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}` + + 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 }