@linaria/atomic 4.1.5 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/index.js +46 -0
  2. package/dist/index.js.map +1 -0
  3. package/dist/index.mjs +17 -0
  4. package/dist/index.mjs.map +1 -0
  5. package/dist/processors/css.js +372 -0
  6. package/dist/processors/css.js.map +1 -0
  7. package/dist/processors/css.mjs +344 -0
  8. package/dist/processors/css.mjs.map +1 -0
  9. package/dist/processors/styled.js +387 -0
  10. package/dist/processors/styled.js.map +1 -0
  11. package/dist/processors/styled.mjs +359 -0
  12. package/dist/processors/styled.mjs.map +1 -0
  13. package/package.json +33 -12
  14. package/processors/css.js +1 -1
  15. package/processors/styled.js +1 -1
  16. package/esm/CSSProperties.js +0 -2
  17. package/esm/CSSProperties.js.map +0 -1
  18. package/esm/css.js +0 -5
  19. package/esm/css.js.map +0 -1
  20. package/esm/index.js +0 -4
  21. package/esm/index.js.map +0 -1
  22. package/esm/processors/css.js +0 -39
  23. package/esm/processors/css.js.map +0 -1
  24. package/esm/processors/helpers/atomize.js +0 -100
  25. package/esm/processors/helpers/atomize.js.map +0 -1
  26. package/esm/processors/helpers/propertyPriority.js +0 -67
  27. package/esm/processors/helpers/propertyPriority.js.map +0 -1
  28. package/esm/processors/styled.js +0 -56
  29. package/esm/processors/styled.js.map +0 -1
  30. package/lib/CSSProperties.js +0 -2
  31. package/lib/CSSProperties.js.map +0 -1
  32. package/lib/css.js +0 -13
  33. package/lib/css.js.map +0 -1
  34. package/lib/index.js +0 -19
  35. package/lib/index.js.map +0 -1
  36. package/lib/processors/css.js +0 -55
  37. package/lib/processors/css.js.map +0 -1
  38. package/lib/processors/helpers/atomize.js +0 -116
  39. package/lib/processors/helpers/atomize.js.map +0 -1
  40. package/lib/processors/helpers/propertyPriority.js +0 -73
  41. package/lib/processors/helpers/propertyPriority.js.map +0 -1
  42. package/lib/processors/styled.js +0 -73
  43. package/lib/processors/styled.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"atomize.js","names":["all","knownProperties","postcss","stylis","slugify","getPropertyPriority","knownPropertiesMap","reduce","acc","property","i","hashProperty","index","undefined","toString","parseCss","cssText","parse","e","Error","message","atomize","hasPriority","set","prefix","keyframe","atomicRules","stylesheet","walkAtRules","atRule","remove","push","name","walkDecls","decl","thisParent","parent","parents","atomicProperty","prop","hasAtRule","unshift","type","params","selector","root","container","forEach","newNode","clone","removeAll","append","css","propertySlug","join","valueSlug","value","className","propertyPriority","processedCss","repeat"],"sources":["../../../src/processors/helpers/atomize.ts"],"sourcesContent":["import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n (acc: { [property: string]: number }, property, i) => {\n acc[property] = i;\n return acc;\n },\n {}\n);\n\nfunction hashProperty(property: string) {\n const index = knownPropertiesMap[property];\n // If it's a known property, let's use the index to cut down the length of the hash.\n // otherwise, slugify\n if (index !== undefined) {\n return index.toString(36); // base 36 so that we get a-z,0-9\n }\n return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n try {\n return postcss.parse(cssText);\n } catch (e) {\n if (e instanceof Error) {\n throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n }\n\n throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n stylis.set({\n prefix: false,\n keyframe: false,\n });\n const atomicRules: {\n className?: string;\n cssText: string;\n property: string;\n }[] = [];\n\n const stylesheet = parseCss(cssText);\n\n // We want to extract all keyframes and leave them as-is.\n // This isn't scoped locally yet\n stylesheet.walkAtRules('keyframes', (atRule) => {\n atRule.remove();\n atomicRules.push({\n property: atRule.name,\n cssText: atRule.toString(),\n });\n });\n\n stylesheet.walkDecls((decl) => {\n let thisParent: Document | Container | undefined = decl.parent;\n const parents: (Document | Container)[] = [];\n const atomicProperty = [decl.prop];\n let hasAtRule = false;\n\n // Traverse the declarations parents, and collect them all.\n while (thisParent && thisParent !== stylesheet) {\n parents.unshift(thisParent);\n if (thisParent.type === 'atrule') {\n hasAtRule = true;\n // @media queries, @supports etc.\n atomicProperty.push(\n (thisParent as AtRule).name,\n (thisParent as AtRule).params\n );\n } else if (thisParent.type === 'rule') {\n // pseudo classes etc.\n atomicProperty.push((thisParent as Rule).selector);\n }\n\n thisParent = thisParent.parent;\n }\n\n // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n // `@media (max-width: 400px) { background: red; }`, or\n // `&:hover { background: red; }`, or\n // `background: red;`\n // We do this so we can run it through stylis, to produce a full atom, eg.\n // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n const root = postcss.root();\n let container: Document | Container = root;\n parents.forEach((parent) => {\n const newNode = parent.clone();\n newNode.removeAll();\n container.append(newNode);\n container = newNode;\n });\n container.append(decl.clone());\n\n const css = root.toString();\n const propertySlug = hashProperty([...atomicProperty].join(';'));\n const valueSlug = slugify(decl.value);\n const className = `atm_${propertySlug}_${valueSlug}`;\n\n const propertyPriority =\n getPropertyPriority(decl.prop) +\n (hasAtRule ? 1 : 0) +\n (hasPriority ? 1 : 0);\n const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n atomicRules.push({\n property: atomicProperty.join(' '),\n className,\n cssText: processedCss,\n });\n });\n\n return atomicRules;\n}\n"],"mappings":"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"}
