Skip to content

Commit

Permalink
feat(injector): emulate source declaration order
Browse files Browse the repository at this point in the history 
resolve #29
  • Loading branch information
@kripod
kripod committed Apr 18, 2020
1 parent 893466f commit dc448bc
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 47 deletions.
72 changes: 61 additions & 11 deletions packages/glaze/src/useStyling.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,54 @@ import { StyleInjectorContext } from './StyleInjectorContext';
import { useTheme } from './ThemeContext';
import styleRefs from './useStyling.treat';

const shorthandProperties = new Set([
'all',
'animation',
'background',
'border',
'borderBlock',
'borderBlockEnd',
'borderBlockStart',
'borderBottom',
'borderColor',
'borderImage',
'borderInline',
'borderInlineEnd',
'borderInlineStart',
'borderLeft',
'borderRadius',
'borderRight',
'borderStyle',
'borderTop',
'borderWidth',
'columnRule',
'columns',
'flex',
'flexFlow',
'font',
'gap',
'grid',
'gridArea',
'gridColumn',
'gridRow',
'gridTemplate',
'lineClamp',
'listStyle',
'margin',
'mask',
'maskBorder',
'motion',
'offset',
'outline',
'overflow',
'padding',
'placeItems',
'placeSelf',
'textDecoration',
'textEmphasis',
'transition',
]);

function kebabCaseReplacer(match: string): string {
return `-${match.toLowerCase()}`;
}
Expand Down Expand Up @@ -85,17 +133,19 @@ export function useStyling(): (themedStyle: ThemedStyle) => string {
if (!appendedClassName) {
// TODO: Use same hashing algorithm during static CSS generation
appendedClassName = getClassName(identName);
ruleManager.increaseUsage(
appendedClassName,
() =>
`.${isDev ? escape(appendedClassName) : appendedClassName}{${
// TODO: Abstract this logic away to a utility function
// Convert CSS property to kebab-case and normalize numeric value
`${key.replace(/[A-Z]/g, kebabCaseReplacer)}:${
typeof value !== 'number' ? value : `${value}px`
}`
}}`,
);
ruleManager.increaseUsage(appendedClassName, () => {
// Increase specificity of rules for non-shorthand CSS properties
const selector = `.${
isDev ? escape(appendedClassName) : appendedClassName
}`.repeat(shorthandProperties.has(key) ? 1 : 2);
return `${selector}{${
// TODO: Abstract this logic away to a utility function
// Convert CSS property to kebab-case and normalize numeric value
`${key.replace(/[A-Z]/g, kebabCaseReplacer)}:${
typeof value !== 'number' ? value : `${value}px`
}`
}}`;
});

ownRuleUsageCountsByClassName[appendedClassName] =
(ownRuleUsageCountsByClassName[appendedClassName] || 0) + 1;
Expand Down
42 changes: 6 additions & 36 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6477,11 +6477,6 @@ detect-indent@^5.0.0:
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=

detect-libc@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=

detect-newline@3.1.0, detect-newline@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
Expand Down Expand Up @@ -9556,7 +9551,7 @@ husky@^4.2.5:
slash "^3.0.0"
which-pm-runs "^1.0.0"

iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
Expand Down Expand Up @@ -12513,15 +12508,6 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

needle@^2.2.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
dependencies:
debug "^3.2.6"
iconv-lite "^0.4.4"
sax "^1.2.4"

negotiator@0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
Expand Down Expand Up @@ -12719,22 +12705,6 @@ node-object-hash@^2.0.0:
resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b"
integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ==

node-pre-gyp@*:
version "0.14.0"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
dependencies:
detect-libc "^1.0.2"
mkdirp "^0.5.1"
needle "^2.2.1"
nopt "^4.0.1"
npm-packlist "^1.1.6"
npmlog "^4.0.2"
rc "^1.2.7"
rimraf "^2.6.1"
semver "^5.3.0"
tar "^4.4.2"

node-releases@^1.1.29, node-releases@^1.1.44, node-releases@^1.1.52, node-releases@^1.1.53:
version "1.1.53"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
Expand Down Expand Up @@ -12860,7 +12830,7 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
semver "^5.6.0"
validate-npm-package-name "^3.0.0"

npm-packlist@^1.1.6, npm-packlist@^1.4.4:
npm-packlist@^1.4.4:
version "1.4.8"
resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
Expand Down Expand Up @@ -12892,7 +12862,7 @@ npm-run-path@^4.0.0:
dependencies:
path-key "^3.0.0"

npmlog@^4.0.2, npmlog@^4.1.2:
npmlog@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
Expand Down Expand Up @@ -14865,7 +14835,7 @@ raw-loader@^0.5.1:
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
integrity sha1-DD0L6u2KAclm2Xh793goElKpeao=

rc@^1.2.7, rc@^1.2.8:
rc@^1.2.8:
version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
Expand Down Expand Up @@ -16121,7 +16091,7 @@ semver-regex@^2.0.0:
resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==

"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
Expand Down Expand Up @@ -17236,7 +17206,7 @@ tapable@^1.0.0, tapable@^1.1.3:
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==

tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
version "4.4.13"
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
Expand Down

0 comments on commit dc448bc

Please sign in to comment.