@@ -1,67 +0,0 @@
1
- const shorthandProperties = {
2
- // The `all` property resets everything, and should effectively have priority zero.
3
- // In practice, this can be achieved by using: div { all: ... } to have even less specificity, but to avoid duplicating all selectors, we just let it be
4
- // 'all': []
5
- animation: ['animation-name', 'animation-duration', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
6
- background: ['background-attachment', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size'],
7
- border: ['border-color', 'border-style', 'border-width'],
8
- 'border-block-end': ['border-block-end-color', 'border-block-end-style', 'border-block-end-width'],
9
- 'border-block-start': ['border-block-start-color', 'border-block-start-style', 'border-block-start-width'],
10
- 'border-bottom': ['border-bottom-color', 'border-bottom-style', 'border-bottom-width'],
11
- 'border-color': ['border-bottom-color', 'border-left-color', 'border-right-color', 'border-top-color'],
12
- 'border-image': ['border-image-outset', 'border-image-repeat', 'border-image-slice', 'border-image-source', 'border-image-width'],
13
- 'border-inline-end': ['border-inline-end-color', 'border-inline-end-style', 'border-inline-end-width'],
14
- 'border-inline-start': ['border-inline-start-color', 'border-inline-start-style', 'border-inline-start-width'],
15
- 'border-left': ['border-left-color', 'border-left-style', 'border-left-width'],
16
- 'border-radius': ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
17
- 'border-right': ['border-right-color', 'border-right-style', 'border-right-width'],
18
- 'border-style': ['border-bottom-style', 'border-left-style', 'border-right-style', 'border-top-style'],
19
- 'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],
20
- 'border-width': ['border-bottom-width', 'border-left-width', 'border-right-width', 'border-top-width'],
21
- 'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
22
- columns: ['column-count', 'column-width'],
23
- flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
24
- 'flex-flow': ['flex-direction', 'flex-wrap'],
25
- font: ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'line-height'],
26
- gap: ['row-gap', 'column-gap'],
27
- grid: ['grid-auto-columns', 'grid-auto-flow', 'grid-auto-rows', 'grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
28
- 'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
29
- 'grid-column': ['grid-column-end', 'grid-column-start'],
30
- 'grid-row': ['grid-row-end', 'grid-row-start'],
31
- 'grid-template': ['grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
32
- 'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],
33
- margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],
34
- mask: ['mask-clip', 'mask-composite', 'mask-image', 'mask-mode', 'mask-origin', 'mask-position', 'mask-repeat', 'mask-size'],
35
- offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
36
- outline: ['outline-color', 'outline-style', 'outline-width'],
37
- overflow: ['overflow-x', 'overflow-y'],
38
- padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],
39
- 'place-content': ['align-content', 'justify-content'],
40
- 'place-items': ['align-items', 'justify-items'],
41
- 'place-self': ['align-self', 'justify-self'],
42
- 'scroll-margin': ['scroll-margin-bottom', 'scroll-margin-left', 'scroll-margin-right', 'scroll-margin-top'],
43
- 'scroll-padding': ['scroll-padding-bottom', 'scroll-padding-left', 'scroll-padding-right', 'scroll-padding-top'],
44
- 'text-decoration': ['text-decoration-color', 'text-decoration-line', 'text-decoration-style', 'text-decoration-thickness'],
45
- 'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],
46
- transition: ['transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function']
47
- }; // Get the property priority: the higher the priority, the higher the resulting
48
- // specificity of the atom. For example, if we had:
49
- //
50
- // import { css } from '@linaria/atomic';
51
- // css`
52
- // background-color: blue;
53
- // background: red;
54
- // `;
55
- //
56
- // we would produce:
57
- //
58
- // .atm_a.atm_a { background-color: blue }
59
- // .atm_b { background: red }
60
- //
61
- // and so the more specific selector (.atm_a.atm_a) would win
62
-
63
- export function getPropertyPriority(property) {
64
- const longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
65
- return longhands.includes(property) ? 2 : 1;
66
- }
67
- //# sourceMappingURL=propertyPriority.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"propertyPriority.js","names":["shorthandProperties","animation","background","border","columns","flex","font","gap","grid","margin","mask","offset","outline","overflow","padding","transition","getPropertyPriority","property","longhands","Object","values","reduce","a","b","includes"],"sources":["../../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["const shorthandProperties = {\n // The `all` property resets everything, and should effectively have priority zero.\n // In practice, this can be achieved by using: div { all: ... } to have even less specificity, but to avoid duplicating all selectors, we just let it be\n // 'all': []\n animation: [\n 'animation-name',\n 'animation-duration',\n 'animation-timing-function',\n 'animation-delay',\n 'animation-iteration-count',\n 'animation-direction',\n 'animation-fill-mode',\n 'animation-play-state',\n ],\n background: [\n 'background-attachment',\n 'background-clip',\n 'background-color',\n 'background-image',\n 'background-origin',\n 'background-position',\n 'background-repeat',\n 'background-size',\n ],\n border: ['border-color', 'border-style', 'border-width'],\n 'border-block-end': [\n 'border-block-end-color',\n 'border-block-end-style',\n 'border-block-end-width',\n ],\n 'border-block-start': [\n 'border-block-start-color',\n 'border-block-start-style',\n 'border-block-start-width',\n ],\n 'border-bottom': [\n 'border-bottom-color',\n 'border-bottom-style',\n 'border-bottom-width',\n ],\n 'border-color': [\n 'border-bottom-color',\n 'border-left-color',\n 'border-right-color',\n 'border-top-color',\n ],\n 'border-image': [\n 'border-image-outset',\n 'border-image-repeat',\n 'border-image-slice',\n 'border-image-source',\n 'border-image-width',\n ],\n 'border-inline-end': [\n 'border-inline-end-color',\n 'border-inline-end-style',\n 'border-inline-end-width',\n ],\n 'border-inline-start': [\n 'border-inline-start-color',\n 'border-inline-start-style',\n 'border-inline-start-width',\n ],\n 'border-left': [\n 'border-left-color',\n 'border-left-style',\n 'border-left-width',\n ],\n 'border-radius': [\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n 'border-right': [\n 'border-right-color',\n 'border-right-style',\n 'border-right-width',\n ],\n 'border-style': [\n 'border-bottom-style',\n 'border-left-style',\n 'border-right-style',\n 'border-top-style',\n ],\n 'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n 'border-width': [\n 'border-bottom-width',\n 'border-left-width',\n 'border-right-width',\n 'border-top-width',\n ],\n 'column-rule': [\n 'column-rule-width',\n 'column-rule-style',\n 'column-rule-color',\n ],\n columns: ['column-count', 'column-width'],\n flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n 'flex-flow': ['flex-direction', 'flex-wrap'],\n font: [\n 'font-family',\n 'font-size',\n 'font-stretch',\n 'font-style',\n 'font-variant',\n 'font-weight',\n 'line-height',\n ],\n gap: ['row-gap', 'column-gap'],\n grid: [\n 'grid-auto-columns',\n 'grid-auto-flow',\n 'grid-auto-rows',\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'grid-area': [\n 'grid-row-start',\n 'grid-column-start',\n 'grid-row-end',\n 'grid-column-end',\n ],\n 'grid-column': ['grid-column-end', 'grid-column-start'],\n 'grid-row': ['grid-row-end', 'grid-row-start'],\n 'grid-template': [\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n mask: [\n 'mask-clip',\n 'mask-composite',\n 'mask-image',\n 'mask-mode',\n 'mask-origin',\n 'mask-position',\n 'mask-repeat',\n 'mask-size',\n ],\n offset: [\n 'offset-anchor',\n 'offset-distance',\n 'offset-path',\n 'offset-position',\n 'offset-rotate',\n ],\n outline: ['outline-color', 'outline-style', 'outline-width'],\n overflow: ['overflow-x', 'overflow-y'],\n padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n 'place-content': ['align-content', 'justify-content'],\n 'place-items': ['align-items', 'justify-items'],\n 'place-self': ['align-self', 'justify-self'],\n 'scroll-margin': [\n 'scroll-margin-bottom',\n 'scroll-margin-left',\n 'scroll-margin-right',\n 'scroll-margin-top',\n ],\n 'scroll-padding': [\n 'scroll-padding-bottom',\n 'scroll-padding-left',\n 'scroll-padding-right',\n 'scroll-padding-top',\n ],\n 'text-decoration': [\n 'text-decoration-color',\n 'text-decoration-line',\n 'text-decoration-style',\n 'text-decoration-thickness',\n ],\n 'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n transition: [\n 'transition-delay',\n 'transition-duration',\n 'transition-property',\n 'transition-timing-function',\n ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n// background-color: blue;\n// background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n const longhands = Object.values(shorthandProperties).reduce(\n (a, b) => [...a, ...b],\n []\n );\n\n return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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"}
@@ -1,56 +0,0 @@
1
- import { debug } from '@linaria/logger';
2
- import StyledProcessor from '@linaria/react/processors/styled';
3
- import { hasMeta } from '@linaria/tags';
4
- import atomize from './helpers/atomize';
5
- export default class AtomicStyledProcessor extends StyledProcessor {
6
- #classes;
7
-
8
- get classes() {
9
- if (this.#classes) {
10
- return this.#classes;
11
- }
12
-
13
- throw new Error('Styles are not extracted yet. Please call `extractRules` first.');
14
- }
15
-
16
- extractRules(valueCache, cssText, loc) {
17
- const rules = {};
18
- const wrappedValue = typeof this.component === 'string' ? null : valueCache.get(this.component.node.name);
19
- const atomicRules = atomize(cssText, hasMeta(wrappedValue));
20
- atomicRules.forEach(rule => {
21
- // eslint-disable-next-line no-param-reassign
22
- rules[rule.cssText] = {
23
- cssText: rule.cssText,
24
- start: loc?.start ?? null,
25
- className: this.className,
26
- displayName: this.displayName,
27
- atom: true
28
- };
29
- debug('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
30
- });
31
- this.#classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
32
- .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
33
- return rules;
34
- }
35
-
36
- getProps() {
37
- const props = super.getProps();
38
- props.class = [this.classes, this.className].filter(Boolean).join(' ');
39
- props.atomic = true;
40
- return props;
41
- }
42
-
43
- getVariableId(source, unit, precedingCss) {
44
- const id = this.getCustomVariableId(source, unit, precedingCss);
45
-
46
- if (id) {
47
- return id;
48
- }
49
-
50
- const context = this.getVariableContext(source, unit, precedingCss); // id is based on the slugified value
51
-
52
- return context.valueSlug;
53
- }
54
-
55
- }
56
- //# sourceMappingURL=styled.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styled.js","names":["debug","StyledProcessor","hasMeta","atomize","AtomicStyledProcessor","classes","Error","extractRules","valueCache","cssText","loc","rules","wrappedValue","component","get","node","name","atomicRules","forEach","rule","start","className","displayName","atom","filter","map","join","getProps","props","class","Boolean","atomic","getVariableId","source","unit","precedingCss","id","getCustomVariableId","context","getVariableContext","valueSlug"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport { hasMeta } from '@linaria/tags';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n #classes: string | undefined;\n\n private get classes(): string {\n if (this.#classes) {\n return this.#classes;\n }\n\n throw new Error(\n 'Styles are not extracted yet. Please call `extractRules` first.'\n );\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const wrappedValue =\n typeof this.component === 'string'\n ? null\n : valueCache.get(this.component.node.name);\n\n const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n atomicRules.forEach((rule) => {\n // eslint-disable-next-line no-param-reassign\n rules[rule.cssText] = {\n cssText: rule.cssText,\n start: loc?.start ?? null,\n className: this.className,\n displayName: this.displayName,\n atom: true,\n };\n\n debug(\n 'evaluator:template-processor:extracted-atomic-rule',\n `\\n${rule.cssText}`\n );\n });\n\n this.#classes = atomicRules\n // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n .filter((rule) => !!rule.className)\n .map((rule) => rule.className!)\n .join(' ');\n\n return rules;\n }\n\n protected override getProps(): IProps {\n const props = super.getProps();\n props.class = [this.classes, this.className].filter(Boolean).join(' ');\n props.atomic = true;\n return props;\n }\n\n protected override getVariableId(\n source: string,\n unit: string,\n precedingCss: string\n ): string {\n const id = this.getCustomVariableId(source, unit, precedingCss);\n if (id) {\n return id;\n }\n\n const context = this.getVariableContext(source, unit, precedingCss);\n // id is based on the slugified value\n return context.valueSlug;\n }\n}\n"],"mappings":"AAEA,SAASA,KAAT,QAAsB,iBAAtB;AAEA,OAAOC,eAAP,MAA4B,kCAA5B;AACA,SAASC,OAAT,QAAwB,eAAxB;AAGA,OAAOC,OAAP,MAAoB,mBAApB;AAEA,eAAe,MAAMC,qBAAN,SAAoCH,eAApC,CAAoD;EACjE,CAACI,OAAD;;EAEmB,IAAPA,OAAO,GAAW;IAC5B,IAAI,KAAK,CAACA,OAAV,EAAmB;MACjB,OAAO,KAAK,CAACA,OAAb;IACD;;IAED,MAAM,IAAIC,KAAJ,CACJ,iEADI,CAAN;EAGD;;EAEeC,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAInB;IACP,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,YAAY,GAChB,OAAO,KAAKC,SAAZ,KAA0B,QAA1B,GACI,IADJ,GAEIL,UAAU,CAACM,GAAX,CAAe,KAAKD,SAAL,CAAeE,IAAf,CAAoBC,IAAnC,CAHN;IAKA,MAAMC,WAAW,GAAGd,OAAO,CAACM,OAAD,EAAUP,OAAO,CAACU,YAAD,CAAjB,CAA3B;IACAK,WAAW,CAACC,OAAZ,CAAqBC,IAAD,IAAU;MAC5B;MACAR,KAAK,CAACQ,IAAI,CAACV,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAEU,IAAI,CAACV,OADM;QAEpBW,KAAK,EAAEV,GAAG,EAAEU,KAAL,IAAc,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQAvB,KAAK,CACH,oDADG,EAEF,KAAImB,IAAI,CAACV,OAAQ,EAFf,CAAL;IAID,CAdD;IAgBA,KAAK,CAACJ,OAAN,GAAgBY,WAAW,CACzB;IADyB,CAExBO,MAFa,CAELL,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbI,GAHa,CAGRN,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbK,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAOf,KAAP;EACD;;EAEkBgB,QAAQ,GAAW;IACpC,MAAMC,KAAK,GAAG,MAAMD,QAAN,EAAd;IACAC,KAAK,CAACC,KAAN,GAAc,CAAC,KAAKxB,OAAN,EAAe,KAAKgB,SAApB,EAA+BG,MAA/B,CAAsCM,OAAtC,EAA+CJ,IAA/C,CAAoD,GAApD,CAAd;IACAE,KAAK,CAACG,MAAN,GAAe,IAAf;IACA,OAAOH,KAAP;EACD;;EAEkBI,aAAa,CAC9BC,MAD8B,EAE9BC,IAF8B,EAG9BC,YAH8B,EAItB;IACR,MAAMC,EAAE,GAAG,KAAKC,mBAAL,CAAyBJ,MAAzB,EAAiCC,IAAjC,EAAuCC,YAAvC,CAAX;;IACA,IAAIC,EAAJ,EAAQ;MACN,OAAOA,EAAP;IACD;;IAED,MAAME,OAAO,GAAG,KAAKC,kBAAL,CAAwBN,MAAxB,EAAgCC,IAAhC,EAAsCC,YAAtC,CAAhB,CANQ,CAOR;;IACA,OAAOG,OAAO,CAACE,SAAf;EACD;;AAvEgE"}
@@ -1,2 +0,0 @@
1
- "use strict";
2
- //# sourceMappingURL=CSSProperties.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CSSProperties.js","names":[],"sources":["../src/CSSProperties.ts"],"sourcesContent":["export type CSSProperties = {\n [key: string]: string | number | CSSProperties;\n};\n"],"mappings":""}
package/lib/css.js DELETED
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.default = exports.css = void 0;
5
-
6
- const css = () => {
7
- throw new Error('Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.');
8
- };
9
-
10
- exports.css = css;
11
- var _default = css;
12
- exports.default = _default;
13
- //# sourceMappingURL=css.js.map
package/lib/css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"css.js","names":["css","Error"],"sources":["../src/css.ts"],"sourcesContent":["import type { LinariaClassName } from '@linaria/core';\n\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n strings: TemplateStringsArray,\n ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nexport const css: CSS = () => {\n throw new Error(\n 'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n );\n};\n\nexport default css;\n"],"mappings":";;;;;AASO,MAAMA,GAAQ,GAAG,MAAM;EAC5B,MAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;;;eAMQD,G"}
package/lib/index.js DELETED
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.styled = exports.cx = exports.css = void 0;
5
-
6
- var _css = _interopRequireDefault(require("./css"));
7
-
8
- exports.css = _css.default;
9
-
10
- var _react = require("@linaria/react");
11
-
12
- exports.styled = _react.styled;
13
-
14
- var _core = require("@linaria/core");
15
-
16
- exports.cx = _core.cx;
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
- //# sourceMappingURL=index.js.map
package/lib/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as css } from './css';\nexport { styled } from '@linaria/react';\nexport { cx } from '@linaria/core';\n\nexport type { CSSProperties } from './CSSProperties';\n"],"mappings":";;;;;AAAA;;;;AACA;;;;AACA"}
@@ -1,55 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _css = _interopRequireDefault(require("@linaria/core/processors/css"));
9
-
10
- var _logger = require("@linaria/logger");
11
-
12
- var _atomize = _interopRequireDefault(require("./helpers/atomize"));
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
- class AtomicCssProcessor extends _css.default {
17
- #classes;
18
-
19
- get classes() {
20
- if (this.#classes) {
21
- return this.#classes;
22
- }
23
-
24
- throw new Error('Styles are not extracted yet. Please call `build` first.');
25
- }
26
-
27
- doRuntimeReplacement() {
28
- this.replacer(this.astService.stringLiteral(this.classes), false);
29
- }
30
-
31
- extractRules(valueCache, cssText, loc) {
32
- const rules = {};
33
- const atomicRules = (0, _atomize.default)(cssText, false);
34
- atomicRules.forEach(rule => {
35
- var _loc$start;
36
-
37
- // eslint-disable-next-line no-param-reassign
38
- rules[rule.cssText] = {
39
- cssText: rule.cssText,
40
- start: (_loc$start = loc === null || loc === void 0 ? void 0 : loc.start) !== null && _loc$start !== void 0 ? _loc$start : null,
41
- className: this.className,
42
- displayName: this.displayName,
43
- atom: true
44
- };
45
- (0, _logger.debug)('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
46
- });
47
- this.#classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
48
- .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
49
- return rules;
50
- }
51
-
52
- }
53
-
54
- exports.default = AtomicCssProcessor;
55
- //# sourceMappingURL=css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"css.js","names":["AtomicCssProcessor","CssProcessor","classes","Error","doRuntimeReplacement","replacer","astService","stringLiteral","extractRules","valueCache","cssText","loc","rules","atomicRules","atomize","forEach","rule","start","className","displayName","atom","debug","filter","map","join"],"sources":["../../src/processors/css.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport { debug } from '@linaria/logger';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n #classes: string | undefined;\n\n private get classes(): string {\n if (this.#classes) {\n return this.#classes;\n }\n\n throw new Error('Styles are not extracted yet. Please call `build` first.');\n }\n\n public override doRuntimeReplacement(): void {\n this.replacer(this.astService.stringLiteral(this.classes), false);\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const atomicRules = atomize(cssText, false);\n atomicRules.forEach((rule) => {\n // eslint-disable-next-line no-param-reassign\n rules[rule.cssText] = {\n cssText: rule.cssText,\n start: loc?.start ?? null,\n className: this.className!,\n displayName: this.displayName!,\n atom: true,\n };\n\n debug(\n 'evaluator:template-processor:extracted-atomic-rule',\n `\\n${rule.cssText}`\n );\n });\n\n this.#classes = atomicRules\n // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n .filter((rule) => !!rule.className)\n .map((rule) => rule.className!)\n .join(' ');\n\n return rules;\n }\n}\n"],"mappings":";;;;;;;AAEA;;AACA;;AAGA;;;;AAEe,MAAMA,kBAAN,SAAiCC,YAAjC,CAA8C;EAC3D,CAACC,OAAD;;EAEmB,IAAPA,OAAO,GAAW;IAC5B,IAAI,KAAK,CAACA,OAAV,EAAmB;MACjB,OAAO,KAAK,CAACA,OAAb;IACD;;IAED,MAAM,IAAIC,KAAJ,CAAU,0DAAV,CAAN;EACD;;EAEeC,oBAAoB,GAAS;IAC3C,KAAKC,QAAL,CAAc,KAAKC,UAAL,CAAgBC,aAAhB,CAA8B,KAAKL,OAAnC,CAAd,EAA2D,KAA3D;EACD;;EAEeM,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAInB;IACP,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,WAAW,GAAG,IAAAC,gBAAA,EAAQJ,OAAR,EAAiB,KAAjB,CAApB;IACAG,WAAW,CAACE,OAAZ,CAAqBC,IAAD,IAAU;MAAA;;MAC5B;MACAJ,KAAK,CAACI,IAAI,CAACN,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAEM,IAAI,CAACN,OADM;QAEpBO,KAAK,gBAAEN,GAAF,aAAEA,GAAF,uBAAEA,GAAG,CAAEM,KAAP,mDAAgB,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQA,IAAAC,aAAA,EACE,oDADF,EAEG,KAAIL,IAAI,CAACN,OAAQ,EAFpB;IAID,CAdD;IAgBA,KAAK,CAACR,OAAN,GAAgBW,WAAW,CACzB;IADyB,CAExBS,MAFa,CAELN,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbK,GAHa,CAGRP,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbM,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAOZ,KAAP;EACD;;AA9C0D"}
@@ -1,116 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = atomize;
7
-
8
- var _knownCssProperties = require("known-css-properties");
9
-
10
- var _postcss = _interopRequireDefault(require("postcss"));
11
-
12
- var _stylis = _interopRequireDefault(require("stylis"));
13
-
14
- var _utils = require("@linaria/utils");
15
-
16
- var _propertyPriority = require("./propertyPriority");
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- const knownPropertiesMap = _knownCssProperties.all.reduce((acc, property, i) => {
21
- acc[property] = i;
22
- return acc;
23
- }, {});
24
-
25
- function hashProperty(property) {
26
- const index = knownPropertiesMap[property]; // If it's a known property, let's use the index to cut down the length of the hash.
27
- // otherwise, slugify
28
-
29
- if (index !== undefined) {
30
- return index.toString(36); // base 36 so that we get a-z,0-9
31
- }
32
-
33
- return (0, _utils.slugify)(property);
34
- }
35
-
36
- const parseCss = cssText => {
37
- try {
38
- return _postcss.default.parse(cssText);
39
- } catch (e) {
40
- if (e instanceof Error) {
41
- throw new Error(`Error parsing CSS: ${e.message}\nCSS:\n${cssText}`);
42
- }
43
-
44
- throw new Error(`Unknown error parsing CSS.\nCSS:\n${cssText}`);
45
- }
46
- };
47
-
48
- function atomize(cssText, hasPriority = false) {
49
- _stylis.default.set({
50
- prefix: false,
51
- keyframe: false
52
- });
53
-
54
- const atomicRules = [];
55
- const stylesheet = parseCss(cssText); // We want to extract all keyframes and leave them as-is.
56
- // This isn't scoped locally yet
57
-
58
- stylesheet.walkAtRules('keyframes', atRule => {
59
- atRule.remove();
60
- atomicRules.push({
61
- property: atRule.name,
62
- cssText: atRule.toString()
63
- });
64
- });
65
- stylesheet.walkDecls(decl => {
66
- let thisParent = decl.parent;
67
- const parents = [];
68
- const atomicProperty = [decl.prop];
69
- let hasAtRule = false; // Traverse the declarations parents, and collect them all.
70
-
71
- while (thisParent && thisParent !== stylesheet) {
72
- parents.unshift(thisParent);
73
-
74
- if (thisParent.type === 'atrule') {
75
- hasAtRule = true; // @media queries, @supports etc.
76
-
77
- atomicProperty.push(thisParent.name, thisParent.params);
78
- } else if (thisParent.type === 'rule') {
79
- // pseudo classes etc.
80
- atomicProperty.push(thisParent.selector);
81
- }
82
-
83
- thisParent = thisParent.parent;
84
- } // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.
85
- // `@media (max-width: 400px) { background: red; }`, or
86
- // `&:hover { background: red; }`, or
87
- // `background: red;`
88
- // We do this so we can run it through stylis, to produce a full atom, eg.
89
- // `@media (max-width: 400px) { .atm_foo { background: red; } }`
90
-
91
-
92
- const root = _postcss.default.root();
93
-
94
- let container = root;
95
- parents.forEach(parent => {
96
- const newNode = parent.clone();
97
- newNode.removeAll();
98
- container.append(newNode);
99
- container = newNode;
100
- });
101
- container.append(decl.clone());
102
- const css = root.toString();
103
- const propertySlug = hashProperty([...atomicProperty].join(';'));
104
- const valueSlug = (0, _utils.slugify)(decl.value);
105
- const className = `atm_${propertySlug}_${valueSlug}`;
106
- const propertyPriority = (0, _propertyPriority.getPropertyPriority)(decl.prop) + (hasAtRule ? 1 : 0) + (hasPriority ? 1 : 0);
107
- const processedCss = (0, _stylis.default)(`.${className}`.repeat(propertyPriority), css);
108
- atomicRules.push({
109
- property: atomicProperty.join(' '),
110
- className,
111
- cssText: processedCss
112
- });
113
- });
114
- return atomicRules;
115
- }
116
- //# sourceMappingURL=atomize.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"atomize.js","names":["knownPropertiesMap","knownProperties","reduce","acc","property","i","hashProperty","index","undefined","toString","slugify","parseCss","cssText","postcss","parse","e","Error","message","atomize","hasPriority","stylis","set","prefix","keyframe","atomicRules","stylesheet","walkAtRules","atRule","remove","push","name","walkDecls","decl","thisParent","parent","parents","atomicProperty","prop","hasAtRule","unshift","type","params","selector","root","container","forEach","newNode","clone","removeAll","append","css","propertySlug","join","valueSlug","value","className","propertyPriority","getPropertyPriority","processedCss","repeat"],"sources":["../../../src/processors/helpers/atomize.ts"],"sourcesContent":["import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n (acc: { [property: string]: number }, property, i) => {\n acc[property] = i;\n return acc;\n },\n {}\n);\n\nfunction hashProperty(property: string) {\n const index = knownPropertiesMap[property];\n // If it's a known property, let's use the index to cut down the length of the hash.\n // otherwise, slugify\n if (index !== undefined) {\n return index.toString(36); // base 36 so that we get a-z,0-9\n }\n return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n try {\n return postcss.parse(cssText);\n } catch (e) {\n if (e instanceof Error) {\n throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n }\n\n throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n stylis.set({\n prefix: false,\n keyframe: false,\n });\n const atomicRules: {\n className?: string;\n cssText: string;\n property: string;\n }[] = [];\n\n const stylesheet = parseCss(cssText);\n\n // We want to extract all keyframes and leave them as-is.\n // This isn't scoped locally yet\n stylesheet.walkAtRules('keyframes', (atRule) => {\n atRule.remove();\n atomicRules.push({\n property: atRule.name,\n cssText: atRule.toString(),\n });\n });\n\n stylesheet.walkDecls((decl) => {\n let thisParent: Document | Container | undefined = decl.parent;\n const parents: (Document | Container)[] = [];\n const atomicProperty = [decl.prop];\n let hasAtRule = false;\n\n // Traverse the declarations parents, and collect them all.\n while (thisParent && thisParent !== stylesheet) {\n parents.unshift(thisParent);\n if (thisParent.type === 'atrule') {\n hasAtRule = true;\n // @media queries, @supports etc.\n atomicProperty.push(\n (thisParent as AtRule).name,\n (thisParent as AtRule).params\n );\n } else if (thisParent.type === 'rule') {\n // pseudo classes etc.\n atomicProperty.push((thisParent as Rule).selector);\n }\n\n thisParent = thisParent.parent;\n }\n\n // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n // `@media (max-width: 400px) { background: red; }`, or\n // `&:hover { background: red; }`, or\n // `background: red;`\n // We do this so we can run it through stylis, to produce a full atom, eg.\n // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n const root = postcss.root();\n let container: Document | Container = root;\n parents.forEach((parent) => {\n const newNode = parent.clone();\n newNode.removeAll();\n container.append(newNode);\n container = newNode;\n });\n container.append(decl.clone());\n\n const css = root.toString();\n const propertySlug = hashProperty([...atomicProperty].join(';'));\n const valueSlug = slugify(decl.value);\n const className = `atm_${propertySlug}_${valueSlug}`;\n\n const propertyPriority =\n getPropertyPriority(decl.prop) +\n (hasAtRule ? 1 : 0) +\n (hasPriority ? 1 : 0);\n const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n atomicRules.push({\n property: atomicProperty.join(' '),\n className,\n cssText: processedCss,\n });\n });\n\n return atomicRules;\n}\n"],"mappings":"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"}
@@ -1,73 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.getPropertyPriority = getPropertyPriority;
7
- const shorthandProperties = {
8
- // The `all` property resets everything, and should effectively have priority zero.
9
- // In practice, this can be achieved by using: div { all: ... } to have even less specificity, but to avoid duplicating all selectors, we just let it be
10
- // 'all': []
11
- animation: ['animation-name', 'animation-duration', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
12
- background: ['background-attachment', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size'],
13
- border: ['border-color', 'border-style', 'border-width'],
14
- 'border-block-end': ['border-block-end-color', 'border-block-end-style', 'border-block-end-width'],
15
- 'border-block-start': ['border-block-start-color', 'border-block-start-style', 'border-block-start-width'],
16
- 'border-bottom': ['border-bottom-color', 'border-bottom-style', 'border-bottom-width'],
17
- 'border-color': ['border-bottom-color', 'border-left-color', 'border-right-color', 'border-top-color'],
18
- 'border-image': ['border-image-outset', 'border-image-repeat', 'border-image-slice', 'border-image-source', 'border-image-width'],
19
- 'border-inline-end': ['border-inline-end-color', 'border-inline-end-style', 'border-inline-end-width'],
20
- 'border-inline-start': ['border-inline-start-color', 'border-inline-start-style', 'border-inline-start-width'],
21
- 'border-left': ['border-left-color', 'border-left-style', 'border-left-width'],
22
- 'border-radius': ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
23
- 'border-right': ['border-right-color', 'border-right-style', 'border-right-width'],
24
- 'border-style': ['border-bottom-style', 'border-left-style', 'border-right-style', 'border-top-style'],
25
- 'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],
26
- 'border-width': ['border-bottom-width', 'border-left-width', 'border-right-width', 'border-top-width'],
27
- 'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
28
- columns: ['column-count', 'column-width'],
29
- flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
30
- 'flex-flow': ['flex-direction', 'flex-wrap'],
31
- font: ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'line-height'],
32
- gap: ['row-gap', 'column-gap'],
33
- grid: ['grid-auto-columns', 'grid-auto-flow', 'grid-auto-rows', 'grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
34
- 'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
35
- 'grid-column': ['grid-column-end', 'grid-column-start'],
36
- 'grid-row': ['grid-row-end', 'grid-row-start'],
37
- 'grid-template': ['grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
38
- 'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],
39
- margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],
40
- mask: ['mask-clip', 'mask-composite', 'mask-image', 'mask-mode', 'mask-origin', 'mask-position', 'mask-repeat', 'mask-size'],
41
- offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
42
- outline: ['outline-color', 'outline-style', 'outline-width'],
43
- overflow: ['overflow-x', 'overflow-y'],
44
- padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],
45
- 'place-content': ['align-content', 'justify-content'],
46
- 'place-items': ['align-items', 'justify-items'],
47
- 'place-self': ['align-self', 'justify-self'],
48
- 'scroll-margin': ['scroll-margin-bottom', 'scroll-margin-left', 'scroll-margin-right', 'scroll-margin-top'],
49
- 'scroll-padding': ['scroll-padding-bottom', 'scroll-padding-left', 'scroll-padding-right', 'scroll-padding-top'],
50
- 'text-decoration': ['text-decoration-color', 'text-decoration-line', 'text-decoration-style', 'text-decoration-thickness'],
51
- 'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],
52
- transition: ['transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function']
53
- }; // Get the property priority: the higher the priority, the higher the resulting
54
- // specificity of the atom. For example, if we had:
55
- //
56
- // import { css } from '@linaria/atomic';
57
- // css`
58
- // background-color: blue;
59
- // background: red;
60
- // `;
61
- //
62
- // we would produce:
63
- //
64
- // .atm_a.atm_a { background-color: blue }
65
- // .atm_b { background: red }
66
- //
67
- // and so the more specific selector (.atm_a.atm_a) would win
68
-
69
- function getPropertyPriority(property) {
70
- const longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
71
- return longhands.includes(property) ? 2 : 1;
72
- }
73
- //# sourceMappingURL=propertyPriority.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"propertyPriority.js","names":["shorthandProperties","animation","background","border","columns","flex","font","gap","grid","margin","mask","offset","outline","overflow","padding","transition","getPropertyPriority","property","longhands","Object","values","reduce","a","b","includes"],"sources":["../../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["const shorthandProperties = {\n // The `all` property resets everything, and should effectively have priority zero.\n // In practice, this can be achieved by using: div { all: ... } to have even less specificity, but to avoid duplicating all selectors, we just let it be\n // 'all': []\n animation: [\n 'animation-name',\n 'animation-duration',\n 'animation-timing-function',\n 'animation-delay',\n 'animation-iteration-count',\n 'animation-direction',\n 'animation-fill-mode',\n 'animation-play-state',\n ],\n background: [\n 'background-attachment',\n 'background-clip',\n 'background-color',\n 'background-image',\n 'background-origin',\n 'background-position',\n 'background-repeat',\n 'background-size',\n ],\n border: ['border-color', 'border-style', 'border-width'],\n 'border-block-end': [\n 'border-block-end-color',\n 'border-block-end-style',\n 'border-block-end-width',\n ],\n 'border-block-start': [\n 'border-block-start-color',\n 'border-block-start-style',\n 'border-block-start-width',\n ],\n 'border-bottom': [\n 'border-bottom-color',\n 'border-bottom-style',\n 'border-bottom-width',\n ],\n 'border-color': [\n 'border-bottom-color',\n 'border-left-color',\n 'border-right-color',\n 'border-top-color',\n ],\n 'border-image': [\n 'border-image-outset',\n 'border-image-repeat',\n 'border-image-slice',\n 'border-image-source',\n 'border-image-width',\n ],\n 'border-inline-end': [\n 'border-inline-end-color',\n 'border-inline-end-style',\n 'border-inline-end-width',\n ],\n 'border-inline-start': [\n 'border-inline-start-color',\n 'border-inline-start-style',\n 'border-inline-start-width',\n ],\n 'border-left': [\n 'border-left-color',\n 'border-left-style',\n 'border-left-width',\n ],\n 'border-radius': [\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n 'border-right': [\n 'border-right-color',\n 'border-right-style',\n 'border-right-width',\n ],\n 'border-style': [\n 'border-bottom-style',\n 'border-left-style',\n 'border-right-style',\n 'border-top-style',\n ],\n 'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n 'border-width': [\n 'border-bottom-width',\n 'border-left-width',\n 'border-right-width',\n 'border-top-width',\n ],\n 'column-rule': [\n 'column-rule-width',\n 'column-rule-style',\n 'column-rule-color',\n ],\n columns: ['column-count', 'column-width'],\n flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n 'flex-flow': ['flex-direction', 'flex-wrap'],\n font: [\n 'font-family',\n 'font-size',\n 'font-stretch',\n 'font-style',\n 'font-variant',\n 'font-weight',\n 'line-height',\n ],\n gap: ['row-gap', 'column-gap'],\n grid: [\n 'grid-auto-columns',\n 'grid-auto-flow',\n 'grid-auto-rows',\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'grid-area': [\n 'grid-row-start',\n 'grid-column-start',\n 'grid-row-end',\n 'grid-column-end',\n ],\n 'grid-column': ['grid-column-end', 'grid-column-start'],\n 'grid-row': ['grid-row-end', 'grid-row-start'],\n 'grid-template': [\n 'grid-template-areas',\n 'grid-template-columns',\n 'grid-template-rows',\n ],\n 'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n mask: [\n 'mask-clip',\n 'mask-composite',\n 'mask-image',\n 'mask-mode',\n 'mask-origin',\n 'mask-position',\n 'mask-repeat',\n 'mask-size',\n ],\n offset: [\n 'offset-anchor',\n 'offset-distance',\n 'offset-path',\n 'offset-position',\n 'offset-rotate',\n ],\n outline: ['outline-color', 'outline-style', 'outline-width'],\n overflow: ['overflow-x', 'overflow-y'],\n padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n 'place-content': ['align-content', 'justify-content'],\n 'place-items': ['align-items', 'justify-items'],\n 'place-self': ['align-self', 'justify-self'],\n 'scroll-margin': [\n 'scroll-margin-bottom',\n 'scroll-margin-left',\n 'scroll-margin-right',\n 'scroll-margin-top',\n ],\n 'scroll-padding': [\n 'scroll-padding-bottom',\n 'scroll-padding-left',\n 'scroll-padding-right',\n 'scroll-padding-top',\n ],\n 'text-decoration': [\n 'text-decoration-color',\n 'text-decoration-line',\n 'text-decoration-style',\n 'text-decoration-thickness',\n ],\n 'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n transition: [\n 'transition-delay',\n 'transition-duration',\n 'transition-property',\n 'transition-timing-function',\n ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n// background-color: blue;\n// background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n const longhands = Object.values(shorthandProperties).reduce(\n (a, b) => [...a, ...b],\n []\n );\n\n return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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"}
@@ -1,73 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _logger = require("@linaria/logger");
9
-
10
- var _styled = _interopRequireDefault(require("@linaria/react/processors/styled"));
11
-
12
- var _tags = require("@linaria/tags");
13
-
14
- var _atomize = _interopRequireDefault(require("./helpers/atomize"));
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- class AtomicStyledProcessor extends _styled.default {
19
- #classes;
20
-
21
- get classes() {
22
- if (this.#classes) {
23
- return this.#classes;
24
- }
25
-
26
- throw new Error('Styles are not extracted yet. Please call `extractRules` first.');
27
- }
28
-
29
- extractRules(valueCache, cssText, loc) {
30
- const rules = {};
31
- const wrappedValue = typeof this.component === 'string' ? null : valueCache.get(this.component.node.name);
32
- const atomicRules = (0, _atomize.default)(cssText, (0, _tags.hasMeta)(wrappedValue));
33
- atomicRules.forEach(rule => {
34
- var _loc$start;
35
-
36
- // eslint-disable-next-line no-param-reassign
37
- rules[rule.cssText] = {
38
- cssText: rule.cssText,
39
- start: (_loc$start = loc === null || loc === void 0 ? void 0 : loc.start) !== null && _loc$start !== void 0 ? _loc$start : null,
40
- className: this.className,
41
- displayName: this.displayName,
42
- atom: true
43
- };
44
- (0, _logger.debug)('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
45
- });
46
- this.#classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
47
- .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
48
- return rules;
49
- }
50
-
51
- getProps() {
52
- const props = super.getProps();
53
- props.class = [this.classes, this.className].filter(Boolean).join(' ');
54
- props.atomic = true;
55
- return props;
56
- }
57
-
58
- getVariableId(source, unit, precedingCss) {
59
- const id = this.getCustomVariableId(source, unit, precedingCss);
60
-
61
- if (id) {
62
- return id;
63
- }
64
-
65
- const context = this.getVariableContext(source, unit, precedingCss); // id is based on the slugified value
66
-
67
- return context.valueSlug;
68
- }
69
-
70
- }
71
-
72
- exports.default = AtomicStyledProcessor;
73
- //# sourceMappingURL=styled.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styled.js","names":["AtomicStyledProcessor","StyledProcessor","classes","Error","extractRules","valueCache","cssText","loc","rules","wrappedValue","component","get","node","name","atomicRules","atomize","hasMeta","forEach","rule","start","className","displayName","atom","debug","filter","map","join","getProps","props","class","Boolean","atomic","getVariableId","source","unit","precedingCss","id","getCustomVariableId","context","getVariableContext","valueSlug"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport { hasMeta } from '@linaria/tags';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n #classes: string | undefined;\n\n private get classes(): string {\n if (this.#classes) {\n return this.#classes;\n }\n\n throw new Error(\n 'Styles are not extracted yet. Please call `extractRules` first.'\n );\n }\n\n public override extractRules(\n valueCache: ValueCache,\n cssText: string,\n loc?: SourceLocation | null\n ): Rules {\n const rules: Rules = {};\n\n const wrappedValue =\n typeof this.component === 'string'\n ? null\n : valueCache.get(this.component.node.name);\n\n const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n atomicRules.forEach((rule) => {\n // eslint-disable-next-line no-param-reassign\n rules[rule.cssText] = {\n cssText: rule.cssText,\n start: loc?.start ?? null,\n className: this.className,\n displayName: this.displayName,\n atom: true,\n };\n\n debug(\n 'evaluator:template-processor:extracted-atomic-rule',\n `\\n${rule.cssText}`\n );\n });\n\n this.#classes = atomicRules\n // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n .filter((rule) => !!rule.className)\n .map((rule) => rule.className!)\n .join(' ');\n\n return rules;\n }\n\n protected override getProps(): IProps {\n const props = super.getProps();\n props.class = [this.classes, this.className].filter(Boolean).join(' ');\n props.atomic = true;\n return props;\n }\n\n protected override getVariableId(\n source: string,\n unit: string,\n precedingCss: string\n ): string {\n const id = this.getCustomVariableId(source, unit, precedingCss);\n if (id) {\n return id;\n }\n\n const context = this.getVariableContext(source, unit, precedingCss);\n // id is based on the slugified value\n return context.valueSlug;\n }\n}\n"],"mappings":";;;;;;;AAEA;;AAEA;;AACA;;AAGA;;;;AAEe,MAAMA,qBAAN,SAAoCC,eAApC,CAAoD;EACjE,CAACC,OAAD;;EAEmB,IAAPA,OAAO,GAAW;IAC5B,IAAI,KAAK,CAACA,OAAV,EAAmB;MACjB,OAAO,KAAK,CAACA,OAAb;IACD;;IAED,MAAM,IAAIC,KAAJ,CACJ,iEADI,CAAN;EAGD;;EAEeC,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAInB;IACP,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,YAAY,GAChB,OAAO,KAAKC,SAAZ,KAA0B,QAA1B,GACI,IADJ,GAEIL,UAAU,CAACM,GAAX,CAAe,KAAKD,SAAL,CAAeE,IAAf,CAAoBC,IAAnC,CAHN;IAKA,MAAMC,WAAW,GAAG,IAAAC,gBAAA,EAAQT,OAAR,EAAiB,IAAAU,aAAA,EAAQP,YAAR,CAAjB,CAApB;IACAK,WAAW,CAACG,OAAZ,CAAqBC,IAAD,IAAU;MAAA;;MAC5B;MACAV,KAAK,CAACU,IAAI,CAACZ,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAEY,IAAI,CAACZ,OADM;QAEpBa,KAAK,gBAAEZ,GAAF,aAAEA,GAAF,uBAAEA,GAAG,CAAEY,KAAP,mDAAgB,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQA,IAAAC,aAAA,EACE,oDADF,EAEG,KAAIL,IAAI,CAACZ,OAAQ,EAFpB;IAID,CAdD;IAgBA,KAAK,CAACJ,OAAN,GAAgBY,WAAW,CACzB;IADyB,CAExBU,MAFa,CAELN,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbK,GAHa,CAGRP,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbM,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAOlB,KAAP;EACD;;EAEkBmB,QAAQ,GAAW;IACpC,MAAMC,KAAK,GAAG,MAAMD,QAAN,EAAd;IACAC,KAAK,CAACC,KAAN,GAAc,CAAC,KAAK3B,OAAN,EAAe,KAAKkB,SAApB,EAA+BI,MAA/B,CAAsCM,OAAtC,EAA+CJ,IAA/C,CAAoD,GAApD,CAAd;IACAE,KAAK,CAACG,MAAN,GAAe,IAAf;IACA,OAAOH,KAAP;EACD;;EAEkBI,aAAa,CAC9BC,MAD8B,EAE9BC,IAF8B,EAG9BC,YAH8B,EAItB;IACR,MAAMC,EAAE,GAAG,KAAKC,mBAAL,CAAyBJ,MAAzB,EAAiCC,IAAjC,EAAuCC,YAAvC,CAAX;;IACA,IAAIC,EAAJ,EAAQ;MACN,OAAOA,EAAP;IACD;;IAED,MAAME,OAAO,GAAG,KAAKC,kBAAL,CAAwBN,MAAxB,EAAgCC,IAAhC,EAAsCC,YAAtC,CAAhB,CANQ,CAOR;;IACA,OAAOG,OAAO,CAACE,SAAf;EACD;;AAvEgE"}